2018-01-18

小程序基础语法

配置

• app.json中的pages数组第一项为默认首页

• window模块包含属性
  `
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "C'est la vie",
  "navigationBarTextStyle":"black",
  "backgroundColor":"red",
  "enablePullDownRefresh":"false",
  "onReachBottomDistance":"20px"

  `

• tabBar标签栏

  attr	type	bool	describe
  color	HexColor	是	tab 上的文字默认颜色
  selectedColor	HexColor	是	tab 上的文字选中时的颜色
  backgroundColor	HexColor	是	tab 的背景色
  borderStyle	String	否	black tabbar上边框的颜色， 仅支持 black/white
  list	Array	是	tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
  position	String	否	bottom 可选值 bottom、top

• pages.json 覆盖全局配置

  attr	type	bool	describe
  navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
  navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
  navigationBarTitleText	String	C'est la vie	导航栏标题文字内容
  backgroundColor	HexColor	#ffffff	窗口的背景色
  backgroundTextStyle	String	dark	下拉背景字体、loading 图的样式，仅支持 dark/light
  enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面相关事件处理函数。
  disableScroll	Boolean	false	设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项
  onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

  DEMO
  { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }

逻辑层

1. js基础结构修改
   <p>
   * 增加 App 和 Page 方法，进行程序和页面的注册。
   * 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
   * 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
   * 每个页面有独立的作用域，并提供模块化能力。
   * 由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。
   * 开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。
   </p>

2. 注册程序

   App函数用来注册一个小程序，用于初始化，接收object参数，指定小程序的生命周期函数

   属性	类型	描述	触发时机
   onLaunch	Function	生命周期函数--监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   onShow	Function	生命周期函数--监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
   onHide	Function	生命周期函数--监听小程序隐藏	当小程序从前台进入后台，会触发 onHide
   onError	Function	错误监听函数	当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   其他	Any		开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

3. 注册页面

   Page函数注册一个页面，接收一个object参数，指定页面的初始数据，生命周期函数，事件处理函数

   属性	类型	描述
   data	Object	页面的初始数据
   onLoad	Function	生命周期函数--监听页面加载
   onReady	Function	生命周期函数--监听页面初次渲染完成
   onShow	Function	生命周期函数--监听页面显示
   onHide	Function	生命周期函数--监听页面隐藏
   onUnload	Function	生命周期函数--监听页面卸载
   onPullDownRefresh	Function	页面相关事件处理函数--监听用户下拉动作
   onReachBottom	Function	页面上拉触底事件的处理函数
   onShareAppMessage	Function	用户点击右上角转发
   onPageScroll	Function	页面滚动触发事件的处理函数
   onTabItemTap	Function	当前是 tab 页时，点击 tab 时触发
   其他	Any	开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问

   ---

   初始化数据,必须是json格式

    `
    <view>{{text}}</view>
    <view>{{array[0].msg}}</view>
    Page({
      data: {
        text: 'init data',
        array: [{msg: '1'}, {msg: '2'}]
      }
    })
    `
   

   ---

   生命周期函数

   wait

markdown 表格模板

|  attr  | type | bool | describe 
| :--: | : -- : | :--: | : -- :         
|color |  HexColor |   是  |     tab 上的文字默认颜色
| selectedColor  |  HexColor |   是  |     tab 上的文字选中时的颜色
| backgroundColor  | HexColor  |   是   |     tab 的背景色
| borderStyle |  String  | 否  | black tabbar上边框的颜色black/white
|list  |  Array |  是  |     tab 的列，最少2个、最多5个 tab
|position |   String | 否  | bottom  可选值 bottom、top