微信小程序官方demo學習

　　最近微信小程序很火，很喜歡那種輕應用，用完就走的理念。因而，下載好微信開發者工具，學習一下官方demo。

　　體驗下來，有相似react和vue的感受，dom相似react那種組件的，data-binding和vue相似。

 

1 註冊

到微信公衆平臺申請帳號，https://mp.weixin.qq.com/，而且綁定管理員帳戶方便上機調試。

下載微信開發者工具，登陸管理員微信帳戶。

 

2 初始

建立項目並初始化，輸入第一步生成的AppID。

 

3 目錄結構

其中，.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。

 

4 全局配置 app.json

app.json決定頁面文件的路徑、窗口的title、底部tab的表現、網絡超時時間、debug模式等，

下面是一個包含了全部配置項的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
}

　　

5 建立頁面

每一個頁面包含4個文件 **.js、**.wxml、**.wxss、**.json

 

index.js

//index.js
//獲取應用實例
var app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調用應用實例的方法獲取全局數據
    app.getUserInfo(function(userInfo){
      //更新數據
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

　　

getApp函數用來獲取應用實例

 

page函數用來註冊一個頁面，其指定頁面的初始數據、生命週期函數、事件處理函數和本身定義的函數，參數是一個對象。這裏很是相似vue的。

 

index.wxss是頁面的樣式表

其中定義的規則會覆蓋掉app.wxss中的樣式規則

 

index.json是頁面的配置文件

當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。若是沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。

 

6 數據綁定

logs頁面的結構

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

 

在block標籤上使用wx:for來遍歷logs數組，和vue的v-for同樣，自定義指令。

 1 //logs.js
 2 var util = require('../../utils/util.js')
 3 Page({
 4   data: {
 5     logs: []
 6   },
 7   onLoad: function () {
 8     this.setData({
 9       logs: (wx.getStorageSync('logs') || []).map(function (log) {
10         return util.formatTime(new Date(log))
11       })
12     })
13   }
14 })

 

 

7 路由跳轉

index.html頁面的view標籤的bindtap指令，綁定了bindViewTap函數，

 1 <!--index.wxml-->
 2 <view class="container">
 3   <view  bindtap="bindViewTap" class="userinfo">
 4     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
 5     <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 6   </view>
 7   <view class="usermotto">
 8     <text class="user-motto">{{motto}}</text>
 9   </view>
10 </view>

 

 

頁面跳轉函數 wx.navigateTo()

1   bindViewTap: function() {
2     wx.navigateTo({
3       url: '../logs/logs'
4     })
5   }

 

8 調試

在調試欄目下面，在pc上面調試。

或者在項目欄目下面，點擊預覽，使用手機掃碼預覽。