微信小程序官方文档个人分析心得

首先从官方文档给的框架讲起,微信小程序官方文档得出了app.js, app.json, app.wxss. 先从这三个文件讲起. - app.js 这个文件就是整个小程序的入口文件,开发者的逻辑代码在这里面同时实现,同时在这个文件夹里面可以定义全局变量. - app.json 这个文件可以对小程序展开全局布局,同意页面文件的路径,窗口整体表现,设置网络超时时间,设置多tab等. - app.wxss 就是小程序的公共样式表.(为了适应环境社会各界的前端开发者，我们的 WXSS 具备 CSS 大部分特性。 同时为了更适宜研发微信小程序，我们对 CSS 展开了扩展以及修正。)

接着我们就融合官方得出的代码具体内容说道一下上面提及的三个文件.

首先说道的就是配置文件app.json.下面就是官方得出的例子.

{

"pages": [ "pages/index/index", "pages/logs/index" ],

"window": { "navigationBarTitleText": "Demo" },

"tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] },

"networkTimeout": { "request": 10000, "downloadFile": 10000 },

"debug": true

}

官方得出了app.json五个布局项列表.(pages(Array), window(Object), tabBar(Object), networkTimeout(Object), debug(Boolean)),接着我们就详尽的Shahdol一下这几个布局项.

pages

它的促进作用就是布局小程序的页面,这个布局项是m6的,它拒绝接受一个数组,里面的每一项都就是字符串,从上面得出的代码: "pages": [ "pages/index/index", "pages/logs/index" ] 可以窥见,每一项分别对应的都就是同时实现文件的路径以及他的文件名. 特别注意:这个布局里面的第一行布局就是它的起始页面,比如上面代码的起始页面就是index

window

这个布局项是用以设置小程序的状态栏、导航条、标题、窗口背景色。他得出了六个属性(navigationBarBackgroundColor(HexColor), navigationBarTextStyle(String-(black,white)), navigationBarTitleText(String), backgroundColor(HexColor), backgroundTextStyle(String-(dark,light)), enablePullDownRefresh(Boolean)),开发者可以根据自己的市场需求去展开布局.

我们详尽说道一下这几个属性分别的功能:

navigationBarBackgroundColor 它就是用以设置导航系统栏背景颜色,这个属性必须输出的就是十六进制颜色值.

navigationBarTextStyle 它就是用以导航系统栏标题颜色的,它的输出类型就是字符串(String),但是现在官网得出的文档目前仅积极支持(black和white)这两种颜色.

navigationBarTitleText 这个属性就是表明导航系统栏标题内容的,开发者可以根据自己的须要去展开设置. - backgroundColor 这个属性就是设置窗口的背景色的,它须要输出的也就是十六进制颜色值的.

backgroundTextStyle 这个属性我的认知就是设置窗口内容的样式的,官方得出的标准表明就是下拉背景字体、loading 图的样式,这个属性同navigationBarTextStyle属性一样目前仅积极支持两种颜色(dark和light).

enablePullDownRefresh 这个属性就是设置与否打开下拉创下,预设就是打开的,特别注意: 在这个配置文件(app.json)中如果停用了下拉创下,当你在你自己研发的页面中想设置下拉创下也就是恰恰相反的,也就是说如果你想在以后页面中采用下拉创下这个功能,就必须确保这个配置文件中的这一项设置就是关上的.

上面得出的示例代码:

{

"window":{

"navigationBarBackgroundColor": "#ffffff",

"navigationBarTextStyle": "black",

"navigationBarTitleText": "微信USB功能模拟",

"backgroundColor": "#eeeeee",

"backgroundTextStyle": "light"

}

}

表明出的效果就是这样的:

tabBar

这个布局项是用以布局页面底部的tab栏的,开发者可以根据自己的市场需求去展开布局.

特别注意: tabBar就是一个数组,就可以布局最少2个,最多5个,而且tab栏的顺序就是按照数组的排序去的.

tabBar官方得出了一下五个属性(color(HexColor), selectedColor(HexColor), backgroundColor(HexColor), borderStyle(String), list(Array) ).

