这两周的微信小程序开发之路

博主： DamonHu
发布时间：2018 年 01 月 17 日
11530 次浏览
暂无评论
5315字数
分类：小程序开发

月初微信推出游戏号，一款跳一跳的火爆又点燃了公司开发小程序的热情，但是公司对这方面并没有知识储备，只能从零开始搞了，现在小程序已基本开发结束，未来两周内就会上线，这篇文章算是从一个初学者的角度去搞定怎么开发一款完整的小程序。

一、建立认知

看官方文档是最快的进阶路线：https://mp.weixin.qq.com/debug/wxadoc/dev/，所以花了一天在看小程序的框架、已有的组件和api内部提供的功能。工具栏基本不用看介绍，底部的调试和输出台和谷歌浏览器是一样的，所以如果调试过网页的话，会更加容易上手。

我这篇文章主要记录下开发中会用到的比较频繁的点，更详细的了解还是要浏览官方文档，在用到的地方多下点心思就行了。

代码说白了其实就是数据处理和样式显示，把数据显示到该显示的地方，所以要做的就是布局、数据处理。

一个page下一般有四个文件

.js文件负责数据逻辑的处理
.json文件负责该page的配置，比如标题栏、标题栏文字等
.wxml负责该page的界面
.wxss负责该page界面里面控件的样式，和网页的css文件作用相同

二、样式显示

程序基本需要的控件，比如按钮、播放器、图片、输入框、单选框等等微信已经提供，知道怎么使用就行，但是如果想更精细的个性化布局还是需要一番功夫的。

布局是使用的wxss布局，类似于css布局，如果会css会上手很快，如果没有接触过css的话，从零学习的话可以参考下找下其他书籍，赶工期的话，可以选择外包或者给网页人员做。

几个需要注意的点就是

2.1、数据传值

在微信小程序的view属性和内容里面，可以使用{{}}两个大括号包围起来的变量名去读取对应page的.js文件page的data里面的变量数据

比如.js中设置了message为Hello MINA

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

在.wxml文件可以使用双括号直接读取，这里采用的语法是Mustache语法，想了解其他更多的可以百度下

<view> {{ message }} </view>

在双括号里面做逻辑判断显示也是可以的

<view> {{ message == 'Hello' ? '哈哈':'呵呵'}} </view>

也可直接用到属性中判断，后面会提到

2.2、wx:for

使用wx:for可以渲染重复的view，比如button等等，都可以使用这个创建，

Page({
  data: {
    array: ["东东","西西","南南","北北"]
  }
})

在.wxml文件中可以使用里面的array变量

<view wx:for="{{array}}">
  {{index}}: {{item}}
</view>

方便的一点是这个index是默认的数组索引：0,1,2……，item是默认的循环的内容：东东……，通过wx:for创建的列表的属性都是一样的

为了更加高效，微信推荐在使用wx:for的时候也使用wx:key去设置当前的view的唯一的标识符，所以可以使用array的index或者自己加其他字段去建立，比如

<view wx:for="{{array}}" wx:key="unique-{{index}}">
  {{index}}: {{item}}
</view>

2.3、wx:if

wx:if是用来通过条件去判断是否要创建的节点，

比如.js中

Page({
  data: {
    hudd: 1
  }
})

那么在.wxml写下面这段布局的话

<view>
    <view id='1' wx:if="{{hudd == 1}}"> 1 </view>
    <view id='2' wx:elif="{{hudd == 2}}"> 2 </view>
    <view id='3' wx:else> 3 </view>
</view>

只会显示一个view，页面的结构效果就是

<view>
    <view id='1'> 1 </view>
</view>

相当于其他两个view虽然在.wxml写了，但是并没有渲染，当在js里面修改这个data的数据为2时，比如调用changeHudd函数

changeHudd:function(){
    this.setData({
      'hudd': 2
    })
  }

那么这个.wxml的页面结构会自动变为

<view>
    <view id='2'> 2 </view>
</view>

2.4、template

模板是为了批量创建相同结构的view，比如下图的这个编辑列表，因为有相同的类型，比如picker选择、text的输入，也有其他各自不同的类型比如textArea，单选框之类的，如果一列一列的写，那么就会产生很多重复的代码，所以这时候使用template创建是一个不错的选择。

比如创建这个输入的template

<!-- text输入框的cell -->
<!--
  id:int
  title: string     //标题
  placeHolder:string  //默认字符
  value:string      //默认值
  maxLength:int     //长度限制
  type:string       //输入法类型
-->
<template name="textCell">
  <view class='detail'>
    <text class='detail-title'> {{title}}</text>
    <input class='detail-content' id="{{id}}" bindinput='textChange' value="{{value}}" type="{{type}}" maxlength="{{maxLength}}" placeholder="{{placeHolder}}"/>
  </view>
