知曉程式設計師，專注微信小程式開發的程式設計師！

一、獲取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