简单收集微信小程序formId,解决发送模板消息不够用的问题
微信小程序发送模板消息条件:
1、支付
当用户在小程序内完成过支付行为,可允许开发者向用户在7天内推送有限条数的模板消息(1次支付可下发3条,多次支付下发条数独立,互相不影响)
2、提交表单
当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的,开发者需要向用户提供服务时,可允许开发者向用户在7天内推送有限条数的模板消息(1次提交表单可下发1条,多次提交下发条数独立,相互不影响)
根据第二条,咱们可以把多个按钮设置成表单的形式,然后把button样式改透明。这样用户点击一下,就会生成一个formid,客户端收集起来,发送给自己的服务器就行了。
下面是简单代码块:
wxml:
- <view class='root_layout'>
- <view class='account_number'>
- <text>账号:</text>
- <form bindsubmit="saveFormId" report-submit="{{true}}" class='form_class'>
- <button formType="submit" class='form_button'>
- <input bindinput='inputAccount' placeholder-style="color:#bbbbbb" placeholder='请输入账号'></input>
- </button>
- </form>
- </view>
- <view class='account_number'>
- <text>密码:</text>
- <form bindsubmit="saveFormId" report-submit="{{true}}" class='form_class'>
- <button formType="submit" class='form_button'>
- <input bindinput='inputPsw' password='{{true}}' placeholder-style="color:#bbbbbb" placeholder='请输入密码'></input>
- </button>
- </form>
- </view>
- <form bindsubmit="login" report-submit="{{true}}">
- <button formType="submit">登录</button>
- </form>
- </view>
js:
- saveFormId: function (v) {
- if (v.detail.formId != 'the formId is a mock one') {
- this.data.formIdArray.push(v.detail.formId);
- }
- },
- inputAccount: function (v) {
- this.data.account = v.detail.value
- },
- inputPsw: function (v) {
- this.data.password = v.detail.value
- },
- login:function(v){
- this.saveFormId(v);
- console.log("formIds:" + this.data.formIdArray)
- console.log("账号:" + this.data.account)
- console.log("密码:" + this.data.password)
- },
wcss:
- .form_class {
- width: 100%;
- }
- .form_button {
- background-color: transparent;
- padding: 0;
- margin: 0;
- text-align: left;
- }
- .form_button::after {
- border: 0px;
- }
像这个登录界面,点击登录按钮,共生成了3个formID;其实也什么,自己随手记一下,希望能帮助有需要的人,核心就是把button设置透明就行了。