小程序UITool.wxs,component文件

UITool.wxs，.wxs文件，是可以在.wxml文件的标签节点中直接调用执行的方法对象。.wxml标签只能显示数据，而不能进行运算，但是UITool.wxs可执行js方法运算。.wxml标签内可插入UITool.wxs中的方法进行运算。

.wxml标签节点运算工具UITool.wxs

UITool.wxs是单一文件，不需要其它文件协同工作。用途举例：要在<view></view>节点上显示一个状态，但是只能获取到状态码，-1，0，1,分别对应'认证不通过','认证中'和'认证通过'。需要分别显示对应的文案。但是在<view></view>内不允许进行计算，就只能直接显示-1,0,1；用户是看不懂这个-1是什么意思的。所以需要转化，这时就必须借助UITool.wxs进行计算结果。

var uitool = {
  getCarIdentifyStateDesc: function (state) {
     if (state == undefined || state == 1) {
       return ''
     } else if (state == -1) {
       return '审核不通过'
     }else {
       return '认证中...'
     }
   },
}

module.exports = {
  getCarIdentifyStateDesc: uitool.getCarIdentifyStateDesc,
}

MyUI.wxml

<wxs module='uitool' src='../../../utils/UITool.wxs' />
<view class="item flex_horizontal_center spaceBetween" wx:for='{{cars}}'>
  <view>{{item.vehicleNo}}</view>
  <view>{{uitool.getCarIdentifyStateDesc(item.auditStatus)}}</view>
</view>

组件component

component，和一个page一样，一个组件包含4个文件，.js,.json,.wxml,.wxss。
应用场景：多个页面需要相同的支付弹窗，只需要写一次就可以直接用。

payboard.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    showModal: false,
    selectedPayType: 'wechatPay',   //or 'wallet'
    title: '',    //show extra info.eg: 'price: $22.5'
    balanceDesc: ''   // （xxx元）
  },

  /**
   * 组件的方法列表
   */
  methods: {
    show(balance, title) {
      this.setData({
        showModal: true,
      })
    },

    hide() {
      this.setData({
        showModal: false
      })
    },
    //确定按钮（预付费）
    _payBtnTap: function (e) {
      if (true) {
        this.hide()
      }

      let thePayType = this.data.selectedPayType;

      var myEventDetail = { payType: thePayType} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    },

    _radioChage: function (e) {
      this.setData({ selectedPayType: e.detail.value });
    },

    _blankAreaTap: function (e) {
      if (true) {
        this.hide()
      }
    },
  },

})

payboard.json

{
  "component": true,
  "usingComponents": {}  //如果引用到其他组件，则添加
}

payboard.wxml

<view class='componentMask' wx:if='{{showModal}}'>

  <view class='payTypeBoard'>
...
    <view class='confirmBtn' style='margin-top:24pt;' bindtap='_payBtnTap'>确定</view>
  </view>
  <view class='blankArea' bindtap='_blankAreaTap'></view>
</view>

payboard.wxss

.componentMask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9000;

    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
...

应用组件

home.wxml，注意bindmyevent与组件内triggerEvent方法第1个参数的关系

<view class='contentView'><view>
<payboard id='pbid' bindmyevent='payConfrim' />

home.json

{
  "usingComponents": {
    "payboard": "/components/payboard/payboard",
  }
}

home.js 注意e.detail.payType与组件内triggerEvent方法第2个参数的关系

onReady: function () {
    this.payboard = this.selectComponent('#pbid')
  },
payConfrim: function(e) {
    console.log(e)
    let payType = e.detail.payType
  },