公司有个项目使用了微信小程序开发，自己之前开发过支付宝小程序，感觉两者大同小异。由于微信的官方文档写的不尽人意，于是自己写一篇文章来整理微信小程序的开发流程、一些常用组件和常用的api等。

前期准备

这里闲聊一下微信小程序的本质：其实是微信app的一个webview页面，在这个webview页面里可以使用WeixinJsBridge提供的各种api。好处就是依托了微信这个超高流量的app，坏处就是性能和体积和一些功能受到限制。

微信开发者入驻

  1. 移步开发者入驻网站注册开发者账号，开发者账号用于小程序开发时的测试和小程序发布用。

创建小程序

移步小程序官网创建小程序，获取小程序的appId；在之后的小程序开发时，会有配置文件需要开发者填写appId。

开发环境安装

安装小程序IDE

  1. 小程序IDE下载地址

小程序开发

小程序项目结构介绍

创建小程序之后会自动生成一些项目文件，下面介绍几个具有代表性的。

  1. app.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    {
      "pages": [
        "pages/index/index", // 第一项为首页
        "pages/logs/index"
      ],
      "window": {
        "navigationBarTitleText": "Demo",
        "navigationBarBackgroundColor": "#ffffff",
      	"navigationBarTextStyle": "black",
      	"backgroundColor": "#eeeeee",
    	  "backgroundTextStyle": "light"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/index",
          "text": "日志"
        }]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true,
      "navigateToMiniProgramAppIdList": [
        "wxe5f52902cf4de896"
      ]
    }

    注意：tabbar只能用在首页[香菇]，完整的配置项查看小程序配置文档。

  2. app.css

    作为全局样式，一般用来设置页面的背景、宽高。

  3. app.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    App({
    	// 第一次打开
      onLaunch(options) {
        console.log(options.query); // {number:1}
        console.log(options.path); // x/y/z
      },
      // 从后台被 scheme 重新打开
      onShow(options) {
        console.log(options.query); // {number:1}
        console.log(options.path); // x/y/z
      },
      // 监听小程序隐藏
      onHide() {
      
      },
      // 监听小程序错误
      onError(error:String) {
      
      },
      // 全局分享配置
      onShareAppMessage(object: Object) {
      
      },
      // 当 Promise 被 reject 且没有 reject 处理器时，会触发 onUnhandledRejection
      onUnhandledRejection(object: Object) {
      
      },
      // 用于记录app的一些全局信息，比如token等。
      // 在其他js页面通过getApp().globalData.token获取值
      globalData: {
      	token: '',
      	name: '',
      },
    });

  4. pages目录

    此目录存放小程序的页面，右击选择create page，ide自动给你生成如下相应的文件

    4.1 xx.wxss （页面的css样式）

    4.2 xx.wxml （页面的布局）

    4.3 xx.js （页面的js）

    4.4 xx.json（页面的配置信息）

  5. components目录

    此目录存放小程序的组建，右击选择create component，ide自动给你生成相应的文件

小程序的基础语法

  1. 数据类型

    1.1 String：字符串

    1
    var str = "hello world"

    1.2 Boolean：布尔值

    1
    var bol = true

    1.3 Number：数值

    1
    var num = 5.6

    1.3 Array：数组

    1
    var arr = []

    1.4 Object：对象

    1
    var obj = null; let obj= null;

    1.5 Date：日期

    1
    var date = getDate() // 生成Date需要使用getDate方法

    1.6 Regexp：正则表达式

    1
    var reg = getRegExp(pattern[, flags]) // 生成Regexp需要使用getRegexp方法

    1.7 Function：函数

    1
    2
    3
    testFun() {
    	return true;
    }

    1.8 数据类型判断

    1
    2
    3
    console.log(arr.constructor // Array
    // typeof能分辨出number、boolean和string，但是其他的类型只能识别是object
    console.log(typeof arr) // object

  2. 注释

    如果你的代码写不出让人读注释的水平，那么你就老老实实写注释，OK？

    1.1 单行注视

    1
    2
    // typeof能分辨出number、boolean和string，但是其他的类型只能识别是object
    console.log(typeof arr) // object

    1.2 多行注视

    1
    2
    3
    4
    5
    6
    /*
     * @obj 订单编号
     */
     testFunc(obj) {
     	// 你的业务逻辑
     }

  3. 函数

    3.1 函数定义同js，你说你不懂js？移步js语法

    3.2 让外界的js文件使用你的js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // util.js文件内容
    export const getStatus = function (obj) {
    	// 你的业务逻辑
    }
    // 需要引用的js文件（index.js）
    // 需要先import
    import { getStatus } from '../util.js' 
    /*
     * 获取订单数据
     */
    rquestOrder(){
    	var order = ....
    	var status = util.getStatus(order.status) // 引用调用
    }

小程序的常用接口

  1. 路由

    1.1 wx.switchTab({url:””})

    需要配合tabbar使用

    1.2 wx.reLaunch({url:””})

    关闭当前所有页面，跳转到应用内的某个指定页面

    1.3 wx.redirectTo({url:””})

    是关闭当前页面，跳转到应用内的某个指定页面，没有返回

    1.4 wx.navigateTo({url:””})

    从当前页面，跳转到应用内的某个指定页面，有返回

    1.5 wx.navigateBack()

    关闭当前页面，返回上一级或多级页面

  2. 下拉刷新

  3. 拨打电话

    1
    wx.makePhoneCall({number: '95888'})

  4. 网络请求

    小程序线上支持https请求

    小程序线上只支持后台配置的白名单访问，线下可以通过小程序详情配置忽略域名检查。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    // 一般我们会封装网络请求api到一个js文件（http.js）
    // 提供一个默认的请求option，自己可以再修改其中的值
    export const defaultOption = {
    	method: 'GET', // 
    	header: {
    		'content-type': 'application/x-www-form-urlencoded',
    	},
    	timeout: 30000,
    	dataType: 'json',
    	responseType: 'text',
      responseCharset:'utf-8',
    }

    // 提供一个请求调用
    export const httpClient = (url,data,option) => {
    	return new Promise((resolve,reject)=>{
    		// 将所有可枚举属性的值从一个或多个源对象分配到目标对象
    		option = Object.assign({},defaultOption,option)
    		option.url = url
    		option.data = data || {} // 等同data==null?{}:data
    		option.success = async(res) => {
    			console.log(JSON.stringify(res))
    			resolve(res)
    		}
    		option.fail = (res) => {
    			console.log(res)
    			reject(res)
    		}
    		wx.request(option) // send request
    	});
    }

    // 外部使用
    httpClient("your url",{"name":"whh"})

  5. 文件上传（裸码版本）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    wx.uploadFile({
      url: 'http://httpbin.org/post',
      fileType: 'image',
      fileName: 'file',
      filePath: path,
      success: res => {
      	my.alert({ title: '上传成功' });
      },
      fail: function(res) {
      	my.alert({ title: '上传失败' });
      },
    });

  6. 缓存
    单个小程序的缓存大小为10M，提供的接口为分同步和异步。

  7. 后续

css相关知识

参考

微信宝小程序官网