小程序系列——进

这是小程序进行曲的第二篇，主要会集中在 api 的讨论与功能实现上面。可能会分多个篇幅来进行分享，每个篇幅选择几个功能主题来分析，每个功能主题又会发散出多个 api 的应用与相关注意事项。这个曲目看完，对于基础的小程序需求，我们应该都能 hold 一下了。OK，Battle Symphony ~ ~ ~

转发/分享

在小程序中的转发或者分享（下文统一使用转发），我们根据转发内容的不同可以分为三种：

页面转发
文件转发
小程序转发

页面转发应该是小程序中最常用的转发，我们在开发小程序的时候，往往会有将一个引导页面分享给好友或者微信群的需求。那么如何实现页面转发呢？入口存在两个地方，一个是页面右上角的转发操作，另一个是利用微信开放能力，定义 button 组件的 open-type 属性为 ‘share’，这样也可以通过这个 button 调起转发。但这两个地方转发的实现，都依赖于同一个 Page 监听函数—— onShareAppMessage(options) ，只有定义了这个事件处理函数，页面右上角的菜单才会显示 “转发” 的按钮，同时，只有定义了这个事件处理函数，点击转发 button 才能才能调起转发，否则点击后没有效果，实际上，用户点击之后触发的还是 Page.onShareAppMessage() 事件。

文件转发在小程序内有很大的限制，目前可以转发的文件只有图片。图片转发其实也是利用微信本身的功能。在查看图片详情的时候，可以长按图片将其分享给好友或者是群。微信小程序现在支持打开的文件类型除了各种图片外，就是文档类型，包括（doc、xls、ppt、pdf、docx、xlsx、pptx）。我们无法将文档类型的文件直接在小程序内分享给好友或者用户，所有我们可以曲线救国，制作一个分享页面，将这个页面分享给其它用户，其它用户通过这个页面进入小程序，在小程序内部对该文件进行浏览等操作。

小程序转发是小程序推广的重要手段。我们通过页面转发，其实就是小程序转发的一个过程。但是，我们现在还存在着将小程序分享到朋友圈和小程序本身的一个分享的限制。如果绕过这个障碍，我们可以利用二维码的功能。通过二维码接口，生成小程序或者小程序页面的二维码，将二维码保存在本地，通过发朋友圈的方式，实现小程序的朋友圈转发等等。

Note Tips：

在小程序内部打开文档文件要注意有 10m 大小的限制，这个限制貌似源于小程序本地文件存储 10m 的限制；
小程序二维码的生成会有 A、B、C 三个接口，不同接口对于同一个小程序二维码生成的个数是有限制的，具体可查看官方文档。
分享出去的小程序页面被打开是可以获取打开信息，现在支持的是群的唯一识别 openGId 的获取，另外，通过组件 open-data 的开放能力，可以根据 groupId 获取群名称，但要注意用户在此群内才能拉取到群名称。要获取 openGId 需要通过 wx.showShareMenu() 设置 withShareTicket 为 true。这样，当用户将小程序转发到任一群聊之后，可以获取到此次的 shareTicket，此转发卡片在群聊中被其它用户打开时，可以在 App.onLaunch() 或 App.onShow() 中获取另一个 shareTicket。注意啦，这两步获取到的 shareTicket 均可通过 wx.getShareInfo() 接口获取相同的转发信息。

* 转发示例代码 *

 
   // 用户分享

 
    onShareAppMessage: 
   function (res) {

3. wx.showShareMenu({

 
   withShareTicket: 
   true,

5. });

 
   return {

 
   title: 
   '转发标题',

 
   imageUrl: 
   this.data.images[ 
   0].picurl,

 
   success: 
   res => {

10. wx.getShareInfo({

 
   shareTicket: res.shareTickets[ 
   0],

 
   success: 
   res => {

 
   var data = {

 
   encryptedData: res.encryptedData,

 
   iv: res.iv,

 
   session_key: app.globalData.session_key

17. }

18. wx.request({

 
   url: 
   `http://${APIHOST}/data`,

 
   data: data,

 
   success: 
   res => {

 
   this.setData({

 
   groupId: res.data.data.openGId

24. });

25. }

26. })

27. }

28. })

29. }

30. }

31. }

消息通知

消息通知是一个非常重要的功能。它既是用户获得服务消息的必要渠道，同时也是提高产品曝光，便于用户留存与提高用户粘性的高效途径。
小程序中的消息通知系统是基于微信通知渠道的可高效触达用户的模板消息能力。模板消息的推送位置在服务通知中，如图：

当然，在小程序中模板消息下发是有条件的。有两种情况：

扫描二维码关注公众号，回复： 1589706 查看本文章

用户在小程序内完成支付行为，可允许开发者向用户在 7 天内推送有限条模板消息（1 次支付可下发 3 条）；
用户在小程序内发生过提交表单行为，且该表单声明要发送模板消息（即该 <form/>组件的 report-submit 属性为 true），开发者需要向用户提供服务时，允许开发者向用户在 7 天内推送有限条模板消息（1 次提交表单可下发 1 条）。

具体的流程我们可以看一下这个时序图，解释时，主要以提交表单这种情况为参考，因为这种情况大有用处，是我们实现群发用户消息的基础，看图：

