微信小程序開發學習筆記002--微信小程序框架解密

2024-04-27 15:12:16

字體：大中小

來源：轉載

供稿：網友

1.今天內容比較多,框架解密? 目錄結構? 配置文件詳解? 邏輯層? Api簡介-----------------------2.打開微信開發工具, 點擊添加項目,選擇無appid模式 credemo02 點擊添加項目就創建好了.3.首先打開sublime 然后file-->open folder-->找到credemo024.好,然后咱們看看框架的分析: 框架解密圖片: 框架分為:視圖層和邏輯層邏輯層可以通過api調用native app提供的一些微信底層的功能, 視圖層:wxml:微信自己定義的語言 wxss:微信定義的樣式表組件:app.js中咱們看看:pages-->index-->index.wxml:<view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view></view>咱們看看里面的標簽,有很多不是h5中的標簽,他是微信定義的標簽----------------------------pages-->index-->index.wxss:這跟CSS很像,但跟css又不一樣:/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx;//1.比如rpx單位,h5中沒有 height: 128rpx; margin: 20rpx; border-radius: 50%;}.userinfo-nickname { color: #aaa;}.usermotto { margin-top: 200px;}--------------------------好,視圖層是wxml和wxss,這兩個文件來做的,做界面的對吧.在小程序中的視圖層,他提供了很多的組件,用來做微信的小程序的ui---------------------------邏輯層是:pages-->index-->index.js里面用javaScript描述的.在邏輯層中,manger他提供了管理的一些東西,比如他里面有生命周期的概念.//index.js//獲取應用實例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件處理函數 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () {//1.比如這里的onload //對吧,就是生命周期中的一部分 // console.log('onLoad') var that = this //調用應用實例的方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({ userInfo:userInfo }) }) }})咱們看微信小程序框架分析.png咱們看看框架的結構,中間有一部分是說邏輯層和和視圖層之間靠數據綁定聯系在一塊,咱們看看什么是數據綁定.-----------------------數據綁定://index.js//獲取應用實例var app = getApp()Page({ data: {//1.這里數據部分,咱們看看這里如果//motto: 'Hello World',-->motto: 'Hello',//微信開發者工具中也變了對吧,//也就是數據綁定.// 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 }) }) }})------------------------------微信小程序框架分析.png下面還有一個事件對吧,咱們看看由于視圖層有按鈕之類的對吧,只要我點擊按鈕就會觸發事件,然后事件對應邏輯層中的一個函數,然后函數調用data層的,數據顯示對吧.然后左邊的api,是邏輯層,負責調用微信底層的能力,比如h5開發時,調用后端接口是怎么調用的?Ajax對吧.ajax h5中有跨域的問題對吧?jsonp不存在跨域問題對吧.解決跨域問題,咱們可以使用jsonp解決對吧.但是在微信小程序中他不存在跨域問題.api可以獲取當前網絡的情況是什么等等..-------------------------------好,咱們看看小程序的目錄結構:credemo02 pages: utils: util.js app.js app.json app.wxss images咱們還可以創建一個images文件夾,放圖片---------------好,咱們看看util.js這里定義了一些工具集:function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')}function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n}//1.上面定義的方法,如果想提供給外界使用//那么需要在//exports中定義一下.像下面這樣module.exports = { formatTime: formatTime}------------------------------------- pages:在小程序中的所有頁面會在這里面 index:頁面是首頁的意思. logs:是日志的意思.好,在index中描述頁面的話,有:index.js:頁面的行為index.wxml:頁面構造:相當于htmlindex.wxss:頁面樣式好,我還可以寫一個index.json對吧這個是對當前頁面的配置:比如,咱們可以把app.json中的{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}標題在index.json中覆蓋一下看看.比如在index.json中:好,在添加 {"navigationBarTitleText": "首頁", "navigationBarTextStyle":"red"}好,咱們看看效果,就變成了首頁對吧.字變成了紅色對吧.---------------------------------app.json:是小程序的配置文件.一會咱們再說每個頁面有四個文件:比如:index.js邏輯index.json當前頁面的配置index.wxml當前頁面結構index.wxss當前頁面的css樣式.app文件夾中,描述小程序主體的.-------------------------------注意index文件夾中的,index.json的優先級是大于app.json中的,他會先去app.json再去index.json中查找,app.json是全局的,index.json是針對某個頁面的.好,咱們看看小程序的配置文件的詳解:這個配置文件在:小程序配置文件詳解.pdf中,參考.咱們看看.app的配置文件:app.json:{//1.pages:設置頁面路徑//比如當前有個index頁面,有個logs頁面對吧.//這是一個數組,按照數組的先后順序,咱們存放//比如先顯示index,那就是把index放在前面//以后,咱們寫的所有頁面都必須寫到配置中去.//否則,沒有配置的頁面將不會被加載.////這里面第一個頁面是首頁.// "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}-----------------------這里,比如:"pages":[ "pages/index/index", "pages/logs/logs" ],我到過來寫:{ "pages":[ "pages/logs/logs", "pages/index/index" ],這樣顯示的頁面就會先顯示logs的.-------------------------------------好,比如這里我新建一個頁面,咱們看看:在pages文件夾下,新建一個test目錄然后,新建test.jstest.wxmltest.wxss文件咱們寫一個test頁面,好,首先咱們看看:由于,咱們安裝了,小程序的sublime插件咱們可以看到.當輸入wxpage時候,自動回車插入了下面的代碼,比如我給頁面起個名字.Page({data:{name:"創夢credream"},onLoad:function(options){},onReady:function(){},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) -------------------好,然后我在test.wxml中寫上<view class="mod-test">{{name}}<view><view>:小程序自己定義的標簽class="mod-test":添加選擇器,跟css一樣---------------------------test.wxss:.mod-test{text-align:center;}-----------------------app.json{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light",//1.字體的背景顏色 "navigationBarBackgroundColor": "#fff", //2.導航條的背景顏色改成dfdfdf試試 "navigationBarTitleText": "WeChat", //3.navigationBarTextStyle導航標題顏色 // "navigationBarTextStyle":"black" }}------------------------當然,上面是全局的app.json咱們可以修改:test.json來修改test頁面的咱們可以新建一個test.json寫上,咱們看看標題變了對吧.{ "navigationBarTitleText": "credreamTest"}--------------------------注意,小程序的標題等等:咱們看看在app.json中,被聲明在了:{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{//1.被聲明在了window這個里面對吧// "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"blue" }}但是咱們的測試頁面,咱們可以看看:test.json{"navigationBarTitleText": "credreamTest"}直接在里面這樣寫就可以了.這個要注意------------------------------好,咱們看看:小程序配置文件詳解.pdf里面還有其他配置對吧,比如:backgroundColor 背景色咱們修改一下看看:app.json:{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"blue", //1.添加這里 "backgroundColor":"blue" }}可以看到微信開發工具中,沒有變對吧.--------------------------------------再改改:test.wxss.mod-test{text-align:center;//1.添加這句height:100rpx;}再看看,還是沒有生效對吧.那好,咱們先試試其他的,這個背景顏色不是直接顯示出來的哈,他是其他意思,比如:enablePullDownRefresh 開啟下拉刷新咱們看看:------------------app.json{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"blue", "backgroundColor":"blue", //1.添加: "enablePullDownRefresh":"true" }}添加以后,就可以下拉刷新了. 然后,咱們回到微信開發工具,下拉一下頁面,一刷可以看到上面就是藍色了對吧.----------------------------------好,backgroundTextStyle:下拉背景字體,loading圖樣式這些可以自己試試好,上面是所有的window中的配置.---------------------------好,咱們tabBar咱們看看再看看:什么是tabBar?是底部導航條哈.-----------------------怎么寫呢?咱們看看:app.json中:{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"blue", "backgroundColor":"blue", "enablePullDownRefresh":"true" }},//1.這里添加//這里可以參考://小程序配置文件詳解.pdf"tabBar":{}---------------------咱們看看,底部的導航,咱們怎么弄?{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"blue", "backgroundColor":"blue", "enablePullDownRefresh":"true" },//1.添加導航對吧.//添加以后,咱們看看"tabBar":{//2.小程序配置文件詳解.pdf中有//list是,定位到不同的頁面中//比如test/index頁面// "list":[{ "text":"測試", "pagePath":"pages/test/test"},{ "text":"首頁", "pagePath":"pages/index/index"} ]}}----------------------------------好,添加完以后,咱們刷新看看可以了對吧,下面有兩個導航內容了.----------------------------------好,咱們還可以添加一下顏色:當前的tabBar的顏色對吧.咱們看看:{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"blue", "backgroundColor":"blue", "enablePullDownRefresh":"true" },"tabBar":{//1.設置tabBar的背景顏色// "backgroundColor":"#dfdfdf", "list":[{ "text":"測試", "pagePath":"pages/test/test"},{ "text":"首頁", "pagePath":"pages/index/index"} ]}}再看看效果,tabBar變灰色了對吧.-----------------------------還有,tabBar的,比如:selectedColor對吧咱們看看,選擇顏色對吧.app.json中{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"blue", "backgroundColor":"blue", "enablePullDownRefresh":"true" },"tabBar":{ "backgroundColor":"#dfdfdf",//1.這里設置顏色對吧.// "selectedColor":"blue", "list":[{ "text":"測試", "pagePath":"pages/test/test"},{ "text":"首頁", "pagePath":"pages/index/index"} ]}}-------------------------------好,下面咱們看看:networkTimeout設置忘了超時時間debug 是否開啟debug參照:小程序配置文件詳解.pdf咱們來看看:app.json{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"blue", "backgroundColor":"blue", "enablePullDownRefresh":"true" },"tabBar":{ "backgroundColor":"#dfdfdf", "selectedColor":"blue", "list":[{ "text":"測試", "pagePath":"pages/test/test"},{ "text":"首頁", "pagePath":"pages/index/index"} ]},//1.這里我添加調試信息//添加以后,咱們看看//"debug":"true"}咱們看看:微信開發工具中點擊調試,然后console中出現了很多調試信息對吧.-------------------------------好,以上這是app.json的配置信息.-----------------------------好咱們再看看小程序的生命周期:onLaunch:小程序初始化onShow:小程序顯示onHide:小程序隱藏onError:小程序出錯any:其他函數---------------------咱們看看.app.js//app.jsApp({//1.onLaunch:小程序初始化 onLaunch: function () { //調用API從本地緩存中獲取數據 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) },//3.這也是any函數對吧.// getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //調用登錄接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } },//2.這個是any其他函數對吧.// globalData:{ userInfo:null }})好,這個是小程序的生命周期..--------------------好,咱們再看看,頁面的生命周期頁面比如:index.jsindex.jsonindex.wxmlindex.wxss好,頁面的生命周期是靠test.js描述的Page({//1.這個表示頁面數據,把數據放在這里//然后在test.wxml中就可以調用了.//data:{name:"credream"},//2.onLoad監聽頁面加載onLoad:function(options){},//3.頁面加載成功onReady:function(){},//4.頁面顯示onShow:function(){},//5.頁面隱藏onHide:function(){},//6.頁面卸載onUnload:function(){},//7.頁面下拉刷新onPullDownRefresh:function(){},//8.點擊分享按鈕onReachBottom:function(){}}) --------------------------------好,比如,這里我用日志來打印一下看看test.js在h5中,onReady指的是節點加載ok了對吧.而onLoad呢?指的是頁面上所有的資源都加載完成了對吧.好沒咱們看看:他的加載的順序對吧.Page({data:{name:"credream"},onLoad:function(options){//1.這里輸出日志,會在調試//控制臺顯示console.log('onLoad')},onReady:function(){//2.這里輸出日志,會在調試//控制臺顯示console.log('onReady')},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) 好,咱們去微信開發工具中看看點擊調試,可以看到:onLoad先執行onReady后執行對吧.這個跟h5中是反過來的對吧.要跟以前的知識做個對比.---------------------------------好,咱們再看看:咱們的頁面,比如在test.js中能不能拿到在app.js中定義的數據呢?咱們看看:首先我在app.js中定義數據://app.jsApp({ onLaunch: function () { //調用API從本地緩存中獲取數據 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //調用登錄接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null, //1.這里定義一個數據 time:'2016/12/24' }})然后咱們看看怎么在test.js中獲取這里定義的數據啊:可這樣:test.js//1.首先通過這個getApp()//獲取app實例//var app = getApp();Page({data:{name:"credream",//2.這里定義一個time//注意這里的定義是定義//一個數據,這個數據將來//可以在其他地方,比如頁面//上拿出來使用.time:''},onLoad:function(options){console.log('onLoad');//3.通過app.globalData.time//獲取定義的時間數據.//console.log(app.globalData.time);},onReady:function(){console.log('onReady')},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) ----------------------------------好,咱們去編譯的界面看看,微信開發工具里面可以看到調試里面,已經輸出,咱們定義的數據了對吧.--------------------好,這個數據,如何讓他顯示在頁面上呢?咱們看看:咱們可以這樣:test.wxml<view class="mod-test">{{name}}{{time}}</view>在頁面的文件中加上時間的引用但是,回到頁面看看沒有顯示---------------------------是因為:test.js中需要:var app = getApp();Page({data:{name:"credream",//1.這里需要給定值//time:'2017/01/14'},onLoad:function(options){console.log('onLoad');console.log(app.globalData.time);},onReady:function(){console.log('onReady')},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) ------------------------------回去看看,就能顯示出來了對吧.好,現在咱們顯示的時間,是直接在test.js中定義的對吧,如果咱們顯示在app.js中定義的時間,咱們看看怎么做?test.jsvar app = getApp();Page({data:{name:"credream",time:'2017/01/14'},onLoad:function(options){console.log('onLoad');//1.這里可以這樣//這樣寫,就可以取出app.js的globalData中//定義的數據了.//this.setData({time:app.globalData.time})console.log(app.globalData.time);},onReady:function(){console.log('onReady')},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) -------------------------------------好,當然在test.js中,咱們也可以拿到app.js中的方法,比如:我添加一個方法://app.js中App({ onLaunch: function () { //調用API從本地緩存中獲取數據 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, //1.這里添加一個方法 // getUserName:function(){ return "dream"; }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //調用登錄接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null, time:'2016/12/24' }})------------------------然后,在test.js中聲明一個變量來接收數據咱們看看:var app = getApp();Page({data:{name:"credream",time:'2017/01/14',//1.聲明接收數據的變量//username:''},onLoad:function(options){console.log('onLoad');this.setData({time:app.globalData.time})//2.這里獲取app.js中定義的數據//咱們看看//this.setData({username:app.getUserName()})console.log(app.globalData.time);},onReady:function(){console.log('onReady')},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) -------------------------------下次,咱們顯示一個圖片好,在test.js中,咱們可以顯示很多東西對吧.可以做很多東西的.------------------好,接下來咱們看看:api的簡介:打開幫助文檔:https://mp.weixin.QQ.com/debug/wxadoc/dev/api/?t=2017112可以看到,里面提供了很多的api對吧好,咱們演示下怎么用:咱們在onLoad中,調用一下知乎日報的api咱們看看:好,首先我找到知乎日報的api,顯示一下給大家看看http://news-at.zhihu.com/api/4/news/latest訪問一下,可以顯示出來對應的新聞對吧.好,咱們怎么調用呢?咱們看看在test.js中咱們看看:var app = getApp();Page({data:{name:"credream",time:'2017/01/14',username:''},onLoad:function(options){console.log('onLoad');this.setData({time:app.globalData.time})this.setData({username:app.getUserName()})//1.這里咱們輸入wxrequ...咱們的sublime的//插件就會自動導入下面的代碼//好每個參數是干嘛用的,在//官網文檔有解釋//wx.request({//1.這里給上url,webservice地址//對吧.// url: 'http://news-at.zhihu.com/api/4/news/latest', data: {//1.這是發送給api地址的//參數 }, header: { 'Content-Type': 'application/json' }, success: function(res) {//2.成功接收的數據//咱們去調試窗口看看//已經返回了數據對吧.//可以看到有很多數據,咱們可以//用一個列表顯示一下對吧.//console.log(res.data) }, fail: function(res) { }, complete: function(res) { }})console.log(app.globalData.time);},onReady:function(){console.log('onReady')},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) ---------------------------比如:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.htmlwx.request發起的是 HTTPS 請求。OBJECT參數說明：參數名類型必填說明url String 是開發者服務器接口地址data Object、String否請求的參數header Object 否設置請求的 header , header 中不能設置 Referermethod String 否默認為 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTdataType String否默認為 json。如果設置了 dataType 為 json，則會嘗試對響應的數據做一次 JSON.parsesuccess Function否收到開發者服務成功返回的回調函數，res = {data: '開發者服務器返回的內容'}fail Function 否接口調用失敗的回調函數complete Function否接口調用結束的回調函數（調用成功、失敗都會執行）--------------------------------有這些介紹對吧,好這些大家可以看看.好,大家如果對h5了解,這個循環顯示,就很簡單了,好咱們先看看這個怎么用后邊咱們詳細的講解:比如,我現在test.js中,設置一個接收這個list數據的變量:var app = getApp();Page({data:{name:"credream",time:'2017/01/14',username:'',//1.首先聲明一個list數組//list:[]},onLoad:function(options){console.log('onLoad');this.setData({time:app.globalData.time})this.setData({username:app.getUserName()})wx.request({ url: 'http://news-at.zhihu.com/api/4/news/latest', data: { }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res) }, fail: function(res) { }, complete: function(res) { }})console.log(app.globalData.time);},onReady:function(){console.log('onReady')},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) ---------------------------------------然后,咱們看看聲明list變量,以后,咱們看看如何顯示在test.wxml<view class="mod-test">{{name}}{{time}}<view>{{username}}</view>//1.這里通過下面的這個格式來顯示數據//item.title因為,咱們看看調用api以后//返回的數據,里面每一項都有title對吧//所以,這里通過item.title來顯示數據了.//<view wx:for="{{list}}">{{item.title}}</view></view>好,現在咱們看看test.js中看看,沒有看到有顯示的內容對吧,因為現在咱們在test.js中list是空的對吧,好,咱們來填充數據test.js對吧,咱們看看:var app = getApp();Page({data:{name:"credream",time:'2017/01/14',username:'',list:[]},onLoad:function(options){console.log('onLoad');this.setData({time:app.globalData.time})this.setData({username:app.getUserName()})//1.這里咱們定義一下這個this對吧//為什么啊?//var that=this;wx.request({//2.因為這里如果,咱們使用this的話//他指的是request這個對象,//但是實際上咱們用的時候,要用這外面的this//對吧,所以這里咱們把外面的this,接過來//用一個that代指.// url: 'http://news-at.zhihu.com/api/4/news/latest', data: { }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res); //3.這里給list填充數據 // that.setData({list:res.data.stories}) }, fail: function(res) { }, complete: function(res) { }})console.log(app.globalData.time);},onReady:function(){console.log('onReady')},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) ------------------------------------好,咱們看現在有數據了對吧,微信開發工具中顯示了,但是比較亂,咱們看看可以改改樣式比如:test.wxml中給他添加一個clas<view class="mod-test">{{name}}{{time}}<view>{{username}}</view>//1.添加一個item對吧//<view wx:for="{{list}}" class="item">//2.這個item是list中的每一項//{{item.title}}</view></view>-----------------------然后在樣式表中test.wxss中咱們看看:.mod-test{text-align:center;height:100rpx;}//1.給item添加樣式對吧//.mod-test .item{text-align:left;padding:5px;//2.內邊距border:1px solid #dfdfdf; }注意在test.js中{}指的是一個對象,而在{}中使用this他指的就是當前的{}這個對象.好,今天就到這里.

上一篇：設置無輸入的input樣式

下一篇：如何自己開發一個簡單的jquery 插件