每日收获5

微信小程序封装

组件内的wxml

 

1 <!--components/formid_btn/formid_btn.wxml-->
2 <form catchsubmit='_formSubmit' report-submit='true' catchtap='_hackBubble'>
3   <button class='formid-btn__btn' formType='submit'>
4   getFormId
5   </button>
6 </form>

 

组件内的wxss

 1 /* components/formid_btn/formid_btn.wxss */
 2 .formid-btn__btn{
 3   opacity: 0;
 4   position: absolute;
 5   top: 0;
 6   left: 0;
 7   width: 100%;
 8   height: 100%;
 9   z-index: 50;
10 }

组件的js

 1 // components/formid_btn/formid_btn.js
 2 Component({
 3   /**
 4    * 组件的属性列表
 5    */
 6   properties: {
 7     tempData: {
 8       type: Object,
 9       value: {}
10     }
11   },
12   /**
13    * 组件的初始数据
14    */
15   data: {},
16   /**
17    * 组件的方法列表
18    */
19   methods: {
20     _formSubmit: function (e){
21       // console.warn(e)
22       // console.log(this.properties.tempData);
23       e.currentTarget.dataset = this.properties.tempData
24       this.triggerEvent('next', e)
25     }
26   },
27   _hackBubble: function (e) {
28 
29   },
30 })

app.json
直接放在app.json里面 可以在所有的页面中都使用该组件，而不用单独引入

1   "usingComponents": {
2     "fid-btn": "/components/formid_btn/formid_btn"
3   },

最后是使用

1 <view class='btn-inner' wx:if="{{ drawType == 1 }}">
2   <view>下单购物</view>
3   <view>即可参与</view>
4   <fid-btn catch:next="orderTips"></fid-btn>
5 </view>

需求场景：
当用户点击了抽奖/免单/砍价/拼团之类的按钮

 

标签：每日,formid,components,收获,组件,btn,properties,tempData
来源： https://www.cnblogs.com/moneyup/p/13472793.html