2017.07.06

Keywords

• 小程序
• 项目结构
• 程序配置
• view
• text
• image
• rpx
• swiper
• Boolean属性值陷阱
• bindtap
• navigateTo()
• redirectTo()

Check Out

• 小程序: 基于微信平台的混合式app，定位于简单、即用即走的轻应用程序。

• 项目结构 ``` // 小程序项目结构分为 应用程序级别文件、页面级别文件。 // 1. 应用级别文件 名字固定，位于跟目录下

• app.js // 整体程序的逻辑文件
• app.json // 整体程序的配置文件
• app.wxss // 全局公共的样式文件 // 1. 页面级别文件 .js .json .wxml .wxss 四个文件名必需相同，路径可自定义
• pageName.js // 页面逻辑 必需实现 Page({}) 方法，不可完全空白
• pageName.json // 页面配置 可覆盖全局的窗口配置 （window），默认为 {}， 不可为空
• pageName.wxml // 页面结构 必需用微信官方定义的组件标签

• pageName.wxss // 页面样式 css // 可在 app.json 配置中注册会自动生成对应的页面文件 ```

• 程序配置 ： 配置页面路径、窗口颜色、标题、网络等

  // app.json
  {
  "pages": [
    "pages/index/index",
    "pages/welcome/welcome",
  ],
  "window": {
    "navigationBarBackgroundColor": "#666"
  }
  }
  

• view组件，类似 div 容器

  <view>
  image+text
  </view>
  

• text组件：用于承载文本内容

• iamge组件：用于承载图片
• rpx单位：响应式单位 - 1rpx=1px=0.5pt，即 等于1单位的物理像素，0.5逻辑像素（苹果设备上）

• swiper轮播图组件

  <swiper autoplay="true" vertical="true" indicator-dots="true" interval="5000">
  <swiper-item></swiper-item>
  </swiper>
  

• Boolean值的陷阱： 如 vertical="flase" 相当于 vertical="false" 其实仍然为 true

• bindtap: 点击事件（手指点击）bindtap="handlerName"
• redirectTo({url:""})：销毁当前页面，然后跳转到下一个页面
• navigaterTo({url:""})：直接跳转到下一个页面（当成子页面），父页面后台保留