安装

官方文档首先下载微信小程序的开发者工具小程序开发者工具，再下载微信小程序DEMO源码 qq20161016-1 安装开发者工具，并解压DEMO源码，在开发者工具中导入源码项目

注册

打开微信公众平台，在里面注册账号选择小程序，用户体选择个人

app.json(全局配置)

我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等

pages

如果学过其他框架，可以把它理解为路由，在app.json文件的pages属性里面定义路由和对应的组件，默认是在pages文件夹里面寻找xxx组件的xxx.js文件，当然没有后缀

pages/index/index => page文件夹下的index组件的文件夹下的所有资源

pages接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成，每一项代表对应页面的路径+文件名信息

数组的第一项代表小程序的初始页面，小程序中新增/减少页面，都需要对 pages 数组进行修改
文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test",
    "pages/text/text"
  ],
//code
}

tabBar

tabBar其实就是配置底部的选项卡，在app.json文件的tabBar属性里面定义底部的选项卡的详细配置

如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有tab栏可以切换页面)，那么我们可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面

通过页面跳转wx.navigateTo或者页面重定向wx.redirectTo所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的tab栏

tabBar是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序

{
//code
  "tabBar": {
    "color": "#666",
    "selectedColor": "#268dcd",
    "borderStyle": "white",
    "backgroundColor": "#fafafa",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/wscats.png",
        "selectedIconPath": "image/wscats.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "分类"
      }
      //code
    ]
  }
}

一般我们可以新建一个放图标的文件夹image，此文件夹跟pages同级，然后在里面我们可以放图标

我在文件夹里面放了两张图片wscats.png和wscats-active.png，我们就可以在iconPath和selectedIconPath里面把图片引进来，设置的分别是切换选项卡时候出现的图标

tabBar属性	作用
color	未选中时候文字颜色
selectedColor	选中时候文字颜色
borderStyle	边样式，可以设置颜色和粗细
backgroundColor	背景颜色
list	详情看下表

list接受一个数组，数组中的每个项都是一个对象，其属性值如下

list属性	作用
pagePath	跳转路由
iconPath	未选中时候的图标
selectedIconPath	选中时候的图标
text	文字描述

window

用于设置小程序的状态栏、导航条、标题、窗口背景色

networkTimeout

可以设置各种网络请求的超时时间

debug

可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调试信息以info的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发。可以帮助开发者快速定位一些常见的问题

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的配置比app.json全局配置简单得多，只是设置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项

页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键

如图，在logs组件里面的logs.json设置对应的参数，那就会覆盖app.json原有的配置项

xxx.json(页面配置)

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置

页面的配置只能设置app.json中部分window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项，示例如下

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

组件

可以建立一个components的目录

在tab-content1.wxml写入以下代码，这里可以配合使用<slot></slot>让我们使用组件的时候插入片段

<view>
  <!--components/tab-content1/tab-content1.wxml-->
  <text>components/tab-content1/tab-content1.wxml</text>
  <slot></slot>
</view>

里面新建一个目录为tab-content1的目录作为组件的放置位置，然后可以在pages目录下的index.json下写入以下代码

{
  "usingComponents": {
    "tab-content1": "/components/tab-content1/tab-content1"
  }
}

然后在pages目录下的index.wxml下写入以下代码，来使用组件

<view class="weui-tab__content" hidden="{{activeIndex != 0}}">
   <tab-content1>
       <view>这里是插入到组件slot中的内容</view>
   </tab-content1>
</view>

生命周期

组件里面有的生命周期，可以在这里做逻辑或者监听其他组件的逻辑来通信数据

定义段	类型	是否必填	描述
created	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 setData
attached	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行
ready	Function	否	组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行

组件通信

组件和组件之间的通信，我个人会用$on和$emit来实现，参考发布订阅模式

父传子的数据通信

父组件在子组件的标签值上传递值

<pannel channel="hot"></pannel>

子组件<pannel>用properties属性接受，逻辑中用this.properties.channel获取值，这种方法类似于vue和react中的props方法

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    channel: String
  }
}

模板语法

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，可以构建一个可复用的模板

<template name="msgItem">
  <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view>
</template>

使用模板，先 import 对应模板的文件路径，使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

<import src="item.wxml" />
<template is="msgItem" data="{{text: 'forbar'}}" />
<template is="msgItem" data="{{...item}}" />

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

WeUI

在Github下载WeUI for 小程序为微信小程序量身设计 Github仓库

把weui-wxss/dist/style/目录中的weui.wxss放到程序根目录下，然后在app.wxss全局引用weui样式

@import 'weui.wxss';

然后就可以复制粘贴src/example文件夹里面的组件进行开发了

路由传参

我们在链接上带上哈希值，然后传递给详情页

<navigator url="/pages/detail/detail?id={{index}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

在详情页中获取options中的哈希值

Page({
  onLoad: function (options) {
    console.log(options)  
  }
})

获取视图输入值

input输入框显示自己输入的值，bindinput来对输入的值进行接受，再把值赋给一个变量

<input name="user" value="{{user}}" bindinput="inputUser" type="text" />

value="{{user}}"显示绑定的值，bindinput绑定事件，在e中的detail属性中获取

