一、获取formId

相信使用过小程序的同学，多少都收到过小程序的通过消息，如下：

这类通知消息，是和好友消息一样展示在微信的聊天列表中，所以，点击率还是比较高的。想实现这种小程序的模板消息，就必须要获取用户的formid才可以（如何发消息，请仔细查阅小程序官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html）

我们来说一下如何获取formId：

a、必须通过form组件提交才能获取到formId;

b、给form组件设置report-submit="true"属性;

c、给form组件添加bindsubmit事件绑定，携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''};

d、必须用户手动触发提交表单，不能JS模拟提交，所以，页面上必须要有提交按钮;

看一下示例代码：

<form report-submit='true' bindsubmit='userSubmit'>
  <button class='button' bindtap='copy'
          form-type='submit'>复制</button>
</form>

以上示例就可以在userSubmit里获取到formId了：

userSubmit: function (e) {
  console.log(e.detail.formId);
},

需要注意一点，开发工具里面是没办法查看到真实的formId的，会是这样一句提示"the formId is a mock one"，提交给服务端就可以拿到了~

二、客服button样式

其实button样式没什么好说的，最近有几个同学在群内讨论，说是客服按钮太小，想改一下样式，没办法实现。

这里我提供个思路：先按设计稿实现界面，联系客服如果样式和官方给的不一样，那就用position: absolute，定位一个button到你想要的位置，透明度设置为0即可，同时给button设置属性open-type="contact"就ok了~

注：

1、这里要注意button的open-type属性是在基础库1.1.0开始支持的，自己要做一下兼容处理~

2、button也可以改成其他样式，有些同学为了获取formId，就把页面所有可点击区域都用button按钮来实现了~

三、区分转发的是群聊还是好友

这个其实就是场景值的判断，先看一张图：

上图可以看出，从好友聊天窗口和群聊窗口点击小程序卡片后，场景值是不一样的，分别是1007和1008，所以，我们可以在app的onLuanch或者onShow方法中去获取到scene值，这样就能知道用户是通过哪种方式进入小程序的~

四、小程序组件化开发

小程序官方提供的组件化文案，这里不细说，大家直接去github查看吧： https://github.com/Tencent/wepy

《END》