微信小程序开发03-这是一个组件
編寫組件
基本結構
接上文：微信小程序開發02-小程序基本介紹
我們今天先來實現這個彈出層：
之前這個組件是一個容器類組件，彈出層可設置載入的html結構，然后再設置各種事件即可，這種組件有一個特點：
① 只提供Header部分以及容器部分
② 容器部分的HTML結構由業務層提供
③ 容器部分對應樣式由業務層提供
我們如果要在小程序中實現這類組件，意味著我們需要往小程序中動態插入WXML結構，我們這里先做個demo，試試往動態插入WXML是不是可行
1 this.setData({'wxml': ` 2 <my-component> 3 <view>動態插入的節點</view> 4 </my-component> 5 `});小程序對應設置的數據進行了轉義，所以并不能動態解析，如果站在性能角度思考，不進行動態解析也不是錯誤的；另一方面，一旦小程序能動態解析wxml，那么可能會涌出各種花式用法，控制力會減低，那么我們這里如何解決這個問題呢？
我想的是，直接將業務級wxml結構放到頁面里面，隱藏起來，需要使用彈出層的時候，直接將之裝載進去，我們來看看是否可行，我們將我們需要展示的結構放到一個模板當中：
1 <template name="searchbox"> 2 <my-component> 3 <view>動態組件部分</view> 4 </my-component> 5 </template>然后，我們在我們主界面中載入模板：
1 <import src="mod.searchbox.wxml"/> 2 <view> 3 <my-component> 4 <!-- 這部分內容將被放置在組件 <slot> 的位置上 --> 5 <view>這里是插入到組件slot中的內容</view> 6 </my-component> 7 </view> 8 <view> 9 <template is="searchbox" /> 10 </view>主體結構放到頁面中，我們傳入數據模型或者控制顯示即可，看起來是可行的，于是我們先實現我們基本的樣式，因為業務模塊的樣子應該由業務提供，所以對應樣式寫到index.wxss里面：
1 .btn-primary { 2 background-color: #00b358; 3 color: #fff; 4 border: 0 none; 5 } 6 .btn, .btn-primary, .btn-secondary, .btn-sub { 7 line-height: 88rpx; 8 height: 88rpx; 9 padding: 0 20rpx; 10 display: inline-block; 11 vertical-align: middle; 12 text-align: center; 13 border-radius: 8rpx; 14 cursor: pointer; 15 font-size: 32rpx; 16 -webkit-box-sizing: border-box; 17 box-sizing: border-box; 18 } 19 .full-width { 20 width: 100%; 21 -webkit-box-sizing: border-box; 22 box-sizing: border-box; 23 } 24 25 26 .c-row { 27 width: auto; 28 display: -webkit-box; 29 -webkit-box-orient: horizontal; 30 -webkit-box-direction: normal; 31 -webkit-box-pack: justify; 32 -webkit-box-align: stretch; 33 -webkit-box-lines: single; 34 display: -webkit-flex; 35 -webkit-flex-direction: row; 36 -webkit-justify-content: space-between; 37 -webkit-align-items: strecth; 38 -webkit-align-content: flex-start; 39 -webkit-flex-wrap: nowrap; 40 padding: 20rpx 40rpx; 41 } 42 43 .c-span3 { 44 width: 25%; 45 -webkit-box-flex: 3; 46 -webkit-flex: 3 3 auto; 47 } 48 49 .c-span9 { 50 width: 75%; 51 -webkit-box-flex: 9; 52 -webkit-flex: 9 9 auto; 53 } 54 55 .search-line { 56 position: relative; 57 height: 96rpx; 58 line-height: 96rpx; 59 font-size: 30rpx; 60 font-weight: 600; 61 border-bottom: 1rpx solid #e6e6e6; 62 } 63 64 .search-line::after { 65 content: ""; 66 display: inline-block; 67 vertical-align: middle; 68 width: 20rpx; 69 height: 20rpx; 70 border-top: 4rpx solid #00b358; 71 border-right: 4rpx solid #00b358; 72 position: absolute; 73 right: 60rpx; 74 top: 50%; 75 margin-top: -4rpx; 76 -webkit-transform: rotate(45deg) translateY(-50%); 77 transform: rotate(45deg) translateY(-50%); 78 -webkit-box-sizing: border-box; 79 box-sizing: border-box; 80 } 81 82 .search-line-txt { 83 text-align: right; 84 padding-right: 60rpx; 85 overflow: hidden; 86 text-overflow: ellipsis; 87 white-space: nowrap; 88 } View Code 1 <template name="searchbox"> 2 <view class="c-row search-line" data-flag="start"> 3 <view class="c-span3"> 4 出發</view> 5 <view class="c-span9 js-start search-line-txt"> 6 請選擇出發地</view> 7 </view> 8 <view class="c-row search-line" data-flag="arrive"> 9 <view class="c-span3"> 10 到達</view> 11 <view class="c-span9 js-arrive search-line-txt"> 12 請選擇到達地</view> 13 </view> 14 <view class="c-row " data-flag="arrive"> 15 <span class="btn-primary full-width js_search_list">查詢</span> 16 </view> 17 </template>如此一來，我們基本的彈出層樣式就七七八八了，這里可以看出一些特點：小程序與平時我們的樣式差距不大，稍微改點就能用，甚至能直接通用；另一方面，我們也需要思考一個問題：公共部分的CSS該怎么處理？其實我這里需要解決的不只是公共的樣式部分，還需要解決公共的組件部分。
我這里想的是將所有公共部分的CSS放到一個全局的文件global.wxss中，然后在每個業務級頁面import即可，所以我們這里需要形成一個公共的WXSS庫，這個與純web映射起來即可，我們這里便不深入。
公共組件庫
要提高開發效率的第一個前提就是要有足夠多的UI組件，小程序本身提供了一些定制化的組件，我們仍然會用到的組件有：
① alert類彈出層
② loading類彈出層
③ 日歷組件
④ toast&message類提示彈出組件
⑤ 容器類組件
⑥ ......
之前的做法，是我們將html實體和組件實現直接放到一起，css放到全局global里面去，現在小程序并不支持動態展示wxml，所以動態插入的方式行不通了，我們需要將組件的wxml放到頁面里面做預加載，這里我想的是提供一個通用global.ui.wxml文件用以裝載所有的wxml實體，常用的組件我們默認全局引入，我們這里先挑點軟柿子來捏，我們先實現一個alert類彈出層組件。
我們將原來彈出層類會用到的CSS全部翻譯為WXSS，放入global.wxss中：
然后我們每個組件都會有一個固定的生命周期：創建->顯示->隱藏，這個生命周期是每個組件都具有的特性，所以我們這里應該引入繼承概念實現組件，但是小程序官方提供的Components并沒有提供繼承概念，而是提供了behaviors概念，用以將組件間的公共部分處理掉，所以我們這里也使用behaviors，因為不能操作dom，我們的組件抽象會變得相對簡單，不用記錄太多dom節點了，另外小程序的組件與我們之前的“組件”從定義到使用上有很大的不同，之前我們是以js作為控制器，現在是以標簽wxml作為控制器，根本沒有辦法在js中獲取實例，而小程序組件的生命周期并不包含顯示隱藏生命周期，所以他的組件和我們以為的組件有很大的不同
我思考了下為什么小程序中，js不能獲取組件的實例，這里得出的結論是：
小程序中所有的WXML必須在頁面中進行預加載邏輯，不能動態插入DOM的方式插入WXML，所以小程序沒有提供組件實例給我們控制所以在小程序中想完成組件庫，那么便只能把組件做標簽使用（而且是js不能獲取的標簽），而不是js組件，這樣會有效幫助我們理解
我們這里嘗試實現一個遮蓋層的標簽（這里開始不用組件這個詞，感覺很有歧義）:
代碼非常簡單：
<view class="cm-overlay"></view> .cm-overlay {background: rgba(0, 0, 0, 0.5);position: fixed;top: 0;right: 0;bottom: 0;left: 0; } 1 let LayerView = require('behavior-layer-view') 2 3 Component({ 4 behaviors: [LayerView], 5 6 data: { 7 myData: {} 8 }, 9 attached: function () { }, 10 methods: { 11 } 12 })可以看到，這個遮蓋層mask沒有什么意義，而且一般來說mask也不會單獨存在，一般是一個組件（比如彈出層的loading）會包含一個遮蓋層，所以我們這里要改造下Mask的結構，讓他可以裝載組件，我們從js組件邏輯來說是mask應該是loading的一個實例，但是我們站在標簽角度來說，他們兩個應該是獨立的：
1 <view class="cm-overlay"> 2 <slot></slot> 3 </view>我們這里實現一個loading的組件（PS：CSS3動畫稍微要做點兼容調試）：
1 .spinner { 2 width: 140rpx; 3 height: 140rpx; 4 position: fixed; 5 align-items: center; 6 display: flex; 7 top: 50%; 8 left: 50%; 9 margin-left: -70rpx; 10 margin-top: -70rpx; 11 } 12 13 .container1 > view, .container2 > view, .container3 > view { 14 width: 24rpx; 15 height: 24rpx; 16 background-color: #00b358; 17 border-radius: 100%; 18 position: absolute; 19 -webkit-animation: bouncedelay 1.2s infinite ease-in-out; 20 animation: bouncedelay 1.2s infinite ease-in-out; 21 -webkit-animation-fill-mode: both; 22 animation-fill-mode: both; 23 } 24 25 .spinner .spinner-container { 26 position: absolute; 27 width: 66%; 28 height: 66%; 29 top: 10%; 30 left: 10%; 31 } 32 33 .container2 { 34 -webkit-transform: rotateZ(45deg); 35 transform: rotateZ(45deg); 36 } 37 38 .container3 { 39 -webkit-transform: rotateZ(90deg); 40 transform: rotateZ(90deg); 41 } 42 43 .circle1 { top: 0; left: 0; } 44 .circle2 { top: 0; right: 0; } 45 .circle3 { right: 0; bottom: 0; } 46 .circle4 { left: 0; bottom: 0; } 47 48 .container2 .circle1 { 49 -webkit-animation-delay: -1.1s; 50 animation-delay: -1.1s; 51 } 52 53 .container3 .circle1 { 54 -webkit-animation-delay: -1.0s; 55 animation-delay: -1.0s; 56 } 57 58 .container1 .circle2 { 59 -webkit-animation-delay: -0.9s; 60 animation-delay: -0.9s; 61 } 62 63 .container2 .circle2 { 64 -webkit-animation-delay: -0.8s; 65 animation-delay: -0.8s; 66 } 67 68 .container3 .circle2 { 69 -webkit-animation-delay: -0.7s; 70 animation-delay: -0.7s; 71 } 72 73 .container1 .circle3 { 74 -webkit-animation-delay: -0.6s; 75 animation-delay: -0.6s; 76 } 77 78 .container2 .circle3 { 79 -webkit-animation-delay: -0.5s; 80 animation-delay: -0.5s; 81 } 82 83 .container3 .circle3 { 84 -webkit-animation-delay: -0.4s; 85 animation-delay: -0.4s; 86 } 87 88 .container1 .circle4 { 89 -webkit-animation-delay: -0.3s; 90 animation-delay: -0.3s; 91 } 92 93 .container2 .circle4 { 94 -webkit-animation-delay: -0.2s; 95 animation-delay: -0.2s; 96 } 97 98 .container3 .circle4 { 99 -webkit-animation-delay: -0.1s; 100 animation-delay: -0.1s; 101 } 102 103 @-webkit-keyframes bouncedelay { 104 0%, 80%, 100% { -webkit-transform: scale(0.0) } 105 40% { -webkit-transform: scale(1.0) } 106 } 107 108 @keyframes bouncedelay { 109 0%, 80%, 100% { 110 transform: scale(0.0); 111 -webkit-transform: scale(0.0); 112 } 40% { 113 transform: scale(1.0); 114 -webkit-transform: scale(1.0); 115 } 116 } loading樣式 1 <ui-mask z-index="{{maskzIndex}}" ></ui-mask> 2 <view class="spinner" style="z-index: {{meIndex}}"> 3 <view class="spinner-container container1"> 4 <view class="circle1"></view> 5 <view class="circle2"></view> 6 <view class="circle3"></view> 7 <view class="circle4"></view> 8 </view> 9 <view class="spinner-container container2"> 10 <view class="circle1"></view> 11 <view class="circle2"></view> 12 <view class="circle3"></view> 13 <view class="circle4"></view> 14 </view> 15 <view class="spinner-container container3"> 16 <view class="circle1"></view> 17 <view class="circle2"></view> 18 <view class="circle3"></view> 19 <view class="circle4"></view> 20 </view> 21 </view> 1 const util = require('../utils/util.js'); 2 let LayerView = require('behavior-layer-view'); 3 4 Component({ 5 behaviors: [LayerView], 6 7 data: { 8 maskzIndex: util.getBiggerzIndex(), 9 meIndex: util.getBiggerzIndex() 10 }, 11 attached: function () { 12 console.log('loading') 13 }, 14 methods: { 15 } 16 })index調用情況：
1 <import src="./mod.searchbox.wxml" /> 2 3 <view> 4 <template is="searchbox" /> 5 <ui-loading></ui-loading> 6 </view>我們后續將完整的項目代碼放到github上去，這里便繼續代碼了
添加事件
于是，我們開始添加事件了，這里添加一個點擊遮蓋層關閉整個組件的功能，這里有個問題是，我們點擊遮蓋層事實上關閉的是遮蓋以及loading兩個標簽，而我們這里的isShow屬性便派上了用處，我們現在page中設置下屬性：
<ui-loading is-show="{{isLoadingShow}}"></ui-loading> 1 onShow: function() { 2 this.setData({ 3 isLoadingShow: '' 4 }); 5 },然后我們改造mask以及loading添加事件：
1 <view class="cm-overlay" style="z-index: {{zIndex}}; display: {{isShow}}" bindtap="onTap"> 2 </view> 1 let LayerView = require('behavior-layer-view') 2 3 Component({ 4 behaviors: [LayerView], 5 6 data: { 7 myData: {} 8 }, 9 attached: function () { 10 console.log('mask') 11 }, 12 methods: { 13 onTap: function() { 14 this.triggerEvent('customevent', {}, {}) 15 } 16 } 17 }) 1 <ui-mask z-index="{{maskzIndex}}" is-show="{{isShow}}" bindcustomevent="onMaskEvent"></ui-mask> 2 <view class="spinner" style="z-index: {{meIndex}}; display: {{isShow}}; "> 3 <view class="spinner-container container1"> 4 <view class="circle1"></view> 5 <view class="circle2"></view> 6 <view class="circle3"></view> 7 <view class="circle4"></view> 8 </view> 9 <view class="spinner-container container2"> 10 <view class="circle1"></view> 11 <view class="circle2"></view> 12 <view class="circle3"></view> 13 <view class="circle4"></view> 14 </view> 15 <view class="spinner-container container3"> 16 <view class="circle1"></view> 17 <view class="circle2"></view> 18 <view class="circle3"></view> 19 <view class="circle4"></view> 20 </view> 21 </view> 1 const util = require('../utils/util.js'); 2 let LayerView = require('behavior-layer-view'); 3 4 Component({ 5 behaviors: [LayerView], 6 7 data: { 8 maskzIndex: util.getBiggerzIndex(), 9 meIndex: util.getBiggerzIndex() 10 }, 11 attached: function () { 12 console.log('loading') 13 }, 14 methods: { 15 onMaskEvent: function (e) { 16 console.log(e); 17 this.setData({ 18 isShow: 'none' 19 }); 20 } 21 } 22 })這個時候，當我們點擊遮蓋層的時候，我們整個組件便關閉了。
總結
我們今天花了很多功夫寫一個loading，發現小程序中的組件事實上是標簽，我們沒法使用js獲取到我們“組件”的實例，所以使用上有很大的區別，但是什么都不能阻礙我們寫通用組件的決心，于是我們明天來寫一些通用的組件庫，并且形成一個小程序的體系，這里想的是有：
① 消息框
② toast提示
③ 日歷組件
④ 然后再做一個需要定位的氣泡組件
轉載于:https://www.cnblogs.com/yexiaochai/p/9382862.html
總結
以上是生活随笔為你收集整理的微信小程序开发03-这是一个组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 调整linux系统时区
- 下一篇： 使用Jmeter压力测试工具测试