关于微信小程序的二三事（技术篇）

开发环境以及demo:

参见官方文档，注册->安装开发工具->新建项目，demo就跑起来了。

这一步比较简单，按照提示一步步安装好就行，然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。

代码构成

• pages

  • index

    • index.js
    • index.wxml
    • index.wxss

  • logs

    • logs.js
    • logs.json
    • logs.wxml
    • logs.wxss

• utils

  • utils.js
• app.js
• app.json
• app.wxss
• project.config.json

文件详解

1. app.json是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。demo 项目里的 app.json 配置内容如下：

   {
     "pages":[
       "pages/index/index",
       "pages/logs/logs"
     ],
     "window":{
       "backgroundTextStyle":"light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "WeChat",
       "navigationBarTextStyle":"black"
     }
   }

   我们简单说一下这个配置各个项的含义:

   • pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
   • window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。
     详细配置可以参考： 小程序的配置 app.json
2. project.config.json，开发工具本身个性化配置，比如界面颜色、编译配置等。其他配置项细节可以参考文档 开发者工具的配置 。

3. page.json，其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
   如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

   其他配置项细节可以参考文档 小程序的配置page.json。

   {
     "pages":[
       "pages/index/index",
       "pages/logs/logs"
     ],
     "window":{
       "backgroundTextStyle":"light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "WeChat",
       "navigationBarTextStyle":"black"
     }
   }
   

4.wxml和wxss，其实就是扩展了的html和css，加入一些类似 wx:if 这样的属性以及 {{ }} 这样的表达式，配合js来管理状态。 和vue如出一辙，写过模板引擎的同学也可以很快上手。

小程序能力

这一章实际是大家都比较关心的，到底小程序能调用微信的哪些能力。参见小程序的API 。
例如：

请求 ：

wx.request({
  url: 'test.php', 
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }

需要注意的是小程序只能请求https的接口，开发模式下可以打开详情 - 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书来调试http请求。

多线程
createWorker类似HTML5的webworker，可以做一些计算相关的事

唤起app
launchApp(OBJECT)
需要注意的是，并不能通过api调用来唤起app，只能听通过用户手动触发。而且只能跳回分享该页面的app。如下图

获取位置 ：

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})

open-data， 用于展示微信开放的数据，例：王者荣耀群排名

还支持canvas和地图，可以做很多有意思的东西。

热更新，h5

因为要走小程序的审核，所以实现热更新的方法只有依靠webview了，而且webview有和小程序页面一样的history，而且没有小程序只能嵌套5层页面的限制，不过只有企业应用才可以使用，但是不妨碍在开发模式下体验。webview组件

推送

模板消息
可以使用消息模板， 但是有一定的限制：

下发条件说明

1. 支付
   当用户在小程序内完成过支付行为，可允许开发者向用户在7天内推送有限条数的模板消息（1次支付可下发1条，多次支付下发条数独立，互相不影响）
2. 提交表单
   当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的，开发者需要向用户提供服务时，可允许开发者向用户在7天内推送有限条数的模板消息（1次提交表单可下发1条，多次提交下发条数独立，相互不影响）

违规说明
除不能违反运营规范外，还不能违反以下规则，包括但不限于：

不允许恶意诱导用户进行触发操作，以达到可向用户下发模板目的
不允许恶意骚扰，下发对用户造成骚扰的模板
不允许恶意营销，下发营销目的模板

总体而言，小程序的通知限制还是很多的。下面是一个通知的例子：

转发按钮

转发文档
可以在页面内安放一个转发按钮

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      success: function(res) {
        // 转发成功
      },
      fail: function(res) {
        // 转发失败
      }
    }
  }
})

追求开发体验

wepy是一套类vue.js体验的框架：

• 类Vue开发风格
• 支持自定义组件开发
• 支持引入NPM包
• 支持Promise
• 支持ES2015+特性，如Async Functions
• 支持多种编译器，Less/Sass/Stylus、Babel/Typescript、Pug
• 支持多种插件处理，文件压缩，图片压缩，内容替换等
• 支持 Sourcemap，ESLint等
• 小程序细节优化，如请求列队，事件优化等

mpvue更进一步，整套vue.js的开发模式，目标是使用一套代码跑在多端包括WEB、小程序（微信和支付宝）和 Native（借助weex）

• 彻底的组件化开发能力：提高代码复用性
• 完整的 Vue.js 开发体验
• 方便的 Vuex 数据管理方案：方便构建复杂应用
• 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
• 支持使用 npm 外部依赖
• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
• H5 代码转换编译成小程序目标代码的能力

---

关于小程序的一些其他感想，我写在了这里