小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

不得不说，小程序的快捷开发能力及跨平台能力确实很出色，还有各种天然的流量入口，下面我们就来简单聊聊小程序。

页面结构

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

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

生命周期

App() 和 Page() 维护了应用和页面的各个生命周期以及数据，这里对几个比较重要的周期节点做解释：

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

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

生命周期我们了解了，有人会有疑问了，APP和Page是如何将数据传递到页面的呢？页面又是如何渲染的呢？下面我们会详细介绍。

数据绑定&渲染

数据绑定

数据绑定使用 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 页面

具体用法如下：

地图

地图在小程序里是一个比较重要的模块，任何基于地理位置的产品几乎都要用到地图，但是小程序里的地图比较古灵精怪，非常不听话，各种表现跟调试工具不一致，而且不同机型也存在机型兼容问题，下面我们就聊聊小程序的地图。

常用属性

地图组件MAP常用的属性有：

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

常用方法

wx.createMapContext(mapId, this)可以创建并返回 map 上下文 mapContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <map/> 组件。

mapContext 通过 mapId 跟一个 <map/> 组件绑定，通过它可以操作对应的 <map/> 组件。常用的方法有：

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

cover-view

小程序地图属于原生组件，除了cover-view和cover-image，其他元素是不能盖在地图之上的，cover-view还可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，不过比较坑的是cover-view只支持嵌套cover-view、cover-image，其他标签不能在其子集。

cover-view不支持单边圆角，只支持全圆角。

WEBVIEW

小程序最开始是不支持webview的，后来可能是良心发现，提供了这个入口，下面我们就来看看小程序的webview怎么玩。

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

JS SDK调用

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

Bridge

写过hybird的同学们对js bridge应该不陌生，是我们常用的和客户端交互的一种方式，那么小程序里面能不能实现bridge呢？怎么实现呢？下面我将为大家解答。

首先我们看看我们手头能用的API，JS向小程序发送消息只能通过postMessage，最坑爹的是小程序能接收到消息的时机只有三个场景（小程序后退、组件销毁、分享）。

JS CALL MPAPP

目前小程序调用客户端方法比较主流的有以下几种：

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

MPAPP CALL JS

一般小程序向js发送数据目前只能通过链接带参数传递过去。

File

小程序webview在IOS10下面是不支持file选图的，这是已知BUG，建议IOS图片选择用chooseImage api。

调试工具

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

假如我们开发者自建项目工程并打包文件，只需要将dist目录输出到调试工具即可。下面说说我们常用的几个功能：

远程调试

开发者在开发的时候大多时候可以在工具上实时预览项目运行并调试，但是假如我们需要真机调试的时候这个功能就非常有用了，但是使用这个功能需要注意一下几点：

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

预览

这个功能在QA测试的时候，但是使用这个功能需要注意一下几点：

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

编译

小程序提供基本的编译能力，但是如果要编译高级语法，需要自己添加loader，建议自建打包构建，这样比较灵活。

上传

这是小程序上线的必经之路，上传我们可以指定版本号及版本备注，上传完毕之后则为体验版，除了需要授权体验外，其他和线上版一致，并共用一套本地缓存。

其他

小程序还有一些其他的注意点：

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

如有前端相关技术交流或者投稿，欢迎私信我们，让我们一起成长~