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
仅可放置在<swiper/>组件中,宽高自动设置为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

推荐阅读更多精彩内容