接下来说道说道我对这五个属性的认知:

color 设置tab上的文字预设颜色

selectedColor 设置tab上的文字选上的颜色

backgroundColor 设置tab的背景颜色

borderStyle 设置边框的颜色,现在仅积极支持(black和white)

上面这四个属性就是按照官方得出的API去设置就可以,下面说道一下list属性.list属性拒绝接受的就是一个数组(Array),在list下面布局的每一项都就是一个对象,他们都存有以下这四个属性(pagePath(String), text(String), iconPath( String), selectedIconPath(String)).

pagePath 这个定义的就是页面的路径,但是这个属性定义的路径必须就是在pages上定义过的.

text 设置的就是按钮上的文字

iconPath 就是定义icon图片的路径,这个属性定义的图片大小不少于40kb selectedIconPath 定义的就是获选中按钮之后表明的图片,同样图片的大小无法少于40kb.

下面就是官方得出的效果图:

networkTimeout

它就是用以设置各种网络命令的超时时间的,单位就是毫秒,官方得出了四个属性(request, connectSocket, uploadFile, downloadFile)这四个属性分别定义的就是wx.request, wx.connectSocket, wx.uploadFile, downloadFile 这四个API的超时时间.

debug

如果在app.json将debug布局为true,那么在开发者工具的控制器面板中可以输入详尽的调试信息.

以上就是根据官方得出的文档,我自学之后对app.json布局一些心得体会,下面我们在看看一下app.js 这个文件.

可以看见app.js这个文件的后缀就是js,要说,微信小程序的研发框架在逻辑层用的语言就是JavaScript.但是微信小程序也在JavaScript的基础上搞了一个修正,可以称作一个代莱轮子.这个框架可以并使开发者更加便利的调用一些微信的功能,比如洗一洗,微信缴付等一些微信特有的功能.

我们接着返回app.js这个文件中来,其他的稍后再说.

这个文件就是整个小程序的入口文件,也可以说道就是掌控整个小程序生命周期的文件,那么我们就不难想象,我们在这个文件中必须同时实现的几个功能,首先我们确实须要对整个程序展开登记注册,刚好微信给我们提供更多了一个app()去同时实现对整个程序的登记注册,同时app()里面还同时实现了对小程序生命周期的监控函数(onLaunch, onShow, onHide), 其中onLaunch就是监听小程序初始化,当初始化顺利完成时会引爆onLaunch,当然这个函数就是全局只引爆一次.onShow就是监听小程序的表明,在小程序启动时候,或者当你从后台步入至前台的时候就可以引爆这个函数.而onHide函数就是监听小程序的暗藏的,当你从前台转换至后台的时候,可以引爆onHide.存有了这些一个小程序的实例基本上称得上顺利完成了,当然为了使开发者重新加入更多自己的逻辑,微信还提供更多了为开发者在app()中重新加入自己的逻辑,开发者可以可以嵌入任一的函数或数据至 Object 参数中，用 this 可以出访.

特别注意:app()就可以定义在app.js中,而且无法登记注册多个.

当在app.js中登记注册了实例之后,如果你想要在自己的逻辑页面调用它,你可以用getApp()这个全局函数,这样你就可以全局调用app()里面的数据.

微信得出的官方代码如下:

var appInstance = getApp()

console.log(appInstance.globalData) // I am global data

特别注意:getApp()以获取里实例之后,不要私自调用生命周期函数. 而且不要在app.js中用getApp()函数,用this就可以调用app()里面的东西.

基本上app.js就这些东西,除了一些API里面的内容可以在后面一一了解.下面我们就看看一下app.wxss这个文件,一般来说搞过网站研发的(我自己就是用php去研发的,这就是我个人的一点拙见,如有不对恳请嘿嘿)坚信对css写下在单独的文件中必须不能陌生,这个app.wxss也就是相似的,不过他的的布局就是针对全局的,也就是说如果你在后面的page中没重新配置他,那么他就可以调用这个文件中的样式设置,但是如果你存有个人市场需求,须要在每个页面再次写下样式,那也没关系,他可以自动全面覆盖欺压文件中的样式.