inputUser: function (e) {
    console.log(e.detail.value)
    this.setData({
      user: e.detail.value
    })
}

常用API

wx.request(Object object) 发起HTTPS网络请求，这个相当于微信小程序给我们封装好的ajax请求

在使用之前记得要去后台页面设置安全域名

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

当然如果只是测试可以勾选不校验合法域名

mpvue

mpvue github地址请参见是一个使用Vue.js开发小程序的前端框架。框架基于Vue.js核心，mpvue修改了Vue.js的runtime和compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验

安装

搭建环境

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli@2.9

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖
$ cd my-project
$ npm install
$ npm run dev

注意事项

新增的页面需要重新npm run dev来进行编译，比如新建的vue组件需要重新编译，小程序的工具才能看出效果

对应小程序的文件

vue文件对应小程序里面的那些文件

<template>
/* 这部分相当于原生小程序的 app.wxml */
</template>
<script>
/* 这部分相当于原生小程序的 app.js */
export default {
  created () {
  }
}
</script>
<style>
/* 这部分相当于原生小程序的 app.wxss */
</style>

全局的app.json就是对应小程序的app.json

{
  "pages": [
    "pages/index/main",
    "pages/logs/main",
    "pages/counter/main",
    "pages/setting/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "你是谁",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/main",
      "text": "首页"
    },  {
      "pagePath": "pages/logs/main",
      "text": "日志"
    },{
      "pagePath": "pages/counter/main",
      "text": "vuex"
    }, {
      "pagePath": "pages/setting/main",
      "text": "设置"
    }]
  }
}

局部的main.json对应的是page里面的xxx.json

{
  "navigationBarTitleText": "查看启动日志",
  "navigationBarBackgroundColor": "#58bc58"
}

Vuex

状态管理

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: (state) => {
      const obj = state
      obj.count += 1
    },
    decrement: (state) => {
      const obj = stat
      obj.count -= 1
    }
  }
})
export default store

组件可以通过store.commit('increment')，注意发现在语法上用单引号，结尾不要用分号，还有函数括号前要放空格，不然会报错

import store from '../store'
export default {
  methods: {
    edit () {
      store.commit('increment')
    }
  }
}

可以直接使用store.state.xxx获取state的值

import store from '../store'
export default {
  computed: {
    count () {
      return store.state.count
    }
  }
}

其他注意点

1. 在模板中，动态插入HTML的v-html指令不可用

小程序的界面并不是基于浏览器的BOM/DOM的，所以不能动态的在界面模板里直接插入HTML片段来显示

如果要插入html片段可以用<rich-text>组件或者wxParse(https://github.com/icindy/wxParse)来实现

1. 在模板中，用于数据绑定的双括号语法{{}}中的表达式功能存在诸多限制，以下功能都不能使用

表达式中放函数

<div>{{ formatMessage(msg) }}</div>

调用对象的方法

<div>{{ msg.trim().split(',').join('#') }}</div>

过滤器

<div>{{ msg | format }}</div>

在模板中，除事件监听外，其余地方都不能调用methods下的函数

<div v-if="getErrorNum() > 0  && code == 10001" class="error">{{ errorMsg }}</div>

1. 在模板中，不支持直接绑定一个对象到style或class属性上

官方建议的方案如下

<template>
  <div :class="classStr"></div>
</template>
<script>
export default {
  data() {
    return {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  },
  computed: {
    classStr() {
      let arr = []
      for (let p in this.classObject) {
        if (this.classObject[p]) {
          arr.push(p)
        }
      }
      return arr.join(' ') 
    }
  }
}
</script>

1. 在模板中，嵌套使用v-for时，必须指定索引index

<ul v-for="(category, index) in categories">
    <li v-for="(product, productIndex) in category.products">{{product.name}}</li>
</ul>

事件处理中的注意点

在mpvue中，一般可以使用Web的DOM事件名来绑定事件，mpvue会将Web事件名映射成对应的小程序事件名

// 左侧为WEB事件 : 右侧为对应的小程序事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

1. 对于表单，请直接使用小程序原生的表单组件

一句话，表单组件又多又复杂，框架可能Hold不住。所以在实际开发中，推荐直接使用小程序的表单组件标签来写，而不是使用Web的表单组件标签来写。当然了，在mpvue中使用了小程序的组件标签，数据绑定功能还是完全可以用的

<template>
  <div>
    <picker @change="handlePickerChange" :value="selectedIndex" :range="messages">
      <view class="picker">当前消息：{{ messages[selectedIndex] }}</view>
    </picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectedIndex: 0,
      messages: ['Hello', 'World', 'Haha']
    }
  },
  methods: {
    handlePickerChange (e) {
      console.log(e)
    }
  }
}
</script>

vue-router和axios无法使用

另外，在Vue开发Web应用的时候，通常使用vue-router来进行页面路由。但是在mpvue小程序开发中，不能用这种方式，请使用标签和小程序原生API wx.navigateTo等来做路由功能

还有就是请求后端数据，我们通常在Web开发中使用axios等ajax库来实现，但是在小程序开发中也是不能用的，也请使用小程序的原生API wx.request等来进行

Wscats / articles

微信小程序 #58

安装

注册