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