小程序框架學習筆記

1、文件結構

一、一個小程序主體部分由三個文件：app.js，app.json，app.wxss

二、一個小程序頁面由四個文件組成：js wxml wxss json

2、app.json配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

三邏輯層

一、App() 函數用來註冊一個小程序

App({
  onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})
二、Page() 函數用來註冊一個頁面
//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

頁面路由：在小程序中全部頁面的路由所有由框架進行管理。框架以棧的形式維護了當前的全部頁面。

三視圖層

數據綁定：WXML 中的動態數據均來自對應 Page 的 data

一、簡單綁定

<view> {{ message }} </view>

二、組件屬性(須要在雙引號以內

<view id="item-{{id}}"> </view>

三、控制屬性(須要在雙引號以內)

<view wx:if="{{condition}}"> </view>

四、關鍵字(須要在雙引號以內)

<checkbox checked="{{false}}"> </checkbox>

五、運算

（1）三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>

（2）算數運算

<view> {{a + b}} + {{c}} + d </view>

（3）邏輯判斷

<view wx:if="{{length > 5}}"> </view>

（4）字符串運算

<view>{{"hello" + name}}</view>

（5）數據路徑運算

<view>{{object.key}} {{array[0]}}</view>

（6）數組

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

（7）對象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

（8）也能夠用擴展運算符 ... 來將一個對象展開

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

六、wx:for

（1）

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

（2）使用 wx:for-item 能夠指定數組當前元素的變量名，

使用 wx:for-index 能夠指定數組當前下標的變量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

七、wx:key

wx:key 的值以兩種形式提供：

（1）字符串，表明在 for 循環的 array 中 item 的某個 property，該 property 的值須要是列表中惟一的字符串或數字，且不能動態改變。

（2）保留關鍵字 *this 表明在 for 循環中的 item 自己，這種表示須要 item 自己是一個惟一的字符串或者數字，如：

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]

八、wx:if

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

九、模板

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

十、事件

事件分爲冒泡事件和非冒泡事件：冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞；非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。

（1）事件綁定和冒泡

key 以bind或catch開頭，而後跟上事件的類型，如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起，bind和catch後能夠緊跟一個冒號，其含義不變，如bind:tap、、catch:touchstart。

value 是一個字符串，須要在對應的 Page 中定義同名的函數。否則當觸發事件的時候會報錯。 bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

十一、引用

（1）WXML 提供兩種文件引用方式import和include。

（2）include 能夠將目標文件除了 <template/> <wxs/> 外的整個代碼引入，至關因而拷貝到 include 位置

十二、wxs

（1）、模塊

var foo = "'hello world' from tools.wxs";

var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";


<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view