前面一篇介紹了微信小程序目錄結構、基本配置。這里再來介紹一下函數定義、頁面渲染。
小程序邏輯app.js：定義App函數用來注冊一個小程序，包含全局數據和函數，指定小程序的生命周期回調等。整個小程序只有一個 App 實例，全部頁面共享使用。
//app.jsApp({ onLaunch: function () { // 展示本地存儲能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登錄 wx.login({ success: res => { // 發送 res.code 到后臺換取 openId, sessionKey, unionId } }) // 獲取用戶信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框 wx.getUserInfo({ success: res => { // 可以將 res 發送給后臺解碼出 unionId this.globalData.userInfo = res.userInfo // 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回 // 所以此處加入 callback 以防止這種情況 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null }})生命周期函數：
| 屬性 | 類型 | 描述 | 觸發時機 |
|---|---|---|---|
| onLaunch | Function | 生命周期回調―監聽小程序初始化 | 小程序初始化完成時（全局只觸發一次） |
| onShow | Function | 生命周期回調―監聽小程序顯示 | 小程序啟動，或從后臺進入前臺顯示時 |
| onHide | Function | 生命周期回調―監聽小程序隱藏 | 小程序從前臺進入后臺時 |
| onError | Function | 錯誤監聽函數 | 小程序發生腳本錯誤，或者 api 調用失敗時觸發，會帶上錯誤信息 |
| onPageNotFound | Function | 頁面不存在監聽函數 | 小程序要打開的頁面不存在時觸發，會帶上頁面信息回調該函數 |
| 其他 | Any | 開發者可以添加任意的函數或數據到 Object 參數中，用 this 可以訪問 |
頁面js：
頁面js中定義分享函數，定義之后右上角菜單才可以分享：
Page({ onShareAppMessage: function (res) { if (res.from === 'button') { // 來自頁面內轉發按鈕 console.log(res.target) } return { title: '自定義轉發標題', path: '/page/user?id=123', imageUrl: 'https://msllws.top/Public/uploads/2018-09-19/5ba1efaec1b1f.jpg' } }})頁面js中調用全局函數：
var AppInstance = getApp()console.log(AppInstance.globalData)
工具欄utils.js：存放常用的工具函數，例如日期格式化、時間格式化函數。定義后通過module.exports注冊，在其他頁面才可以使用。
練習：做出如下圖頁面及樣式
weather.js：
Page({ data: { temp:"4℃", low:"-1℃", high:"10℃", type:"晴", city:"北京", week:"星期四", weather:"無持續風行 微風級" }})weather.wxml：
<view class="content"> <view class="today"> <view class="info"> <view class="temp">{{temp}}</view> <view class='lowhigh'>{{low}}</view> <view class='type'>{{type}}</view> <view class='city'>{{city}}</view> <view class='week'>{{week}}</view> <view class='weather'>{{weather}}</view> </view> </view></view>weather.wxss：
.content{ font-family: 微軟雅黑,宋體; font-size:14px; background-size: cover; height: 100%; width: 100%; color: #333333;}.today{ padding-top: 70rpx; height: 50%;}.temp{ font-size: 80px; text-align: center;}.city{ font-size:20px; text-align: center; margin-top: 20rpx; margin-right: 10rpx;}.lowhigh{ font-size: 12px; text-align: center; margin-top: 30rpx;}.type{ font-size: 16px; text-align: center; margin-top: 30rpx;}.week{ font-size: 12px; text-align: center; margin-top: 30rpx;}.weather{ font-size: 12px; text-align: center; margin-top: 20rpx;}數據綁定：
<!--wxml--><view> {{message}} </view>page.js：
Page({ data: { message: 'Hello MINA!' }})列表渲染：
<!--wxml--><view wx:for="{{array}}"> {{item}} </view>page.js
Page({ data: { array: [1, 2, 3, 4, 5] }})
條件渲染：
<!--wxml--><view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view><view wx:elif="{{view == 'APP'}}"> APP </view><view wx:else="{{view == 'MINA'}}"> MINA </view>// page.jsPage({ data: { view: 'MINA' }})模板：
<!--wxml--><template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view></template><template is="staffName" data="{{...staffA}}"></template><template is="staffName" data="{{...staffB}}"></template><template is="staffName" data="{{...staffC}}"></template>// page.jsPage({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} }})
事件：
<view bindtap="add"> {{count}} </view>Page({ data: { count: 1 }, add: function(e) { this.setData({ count: this.data.count + 1 }) }})
希望本文所述對大家微信小程序設計有所幫助。
新聞熱點
疑難解答
