2018-02-06

参考微信小程序的开发文档开发手册,关注版本更新说名

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

问题一：display:flex布局？？？
参考阮一峰Flex 布局教程：语法篇

bg2015071004.png

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

demo
问题二：padding:200rpx 0;单位？？？
微信小程序新单位rpx与自适应布局

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

window用于设置小程序的状态栏、导航条、标题、窗口背景色。

swiper组件

swiper-item
仅可放置在组件中，宽高自动设置为100%。

经验之谈

水平方向rpx
垂直方向px 间距 可滚动

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。wx:key="*this"

事件绑定

image.png

路由

wx.navigateTo(OBJECT)保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
wx.redirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面。
wx.reLaunch(OBJECT)关闭所有页面，打开到应用内的某个页面。
wx.switchTab(OBJECT)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

OBJECT 参数说明：

参数	类型	必填	说明
url	String	是	需要跳转的 tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

image.png

image.png