本套組件結合了微信的視覺規范，為用戶提供更加統一的使用感受。
包含： 底部彈出視圖(Dialog)、支付密碼輸入框(PassWordInput)、商品數量加減(Quantity)、提示消息(Toast)、頂部提示(Toptip)、角標(Badge)、星級評分(Rater) 、圖表(Charts)、富文本解析(RichText)共計 9 類組件或元素。
https://github.com/ccmarios/wx_UIModule ，喜歡的朋友記得Star哦~
參考資料：有贊、https://github.com/xiaolin3303/wx-charts、https://github.com/icindy/wxParse

項目運行步驟：

• git clone https://github.com/ccmarios/wx_UIModule.git
• 微信開發者工具->編譯

注：本項目基礎庫版本為1.5.4，如運行失敗，請嘗試升級更新【微信開發者工具】。

wx_UIModule.png

底部彈出視圖

Dialog.gif

• 實現思路

在當前視圖頂部利用z-index添加一層半透明的遮罩層，充當背景。在該背景上添加view，利用transition完成由底部向上滑出的效果。

• 如何復用到你的項目

所有組件的復用模板都存放在'module'文件夾中，底部彈出視圖的模板名為'Dialog.wxml'。模塊部分代碼如下所示，在需要加入該組件的wxml文件中引入Dialog.wxml，比如：<import src="你的路徑/module/Dialog.wxml" />。代碼中寫入<template is="diaView" data="{{showDialog:showDialog}}" />，記得在.js文件中添加showDialog數據源以及.wxss添加模板所需樣式。

 <template name="diaView">
  <view class="dialog {{ showDialog ? 'dialog_show' : '' }}">
    <view class="dialog_mask" bindtap="onClickdiaView" />
    <view class="dialog_container">

      <!--  //此區域自定義視圖  -->
      <view class="flex_Center" style="height:500rpx;background:white;"> 
        <view style="color:#333;font-size:30rpx;">自定義視圖</view>
      </view>

    </view>
  </view>
</template>

支付密碼輸入框

PassWordInput.gif

• 實現思路

六個密碼輸入框使用view+border展示，在view上層利用z-index添加一個透明色的input控件用于調起鍵盤輸入，但是input在輸入時會有光標閃爍。我的處理辦法是，將控件left設置為-100rpx，這樣光標出現在屏幕外，視覺上達到了效果。這不是最優的處理方式，有想法的朋友可以交流~

• 如何復用到你的項目

所有組件的復用模板都存放在'module'文件夾中，底部彈出視圖的模板名為'pwdInput.wxml'。引用方法同上，就不再贅述了，記得添加wxss

<template name="pwdInput">
  <view class="pwdInputStyle">
      <input class="pas_input" type="number" maxlength="6" focus="true" bindinput="onChangeInput" />
      <block wx:for="{{[0,1,2,3,4,5]}}">
        <view class="itemStyle flex_Center">
          <view wx:if="{{passWordArr[item] == true}}" class="PwdStyle"></view>
        </view>
      </block>
    </view>
</template>

商品數量加減

Quantity.gif

• 實現思路

首先要確定業務需求，右側減號左側加號中間是可以輸入的框。需要注意的是，當商品數量減至1時，左側減號不可點擊。當商品數量增至最大值時，右側加號不可點擊。中間輸入需要留意的是，可能會輸入0或者大于商品數量上限時的處理。我的處理方式是：當輸入0時，數量默認變為1；當輸入數量大于上限時，變為最大值。詳細見代碼

• 如何復用到你的項目

所有組件的復用模板都存放在'module'文件夾中，底部彈出視圖的模板名為'numberPlusMinus.wxml'。注意加減號點擊方法和input的處理。

<template name="quantity">
  <view class="quantityViewStyle">
    <view class="minusStyle" style="color:{{num==1?'#DADADA':white}}" bindtap="onTapMinus">-</view>
    <view class="inputViewStyle">
      <input class="inputView1Style" style="height:54rpx;" value="{{num}}" type="number" maxlength="2" bindinput="onInputNum" bindblur="lossFocus" />
    </view>
    <view class="plusStyle" style="color:{{num==totalNum?'#DADADA':white}}" bindtap="onTapPlus">+</view>
  </view>
</template>

提示消息

Toast.gif

• 實現思路

這個就是普通的消息提示，沒多少可說的。O(∩_∩)O哈哈~

• 如何復用到你的項目

所有組件的復用模板都存放在'module'文件夾中，底部彈出視圖的模板名為'messageView.wxml'。在.js中有個isShowToast的方法，傳入文字即可。

<template name="UI-toast">
  <view class="UI-toast" wx:if="{{ toastShow }}">{{title}}</view>
</template>

頂部提示

Toptip.gif

• 實現思路

z-index + transition搞定~

• 如何復用到你的項目

所有組件的復用模板都存放在'module'文件夾中，底部彈出視圖的模板名為'topMessage.wxml'。

<template name="toptips">
  <view class="toptips {{ isTopTips ? 'toptips--show' : '' }}">{{ TopTipscontent }}</view>
</template>

角標

Badge.png

• 實現思路

利用css樣式即可達到效果，詳見代碼

• 如何復用到你的項目

所有組件的復用模板都存放在'module'文件夾中，底部彈出視圖的模板名為'badge.wxml'。

<template name="badge">
  <view class="demo__item">
    <view class="demo__icon badge">
        <view wx:if="{{number > 0}}" class="badge__count">{{number > 99 ? '99+' : number}}</view>
    </view>
</view>
</template>

星級評分

Rater.gif

• 實現思路

五角星和心形圖案在搜狗輸入法找的??，大小改變設置font-size，顏色改變設置color。我用了一個數組存評分數據，點擊了第幾個圖案，數組存幾個true，根據true/false展示不同的顏色。

• 如何復用到你的項目

好吧，這個沒有模板！因為用了不同的數據源，懶得抽方法了?? 需要的同學，自己寫一下吧~??

結束語

如果你有更好的處理方案，歡迎交流~
希望有更多的同學能加入進來，完善這套組件~
最后，各位大佬覺得不錯的，請Star哦~