</template>

template通过data字段传值，而这个data里面就要有在template定义好的字段名，如果没有设置，就会使用指定控件的默认值

Page({
  data: {
    'resumeName': {
          'id':1,
          'title' : '姓名',
          'value':'',
          'placeHolder':'请输入姓名',
          'maxLength':10,
          'cellType':'textCell'
     }
  }
})

使用的时候，就是将需要的data传入到template，is属性是指定使用哪个模板

<template is="{{resumeName.cellType}}" data="{{...resumeName}}" />

三、数据处理

数据处理就是函数的调用，就是看什么函数在什么时候调用

3.1、系统自动调用的函数

数据处理首先需要注意的是系统会调用的声明周期的那几个函数:onLaunch 、onShow……这几个函数

3.2、控件触发的函数

再关注控件绑定函数的触发，基本上.wxml里的view都可以通过bindtap去绑定.js文件里的函数，然后在js中处理

3.3、回调函数

一些控件会有对应时机的回调函数，比如video当开始/继续播放时触发play事件时会触发bindplay绑定的函数

3.4、Data的更新

知道函数的调用时机，然后看处理data数据。

比如page的.js文件里面的data是这样的

Page({
  data: {
    hudd: 1,
    blog:['name','lucky','damon'],
    ssss:{
        'name':'hudongdong',
        'age':26
    },
    mmmm:[{
        'name':'damon',
        'age':10
    },{
        'name':'blog',
        'sex':'男'
    }]
  }
})

这几个嵌套基本上可以说明data的更新方法。

微信推荐使用setData的方式去给属性赋值，不推荐直接赋值，使用setData赋值的时候会自动刷新.wxml的显示，比如使用wx:if的判断的时候，但是使用直接赋值的话，虽然值变了，但是界面并不会刷新

//不推荐像这样直接赋值
this.data.hudd = 100

var blogArray = ['dog','cat']
var ssObj = {'mmd':'hudongdong','MVP':30}

//推荐使用setData的赋值
this.setData({
      'hudd': 100,                //给属性赋值
      'blog[1]':'dog',            //给数组某一项赋值
      'blog': blogArray,        //给整个数组赋值
      'ssss.name':'hudong',    //给object的某一个属性赋值
      'ssss': ssObj,            //给整个object赋值
      'mmmm[0].name':'DamonHu'//给数组的某一个object的属性赋值
})

这样看出来赋值的规律了吧，其实就是按照层级找对应的节点即可。

如果是在回调的函数里面，记得不要直接使用this调用，而需要先将this保存一下，使用保存的那个变量调用，比如下面在tools.http的回调中，将this的data里面的hudd修改数据

dataChange: function (res) {
    var that = this
    tools.http('lists/detail', 'post', { 'resume_id': resumeID },function (res) {
        that.setData({
            'hudd': 100,
        })
    })
}

理解也很简单，因为回调函数里面如果直接使用this的话，相当于指向的是回调函数声明的那个对象自己，并不是当前调用的这个js对象。

3.5、不同的对象对同一个函数的判断或传值

比如使用wx:for创建的view中button绑定同一个函数

<view wx:for="{{array}}" wx:key="unique-{{index}}">
  <button bindtap='tipCheck'>保存</button>
</view>

如果创建了多个button，那么每个button都是响应了tipCheck这个函数，那么怎么去区分呢，可以通过加id、data - index、 data- xxx 等方法来标识

3.5.1、id方案

<view wx:for="{{array}}" wx:key="unique-{{index}}">
  <button id="{{index}}" bindtap='tipCheck'>保存</button>
</view>

可通过index或者其他标识去给id赋值，这样在响应的函数中可以通过event.currentTarget.id去获取到该id

tipCheck:function(event){
    switch (event.currentTarget.id) {
      case '3':
        this.setData({
          'hudd': 100
        })
        break
    }
}

3.5.2、data- xxx方案

通过使用data - xxx 的方法标识来传值，xxx可以自定义取名比如data-index等等都可以。在取值的时候使用event.currentTarget.dataset.xxx去取值

<view wx:for="{{array}}" wx:key="unique-{{index}}">
  <button data-index="{{index}}" bindtap='tipCheck'>保存</button>
</view>

可通过index或者其他标识去给id赋值，这样在响应的函数中可以通过event.currentTarget.id去获取到该id

tipCheck:function(event){
    switch (event.currentTarget.dataset.index) {
      case '3':
        this.setData({
          'hudd': 100
        })
        break
    }
}

这样基本上可以实现需要区分的id或者需要传的值。