本套組件結合了微信的視覺規范，為用戶提供更加統一的使用感受。
包含： 底部彈出視圖(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，如運行失敗，請嘗試升級更新【微信開發者工具】。
底部彈出視圖
-
實現思路
在當前視圖頂部利用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>
支付密碼輸入框
-
實現思路
六個密碼輸入框使用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>
商品數量加減
-
實現思路
首先要確定業務需求，右側減號左側加號中間是可以輸入的框。需要注意的是，當商品數量減至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>
提示消息
-
實現思路
這個就是普通的消息提示，沒多少可說的。O(∩_∩)O哈哈~
-
如何復用到你的項目
所有組件的復用模板都存放在'module'文件夾中，底部彈出視圖的模板名為'messageView.wxml'。在.js中有個isShowToast的方法，傳入文字即可。
<template name="UI-toast">
<view class="UI-toast" wx:if="{{ toastShow }}">{{title}}</view>
</template>
頂部提示
-
實現思路
z-index + transition搞定~
-
如何復用到你的項目
所有組件的復用模板都存放在'module'文件夾中，底部彈出視圖的模板名為'topMessage.wxml'。
<template name="toptips">
<view class="toptips {{ isTopTips ? 'toptips--show' : '' }}">{{ TopTipscontent }}</view>
</template>
角標
-
實現思路
利用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>
星級評分
-
實現思路
五角星和心形圖案在搜狗輸入法找的??，大小改變設置font-size，顏色改變設置color。我用了一個數組存評分數據，點擊了第幾個圖案，數組存幾個true，根據true/false展示不同的顏色。
-
如何復用到你的項目
好吧，這個沒有模板！因為用了不同的數據源，懶得抽方法了?? 需要的同學，自己寫一下吧~??
結束語
如果你有更好的處理方案，歡迎交流~
希望有更多的同學能加入進來，完善這套組件~
最后，各位大佬覺得不錯的，請Star哦~