当你再次建立一个微信小程序他就可以发生这几个文件,以上就是我融合官方文档对他们的一些认知,接下来就是page的逻辑,视图,布局的一些心得体会.

page

这一块就是开发者自己的业务同时实现文件了. 每一个页面可以放到一个文件夹中,这个文件夹中通常包含.js, .json, .wxml, .wxss 这四个文件,微信官方还建议这四个文件的名字最出色和文件夹的名字一致.这个易于框架自动搜寻,不须要搞更多的布局.

当你已经开始搞页面的功能的时候这个时候在.js,也须要登记注册,微信官方得出Page()这个函数去登记注册一个页面,他拒绝接受一个object参数,用其去选定页面的起始数据,生命周期函数,事件处理函数.须要特别注意的就是当你在登记注册这个页面的时候必须确认在最为已经开始的app.json这个配置文件中已经布局过这个页面,而且当你对程序有所发生改变的时候也必须保证app.json这个文件中的内容也随之适当改动.

微信给Page()函数一下几个属性(data(Object), onLoad(function), onReady(Function), onShow(Function), onHide(Function), onUpload(Function), onPullDownRefresh(Function)),而且你也可以嵌入任一函数或者数据至object参数中,在这个页面用this即可出访.

下面就直观的了解一下这几个官方得出的属性:

data - 同时实现页面的初始化数据

onLoad - 就是生命周期函数,用以监听页面读取,一个页面只可以调用一次,它的参数可以以获取wx.navigateTo和wx.redirectTo及< navigator/>中的query.

onReady - 同样就是生命周期函数,用以监听页面初次图形顺利完成,一个页面只可以调用一次,代表页面已经准备工作恰当,可以和视图层展开可视化.对页面的设置恳请在onReady之后设置,如wx.setNavigationBarTitle.

onShow - 生命周期函数,用以监听页面表明,每次页面关上都会调用一次.

onHide - 生命周期函数,监听页面暗藏'',当wx.navigateTo或者底部tab转换之后调用.

onUpload - 生命周期函数,用以监听页面装载.当wx.navigateTo和 navigateBack的时候调用.

onPullDownRefresh - 页面有关事件处理函数,用以监听用户的下拉动作.但是须要在config的window选项中打开enablePullDownRefresh,当数据创下顺利完成之后,可以用wx.stopPullDownRefresh暂停当前页面的下拉创下.

下面就是微信得出的官方代码:

Page({

data: {

text: "This is page data."

},

onLoad: function(options) {

// Do some initialize when page load.

},

onReady: function() {

// Do something when page ready.

},

onShow: function() {

// Do something when page show.

},

onHide: function() {

// Do something when page hide.

},

onUnload: function() {

// Do something when page close.

},

onPullDownRefresh: function() {

// Do something when pull down

},

// Event handler.

viewTap: function() {

this.setData({ text: 'Set some data for updating view.'

})

}

})

上面说道了用data属性去设置页面的初始化数据,但是如果我们想要发生改变数据里面的值,怎么办??那么我们就了解一个微信官方给我们提供更多的setData()函数,这个函数可以将数据从逻辑层发送到数据层,同时还可以发生改变this.data的值.

setData()拒绝接受一个对象参数,使数据以key,value的形式则表示将this.data中key对应的值发生改变成value.下面就是微信官方得出的page的生命周期的图片:

在小程序中的所有页面路由全部由框架展开管理,对于路由的引爆方式以及页面的生命周期函数可以通过调用API去展开..

下面我们就直观的了解一下微信小程序的API.

微信小程序框架给我们提供更多了多样的微信原生API,可以便利的调用微信提供更多的能力,例如以获取用户信息,本地存储,缴付功能等.

下面就是微信关于API提供更多的表明:

wx.on 结尾的API就是监听某个事件出现的APIUSB,拒绝接受一个CALLBACK函数做为参数,当事件引爆时,可以调用CALLBACK函数.

例如未特定签订合同,其他APIUSB都拒绝接受一个object做为参数.

OBJECT 可以选定success,fail,complete去拒绝接受USB调用结果.

