红红火火a

微信小程序个人心得

首先从官方文档给的框架说起,微信小程序官方文档给出了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)),接着我们就详细的分下一下这几个配置项.

pages

它的作用是配置小程序的页面,这个配置项是必填的,它接受一个数组,里面的每一项都是字符串,从上面给出的代码: "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": "微信接口功能演示", "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是监听某个事件发生的API接口,接受一个CALLBACK函数作为参数,当事件触发时,会调用CALLBACK函数.
如未有特殊约定,其他API接口都接受一个object作为参数.
OBJECT 可以指定success,fail,complete来接受接口调用结果.

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”.