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

开发环境以及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

文件详解

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
project.config.json，开发工具本身个性化配置，比如界面颜色、编译配置等。其他配置项细节可以参考文档开发者工具的配置。
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请求。

获取位置：

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组件

推送

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

下发条件说明
支付
当用户在小程序内完成过支付行为，可允许开发者向用户在7天内推送有限条数的模板消息（1次支付可下发1条，多次支付下发条数独立，互相不影响）
提交表单
当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的，开发者需要向用户提供服务时，可允许开发者向用户在7天内推送有限条数的模板消息（1次提交表单可下发1条，多次提交下发条数独立，相互不影响）
违规说明
除不能违反运营规范外，还不能违反以下规则，包括但不限于：
不允许恶意诱导用户进行触发操作，以达到可向用户下发模板目的
不允许恶意骚扰，下发对用户造成骚扰的模板
不允许恶意营销，下发营销目的模板

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

追求开发体验

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 代码转换编译成小程序目标代码的能力

作者：我有一只小腊肠
链接：关于微信小程序的二三事（技术篇）-新手教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Biegral Blog