最近微信小程序很火，很喜歡那種輕應用，用完就走的理念。于是，下載好微信開發者工具，學習一下官方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上面調試。
或者在項目欄目下面，點擊預覽，使用手機掃碼預覽。
文章列表
留言列表
