微信小程序開發(fā)學(xué)習(xí)筆記002--微信小程序框架解密

2024-04-27 15:12:16

字體：大中小

供稿：網(wǎng)友

1.今天內(nèi)容比較多,框架解密? 目錄結(jié)構(gòu)? 配置文件詳解? 邏輯層? Api簡介-----------------------2.打開微信開發(fā)工具, 點擊添加項目,選擇無appid模式 credemo02 點擊添加項目就創(chuàng)建好了.3.首先打開sublime 然后file-->open folder-->找到credemo024.好,然后咱們看看框架的分析: 框架解密圖片: 框架分為:視圖層和邏輯層邏輯層可以通過api調(diào)用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>咱們看看里面的標(biāo)簽,有很多不是h5中的標(biāo)簽,他是微信定義的標(biāo)簽----------------------------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//獲取應(yīng)用實例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件處理函數(shù) bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () {//1.比如這里的onload //對吧,就是生命周期中的一部分 // console.log('onLoad') var that = this //調(diào)用應(yīng)用實例的方法獲取全局?jǐn)?shù)據(jù) app.getUserInfo(function(userInfo){ //更新數(shù)據(jù) that.setData({ userInfo:userInfo }) }) }})咱們看微信小程序框架分析.png咱們看看框架的結(jié)構(gòu),中間有一部分是說邏輯層和和視圖層之間靠數(shù)據(jù)綁定聯(lián)系在一塊,咱們看看什么是數(shù)據(jù)綁定.-----------------------數(shù)據(jù)綁定://index.js//獲取應(yīng)用實例var app = getApp()Page({ data: {//1.這里數(shù)據(jù)部分,咱們看看這里如果//motto: 'Hello World',-->motto: 'Hello',//微信開發(fā)者工具中也變了對吧,//也就是數(shù)據(jù)綁定.// motto: 'Hello World', userInfo: {} }, //事件處理函數(shù) bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //調(diào)用應(yīng)用實例的方法獲取全局?jǐn)?shù)據(jù) app.getUserInfo(function(userInfo){ //更新數(shù)據(jù) that.setData({ userInfo:userInfo }) }) }})------------------------------微信小程序框架分析.png下面還有一個事件對吧,咱們看看由于視圖層有按鈕之類的對吧,只要我點擊按鈕就會觸發(fā)事件,然后事件對應(yīng)邏輯層中的一個函數(shù),然后函數(shù)調(diào)用data層的,數(shù)據(jù)顯示對吧.然后左邊的api,是邏輯層,負(fù)責(zé)調(diào)用微信底層的能力,比如h5開發(fā)時,調(diào)用后端接口是怎么調(diào)用的?Ajax對吧.ajax h5中有跨域的問題對吧?jsonp不存在跨域問題對吧.解決跨域問題,咱們可以使用jsonp解決對吧.但是在微信小程序中他不存在跨域問題.api可以獲取當(dāng)前網(wǎng)絡(luò)的情況是什么等等..-------------------------------好,咱們看看小程序的目錄結(jié)構(gòu):credemo02 pages: utils: util.js app.js app.json app.wxss images咱們還可以創(chuàng)建一個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:頁面構(gòu)造:相當(dāng)于htmlindex.wxss:頁面樣式好,我還可以寫一個index.json對吧這個是對當(dāng)前頁面的配置:比如,咱們可以把a(bǔ)pp.json中的{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}標(biāo)題在index.json中覆蓋一下看看.比如在index.json中:好,在添加 {"navigationBarTitleText": "首頁", "navigationBarTextStyle":"red"}好,咱們看看效果,就變成了首頁對吧.字變成了紅色對吧.---------------------------------app.json:是小程序的配置文件.一會咱們再說每個頁面有四個文件:比如:index.js邏輯index.json當(dāng)前頁面的配置index.wxml當(dāng)前頁面結(jié)構(gòu)index.wxss當(dāng)前頁面的css樣式.app文件夾中,描述小程序主體的.-------------------------------注意index文件夾中的,index.json的優(yōu)先級是大于app.json中的,他會先去app.json再去index.json中查找,app.json是全局的,index.json是針對某個頁面的.好,咱們看看小程序的配置文件的詳解:這個配置文件在:小程序配置文件詳解.pdf中,參考.咱們看看.app的配置文件:app.json:{//1.pages:設(shè)置頁面路徑//比如當(dāng)前有個index頁面,有個logs頁面對吧.//這是一個數(shù)組,按照數(shù)組的先后順序,咱們存放//比如先顯示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插件咱們可以看到.當(dāng)輸入wxpage時候,自動回車插入了下面的代碼,比如我給頁面起個名字.Page({data:{name:"創(chuàng)夢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>:小程序自己定義的標(biāo)簽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.導(dǎo)航條的背景顏色改成dfdfdf試試 "navigationBarTitleText": "WeChat", //3.navigationBarTextStyle導(dǎo)航標(biāo)題顏色 // "navigationBarTextStyle":"black" }}------------------------當(dāng)然,上面是全局的app.json咱們可以修改:test.json來修改test頁面的咱們可以新建一個test.json寫上,咱們看看標(biāo)題變了對吧.{ "navigationBarTitleText": "credreamTest"}--------------------------注意,小程序的標(biāo)題等等:咱們看看在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" }}可以看到微信開發(fā)工具中,沒有變對吧.--------------------------------------再改改: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" }}添加以后,就可以下拉刷新了. 然后,咱們回到微信開發(fā)工具,下拉一下頁面,一刷可以看到上面就是藍(lán)色了對吧.----------------------------------好,backgroundTextStyle:下拉背景字體,loading圖樣式這些可以自己試試好,上面是所有的window中的配置.---------------------------好,咱們tabBar咱們看看再看看:什么是tabBar?是底部導(dǎo)航條哈.-----------------------怎么寫呢?咱們看看: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":{}---------------------咱們看看,底部的導(dǎo)航,咱們怎么弄?{ "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"blue", "backgroundColor":"blue", "enablePullDownRefresh":"true" },//1.添加導(dǎo)航對吧.//添加以后,咱們看看"tabBar":{//2.小程序配置文件詳解.pdf中有//list是,定位到不同的頁面中//比如test/index頁面// "list":[{ "text":"測試", "pagePath":"pages/test/test"},{ "text":"首頁", "pagePath":"pages/index/index"} ]}}----------------------------------好,添加完以后,咱們刷新看看可以了對吧,下面有兩個導(dǎo)航內(nèi)容了.----------------------------------好,咱們還可以添加一下顏色:當(dāng)前的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.設(shè)置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.這里設(shè)置顏色對吧.// "selectedColor":"blue", "list":[{ "text":"測試", "pagePath":"pages/test/test"},{ "text":"首頁", "pagePath":"pages/index/index"} ]}}-------------------------------好,下面咱們看看:networkTimeout設(shè)置忘了超時時間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.這里我添加調(diào)試信息//添加以后,咱們看看//"debug":"true"}咱們看看:微信開發(fā)工具中點擊調(diào)試,然后console中出現(xiàn)了很多調(diào)試信息對吧.-------------------------------好,以上這是app.json的配置信息.-----------------------------好咱們再看看小程序的生命周期:onLaunch:小程序初始化onShow:小程序顯示onHide:小程序隱藏onError:小程序出錯any:其他函數(shù)---------------------咱們看看.app.js//app.jsApp({//1.onLaunch:小程序初始化 onLaunch: function () { //調(diào)用API從本地緩存中獲取數(shù)據(jù) var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) },//3.這也是any函數(shù)對吧.// getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //調(diào)用登錄接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } },//2.這個是any其他函數(shù)對吧.// globalData:{ userInfo:null }})好,這個是小程序的生命周期..--------------------好,咱們再看看,頁面的生命周期頁面比如:index.jsindex.jsonindex.wxmlindex.wxss好,頁面的生命周期是靠test.js描述的Page({//1.這個表示頁面數(shù)據(jù),把數(shù)據(jù)放在這里//然后在test.wxml中就可以調(diào)用了.//data:{name:"credream"},//2.onLoad監(jiān)聽頁面加載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指的是節(jié)點加載ok了對吧.而onLoad呢?指的是頁面上所有的資源都加載完成了對吧.好沒咱們看看:他的加載的順序?qū)Π?Page({data:{name:"credream"},onLoad:function(options){//1.這里輸出日志,會在調(diào)試//控制臺顯示console.log('onLoad')},onReady:function(){//2.這里輸出日志,會在調(diào)試//控制臺顯示console.log('onReady')},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) 好,咱們?nèi)ノ⑿砰_發(fā)工具中看看點擊調(diào)試,可以看到:onLoad先執(zhí)行onReady后執(zhí)行對吧.這個跟h5中是反過來的對吧.要跟以前的知識做個對比.---------------------------------好,咱們再看看:咱們的頁面,比如在test.js中能不能拿到在app.js中定義的數(shù)據(jù)呢?咱們看看:首先我在app.js中定義數(shù)據(jù)://app.jsApp({ onLaunch: function () { //調(diào)用API從本地緩存中獲取數(shù)據(jù) 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{ //調(diào)用登錄接口 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.這里定義一個數(shù)據(jù) time:'2016/12/24' }})然后咱們看看怎么在test.js中獲取這里定義的數(shù)據(jù)啊:可這樣:test.js//1.首先通過這個getApp()//獲取app實例//var app = getApp();Page({data:{name:"credream",//2.這里定義一個time//注意這里的定義是定義//一個數(shù)據(jù),這個數(shù)據(jù)將來//可以在其他地方,比如頁面//上拿出來使用.time:''},onLoad:function(options){console.log('onLoad');//3.通過app.globalData.time//獲取定義的時間數(shù)據(jù).//console.log(app.globalData.time);},onReady:function(){console.log('onReady')},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){},onReachBottom:function(){}}) ----------------------------------好,咱們?nèi)ゾ幾g的界面看看,微信開發(fā)工具里面可以看到調(diào)試?yán)锩?已經(jīng)輸出,咱們定義的數(shù)據(jù)了對吧.--------------------好,這個數(shù)據(jù),如何讓他顯示在頁面上呢?咱們看看:咱們可以這樣: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(){}}) ------------------------------回去看看,就能顯示出來了對吧.好,現(xiàn)在咱們顯示的時間,是直接在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中//定義的數(shù)據(jù)了.//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(){}}) -------------------------------------好,當(dāng)然在test.js中,咱們也可以拿到app.js中的方法,比如:我添加一個方法://app.js中App({ onLaunch: function () { //調(diào)用API從本地緩存中獲取數(shù)據(jù) 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{ //調(diào)用登錄接口 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中聲明一個變量來接收數(shù)據(jù)咱們看看:var app = getApp();Page({data:{name:"credream",time:'2017/01/14',//1.聲明接收數(shù)據(jù)的變量//username:''},onLoad:function(options){console.log('onLoad');this.setData({time:app.globalData.time})//2.這里獲取app.js中定義的數(shù)據(jù)//咱們看看//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中,調(diào)用一下知乎日報的api咱們看看:好,首先我找到知乎日報的api,顯示一下給大家看看http://news-at.zhihu.com/api/4/news/latest訪問一下,可以顯示出來對應(yīng)的新聞對吧.好,咱們怎么調(diào)用呢?咱們看看在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的//插件就會自動導(dǎo)入下面的代碼//好每個參數(shù)是干嘛用的,在//官網(wǎng)文檔有解釋//wx.request({//1.這里給上url,webservice地址//對吧.// url: 'http://news-at.zhihu.com/api/4/news/latest', data: {//1.這是發(fā)送給api地址的//參數(shù) }, header: { 'Content-Type': 'application/json' }, success: function(res) {//2.成功接收的數(shù)據(jù)//咱們?nèi)フ{(diào)試窗口看看//已經(jīng)返回了數(shù)據(jù)對吧.//可以看到有很多數(shù)據(jù),咱們可以//用一個列表顯示一下對吧.//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發(fā)起的是 HTTPS 請求。OBJECT參數(shù)說明：參數(shù)名類型必填說明url String 是開發(fā)者服務(wù)器接口地址data Object、String否請求的參數(shù)header Object 否設(shè)置請求的 header , header 中不能設(shè)置 Referermethod String 否默認(rèn)為 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTdataType String否默認(rèn)為 json。如果設(shè)置了 dataType 為 json，則會嘗試對響應(yīng)的數(shù)據(jù)做一次 JSON.parsesuccess Function否收到開發(fā)者服務(wù)成功返回的回調(diào)函數(shù)，res = {data: '開發(fā)者服務(wù)器返回的內(nèi)容'}fail Function 否接口調(diào)用失敗的回調(diào)函數(shù)complete Function否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）--------------------------------有這些介紹對吧,好這些大家可以看看.好,大家如果對h5了解,這個循環(huán)顯示,就很簡單了,好咱們先看看這個怎么用后邊咱們詳細(xì)的講解:比如,我現(xiàn)在test.js中,設(shè)置一個接收這個list數(shù)據(jù)的變量:var app = getApp();Page({data:{name:"credream",time:'2017/01/14',username:'',//1.首先聲明一個list數(shù)組//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.這里通過下面的這個格式來顯示數(shù)據(jù)//item.title因為,咱們看看調(diào)用api以后//返回的數(shù)據(jù),里面每一項都有title對吧//所以,這里通過item.title來顯示數(shù)據(jù)了.//<view wx:for="{{list}}">{{item.title}}</view></view>好,現(xiàn)在咱們看看test.js中看看,沒有看到有顯示的內(nèi)容對吧,因為現(xiàn)在咱們在test.js中l(wèi)ist是空的對吧,好,咱們來填充數(shù)據(jù)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填充數(shù)據(jù) // 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(){}}) ------------------------------------好,咱們看現(xiàn)在有數(shù)據(jù)了對吧,微信開發(fā)工具中顯示了,但是比較亂,咱們看看可以改改樣式比如: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.內(nèi)邊距border:1px solid #dfdfdf; }注意在test.js中{}指的是一個對象,而在{}中使用this他指的就是當(dāng)前的{}這個對象.好,今天就到這里.

上一篇：設(shè)置無輸入的input樣式

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