用户在小程序内进了表单（report-submit: true）提交行为，就会产生一个有用的数据——formId。我们要将这个 formId 提交给服务器保存，因为 formId 是我们发送模板消息的凭证之一。服务器在存储 formId 的时候要和此时的登录用户的 openId 进行对应的关联，这样才能将模板消息推送给正确的用户。
所以，在小程序内主要就是完成对用户 formId 的采集以及提交，服务器接收到后，结合当前用户信息存储 formId。要推送模板消息，还需要向微信服务器进行请求，以获取 access_token，然后用 access_token 、 formId 和 openId 等消息就可以向微信服务器申请推送模板消息了。

在简单的场景中，例如：用户提交表单了，我们需要向对用户此次的提交做出反馈，现在的这种操作逻辑就可以胜任了。但是，我们所遇到的大多数开发场景是需要对目标用户进行群发通知的，那么这种简单的一对一的逻辑就不能够支持我们的需求了。所以，有了下图这样的模板消息推送机制：

这个系统可以类比埋点去理解。用户在小程序的视图层进行操作时，我们要获取用户的交互点击，通过委托等方式，获取一个或多个有效的 formId，然后将这个消息进行收集和上传。剩下的工作就要靠服务端的存储与查询处理了。

根据不同的业务场景，我们服务端的解决方案不同。但是，消息推送往往会是一个高并发和高频 IO （对 formId 的查询）的操作，所以，我们的存储与查询都要有一定的缓存机制，例如：利用 Redis 实现 formId 的键值对存储。消息推送也要根据具体情况，看是否做成异步执行队列的模式，去高效的完成消息推送。

理解到这里，基本的消息推送任务都应该能 Hold 住了。

模板

小程序为我们提供了模板，我们可以在模板中自定义代码片段，一般都是一段要重复展示或多处需要调用的展示内容。对于模板的介绍我们会结合实例来讲解。
模板可以按组件的思想就行划分，将一个模板的 .wxml 和 .wxss 文件放在一起，例如：

这是在 common 文件夹下创建了一个 msgItem 模板。用这个模板，我们实现下图这样的功能：

每个模板根据类型的不同，展示颜色不同，消息点击后展示的 toast 也不一样。上代码：
msgItem.wxml：

 
   <!--

2.index: int

3.msg: string

4.time: string

5.level: string

6.-->

 
   <template name="msgItem">

 
    
   <view data-level=' 
   {{level}} 
   ' class='msgWrap  
   {{level == "error" ? "error" : level == "warn" ? "warn" : ""}} 
   ' bindtap='outMsg'>  
  

 
    
   <text class='msgContent'> 
   {{index}} 
   :  
   {{msg}} 
   </text>  
  

 
   <text class='msgTime'>Time: 
   {{time}} 
   </text>

 
   </view>

 
   </template>

msgItem.wxss：

 
   .msgWrap {

 
   border: 
   4rpx solid greenyellow;

 
   padding: 
   8rpx;

 
   border-radius: 
   8rpx;

 
   margin: 
   10rpx;

6.}

7.

 
   .error {

 
   border-color: red;

 
   color: darkred;

11.}

12.

 
   .warn {

 
   border-color: yellow;

 
   color: 
   #FFD700;

16.}

在 page 中使用模板：

 
   <!--pages/pan/pan.wxml-->

 
   <import src="../../common/msgItem.wxml" />

3.

 
   <view>

 
    
   <template wx:for=" 
   {{msgs}} 
   " wx:key=" 
   {{*this}} 
   " is="msgItem" data=" 
   {{...item}} 
   " />  
  

 
   </view>

需要注意的是，模板中使用到的事件要在 page 中的 .js 文件中定义，模板使用的样式，也需要在 page 中的 .wxss 文件中引用。如下：

pan.wxss

 
   /* pages/pan/pan.wxss */

 
   @ 
   import 
   '../../common/msgItem.wxss'; 
  

pan.js

 
   // pages/pan/pan.js

2.Page({

3.

/**

5. * 页面的初始数据

6. */

7. data: {

 
   msgs: [

9. {

 
   index: 
   0,

 
   msg: 
   'this is the first template',

 
   time: 
   '2016-09-15',

 
   level: 
   'info'

14. },

15. {

 
   index: 
   1,

 
   msg: 
   'this is the second template',

 
   time: 
   '2016-09-16',

 
   level: 
   'error'

20. },

21. {

 
   index: 
   2,

 
   msg: 
   'this is the third template',

 
   time: 
   '2016-09-17',

 
   level: 
   'warn'

26. }

27. ]

28. },

29.

 
   outMsg: 
   function (e) {

 
   console.log(e);

 
   let msgLevel = e.currentTarget.dataset.level;

33. wx.showToast({

 
   title: msgLevel,

 
   image: 
   `../../resource/images/${msgLevel}.png`,

 
   duration: 
   2000

37. })

38. }

39.})

对于模板的引用，数据可以通过解构的方式传入。模板规范好对应的参数字段就好了。具体的模板应用到这里结束，开发时可以根据需要再扩展封装。

小程序 Tips

1. 模块

小程序目前不支持直接引入 node_modules，开发者需要使用到 node_modules 时建议拷贝相关代码到小程序的目录中。

结尾

这一篇主要讲解了小程序开发工程中的一些常用的重要功能模块，每个模块设计的知识点有点多，需要多多查资料，接下来，可能会记录一个具体小程序的开发过程。