OBJECT参数

API的具体内容调用恳请看看 微信小程序API文档

因为现在微信小程序还在内测期间,我也没内测号,所以具体内容的调用API代码须要在微信小程序对外开放之后,根据具体内容的逻辑展开同时实现.而且微信API文档已经给的非常确切,坚信调用不能太过困难.

上面的这些就是微信小程序page的页面登记注册以及API功能同时实现，但是我们晓得光存有这些就是比较的，在互联网发展至现在我们更加著重的就是人机交互，使用户存有一个更好的体验才称得上 一个不好的程序，那么接下来我们就谈谈微信小程序就是如何对页面展开图形的。

在微信小程序中使用了微信自己原生的图形方式。微信小程序的页面布局使用的就是wxml，然后融合基础组件，事件系统构筑出页面的结构。

wxml中存有数据存取，条件图形，列表图形， 模板，事件， 提及这几种方式，下面我们就具体内容说道说道这几种方式。

数据存取 在上面我们已经说道过了在Page()登记注册页面的时候，里面可以存有一个data属性去定义初始化数据，现在页面图形的数据存取的时候就须要调用data里面的数据了。下面看看一下官方得出的例子。

{{ message }}

Page({ data: { message: 'Hello MINA!' }})

从上面的代码可以看看出在视图层拒绝接受逻辑层的代码的时候须要用2个大括号把数据的键值纸盒出来就可以获得数据的值。当然在视图层还可以展开运算（三元运算，算术运算），逻辑推论，字符串运算，而且还可以在大括号里面展开女团（数组，对象（虽然可以随意女团，但是如果后面的局部变量和前面的局部变量相同的话，那么后面的会全面覆盖前面的））。

条件图形 顾名思义所谓的条件图形，就是通过条件去推论与否须要图形该代码块。条件图形主要就是使用wx:if 和 block wx:if 这两个，第一个坚信不好认知，第二个就是在block里面展开条件图形，这里我们特别表明一下< block/>并不是一个组件，它仅仅就是一个外包装元素，不能在页面中搞任何图形，只拒绝接受掌控属性。和我们以前的逻辑编程相似，既然存有了wx:if ，那么我们也可以存有wx:elseif和wx.else，这几个女团出来，可以并使条件图形更加有效率。

在这里官方文档中提及了一个wx:if和hidden的对照，通过合理的运用这两种方法可以并使你的程序更优。下面我们就是说说道他们俩的区别：

因为wx:if之中也可能将涵盖数据存取，所以当wx:if的条件值转换时，框架存有一个局部图形的过程，他可以保证条件在转换就是封存或者再次图形。同时wx:if也就是存有惰性的，如果起始图形条件为false,框架什么也不能搞，只有在条件第一次变成真的时候才可以已经开始图形。相比之下hidden就直观的多，组件始终都会被图形，只是直观的掌控表明和暗藏，一般来说，wx：if 存有更高的转换消耗，而hidden存有更高的起始图形消耗，你可以根据自己的市场需求去调用。

列表图形 -- wx:for

下面我们就说道说道wx:for的用法，wx:for存取一个数组，就可以采用数组中各项数据重复图形该组件，特别注意预设数组的当前项的负号局部变量预设为index，数组当前项的变量名叫item，，当然你也可以根据自己的须要去再次定义这两个名字，采用wx:for-item可以选定数组当前元素的局部变量，wx:for-index可以选定数组当前下标的局部变量，wx:for也可以嵌套，这个时候就须要发生改变预设框架给定义的名字了。

下面就是官方得出的事例代码：

{{index}}: {{item.message}}

Page({ data: { items: [{ message: 'foo', }, { message: 'bar' }] }})

{{idx}}: {{itemName.message}}

模板

WXML提供更多模板(template),可以在模板中定义代码片段,然后在相同的地方调用.微信小程序的模板可以用name去命名它的名字,在采用的时候用is去声明采用的模板,然后将模板所须要的data传至即可,下面我们用官方文档给的代码来看一下如何声明及调用模板.

上面这段代码可以看见模板的名字就是"msgItem".