小程序那些事-入门篇

以我们的DEMO项目为例，小程序最主要的页面结构如下图所示：

• app.json 小程序全局配置文件，主要用于小程序页面路径、页面窗口表现、网络超时等配置。
• app.js 小程序全局注册入口，App()用来注册一个小程序，全局只有一个，全局的数据也可以放到这里面来操作。
• app.wxss 定义全局的一些样式文件。
• project.config.json 小程序项目配置文件，类似package.json，可配置编译参数以及小程序appid等信息。
• page.json 与app.json相近的一个配置文件，不过只对当前页面生效，里面的配置会覆盖全局app.json的配置，并且新增滚动条相关配置。

生命周期

• onLoad 在page load的时候会执行这个钩子，并可以获得跳转相应的参数。
• onShow 小程序在每次显示的时候会触发这个钩子，包括页面加载后的显示以及home之后再激活视图时候的显示。
• onHide 与上面类似，不过是在隐藏的时候触发
• onLaunch 小程序初始化完成会触发这个钩子，一次APP周期只触发一次
• onError 全局监听错误钩子，小程序有任何错误都会触发这个钩子，建议可以全局埋点错误量

具体各个生命周期的细节及流程，可以参考下图：

数据绑定&渲染

数据绑定使用 Mustache 语法（双大括号）将变量包起来，类似Vue的绑定方式，具体可见下图：

条件渲染有wx-if与wx-hidden，if为惰性的，只在要显示的时候才会渲染，而hidden则是加载的时候就渲染，只不过隐藏而已，具体用法如下：

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件，默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item，也可以通过wv:for-item自定义item名，注意这里的条件渲染不能像我们常用的for循环那样使用，具体用法见下图：

导航

• wx.navigateTo 保留当前页面，跳转到应用内的某个页面，可携带参数，在onLoad的时候获取。
• wx.navigateBack 默认返回到上一页，根据参数不同可以一次返回到多个路由栈之前的页面。
• wx.redirectTo 关闭当前页面栈，并跳转到下一个页面。
• wx.reLaunch 关闭所有页面，打开发哦应用的某个页面，但是值得注意的是APP的onLaunch不会触发执行。
• wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

具体用法如下：

地图

• scale 调整缩放级别，取值范围为5-18
• longitude（latitude） 设置地图中心的经纬度，注意如果我们要设置自己的位置，getLocation 时候需要设置成gcj02，而且同时两个不同type获取位置的时候type会自动覆盖。
• markers 地图覆盖物，不支持调整图层优先级。
• polyline 可以绘制一组给定的经纬度路径，小程序不制止画区域并填充，如果有需求可以用路线代替，区域api将在后面小程序会支持。
• bindregionchange 视野发生变化的时候触发，一般监听地图变化去执行操作需要根据实际需求对这个监听进行节流或者近距离去抖操作，以免频繁无用操作。
• include-points 缩放视野以包含所有给定的坐标点，如果需要的是中心点不动的最佳视图则需要去手动计算对角两个坐标点，然后放大或者缩小地图。
• show-location 显示带有方向的当前定位点，安卓和IOS的图标不一样，且不可修改图标，如果有特殊图标需求的可以尝试用maekers代替当前定位。

• getCenterLocation 获取当前地图中心的经纬度，返回的是 gcj02 坐标系，在多次setCenter之后，有些手机上获取不准确，可能获取到前一个位置。
• moveToLocation 将地图中心移动到当前定位点，需要配合map组件的show-location使用，如果跟小程序的埋点方法同时使用的时候IOS上会有大概率失效。
• getScale 获取当前地图的缩放级别
• getRegion 获取当前地图的视野范围
• translateMarker 平移marker，带动画

WEBVIEW

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用，组件本身只有两个属性可配置：

<web-view/>网页中可使用JSSDK 1.3.2及以上版本提供的接口调用微信的api，支持主流JS SDK方法，并且同时也可以调用部分小程序api，具体可调用接口如下：

1. 通过发送约定好的数据，并且调用后退方法，小程序监听到特定的数据做相应的操作。
2. 发送约定好的数据，小程序调用分享，获取数据并执行相应操作，这个方案可以实现我们在微信里常用的H5自定义分享功能
3. H5跳转到某个小程序页面，并携带相应参数，此场景多用于H5调用支付，小程序可以和H5约定好协议，包装支付组件

调试工具

为了帮助开发者简单和高效地开发和调试微信小程序，微信官方在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。大体界面长这样：

• 需要微信授权开发者权限才能真机扫码调试
• 如果线下域名没法授权，需要在调试工具设置里面勾选不校验安全域名及业务域名等
• 同一个二维码同时只能一人使用

• 需要微信授权才能扫码预览
• 如果是线下环境需要打开在小程序右上角打开调试模式，不然webview不能打开非业务域名
• 同一个可多人预览，不过有25分钟有效期，过期需要重新生成

其他

1. 小程序更新并不是全量更新，98%用户会实时更新，但是有少量用户会延迟几天更新，如果产品有强更需求，可以用getUpdateManager下载更新，并提示用户更新。
2. 上线之前记得Double Check业务域名及安全域名的配置知否遗漏，包括H5里面有应用iframe的也需要添加安全域名。
3. 小程序数据助手很好用，分析数据非常方便，虽然有些小BUG。
4. 整体来说微信小程序还是不错的，期待能变得更好。