從服務器獲取到的數據一般放在onLoad生命周期函數中
示例代碼
// pages/posts/posts.js
Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {console.log('onload');},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {console.log('onReady');},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {console.log('onshow');},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {console.log('onhide');},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {console.log('onupload');},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {}
})
只有一個頁面時的執行順序:
具體詳解請看:
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
具體請看:
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
data
data 是頁面第一次渲染使用的初始數據。愛掏網 - it200.com
頁面加載時,data 將會以JSON字符串的形式由邏輯層傳至渲染層,因此data中的數據必須是可以轉成JSON的類型:字符串,數字,布爾值,對象,數組。愛掏網 - it200.com
渲染層可以通過 WXML 對數據進行綁定。愛掏網 - it200.com
Page.prototype.setData(Object data, Function callback)
setData 函數用于將數據從邏輯層發送到視圖層(異步),同時改變對應的 this.data 的值(同步)。愛掏網 - it200.com
官方示例代碼:
view>{{text}}view>
button bindtap="changeText"> Change normal data button>
view>{{num}}view>
button bindtap="changeNum"> Change normal num button>
view>{{array[0].text}}view>
button bindtap="changeItemInArray"> Change Array data button>
view>{{object.text}}view>
button bindtap="changeItemInObject"> Change Object data button>
view>{{newField.text}}view>
button bindtap="addNewField"> Add new data button>
// index.js
Page({data: {text: 'init data',num: 0,array: [{text: 'init data'}],object: {text: 'init data'}},changeText: function() {// this.data.text = 'changed data' // 不要直接修改 this.data// 應該使用 setDatathis.setData({text: 'changed data'})},changeNum: function() {// 或者,可以修改 this.data 之后馬上用 setData 設置一下修改了的字段this.data.num = 1this.setData({num: this.data.num})},changeItemInArray: function() {// 對于對象或數組字段,可以直接修改一個其下的子字段,這樣做通常比修改整個對象或數組更好this.setData({'array[0].text':'changed data'})},changeItemInObject: function(){this.setData({'object.text': 'changed data'});},addNewField: function() {this.setData({'newField.text': 'new data'})}
})
修改后效果
示例代碼
view class="post-container">view class="post-author-date">image src="{{author_img}}" class="post-author">image>text class="post-date">{{date}}text>view>text class="post-title">{{title}}text>image src="{{post_img}}" class="post-image">image>text class="post-content">{{content}}text>view class="post-like">image src="../../images/icon/chat.png" class="post-like-image">image>text class="post-like-font">{{collect_num}}text>image class="post-like-image" src="../../images/icon/view.png">image>text class="post-like-font">{{view_num}}text>view>view>
/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {var post_content1 = {date: "Sep 18 2024",title: "云澈、蕭澈",post_img: "/images/post/crab.png",author_img: "/images/avatar/1.png",content: "怎么回事……難道我還沒有死?我明明墜下了絕云崖,怎么可能還活著!而且身上居然沒有痛感……連不適感都沒有?這是怎么回事?",view_num: "112",collect_num: "96"}this.setData(post_content1) // 關鍵之處!!!},
注意:
var myBoolean=new Boolean("false"); //帶單引號的字符串false最終等于true