微信小程序开发学习笔记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 插件