官網對自定義元件新手來說可能會比較比較籠統，寫出來也可能會頁面很亂

所以在這裡我細緻化的寫出來，讀一遍就可以

微信小程式自定義元件
1：建立自定義元件目錄（這裡我建立的自定義元件目錄為myCompontent）


2:自定義元件和頁面相似同樣擁有 .js,.json,.wxml,.wxss四個檔案，當然為了方便使用
  這裡使用的四個檔名稱使用的是以myCompontent命名
  
3：在myCompontent.json中元件宣告
{
"component": true
 }
這是將此檔案設定為自定義元件


首先展示專案截圖

做過兩年原生app開發總覺得自定義控制元件用起來很方便，只要隨便一呼叫就可以使用了，根據自己想要的用，方便。但是當開發一段時間微信小程式時，突然發現自定義就讓人苦惱了，有時候因為Android，ios系統不同讓人很煩躁，相容性問題又有些麻煩。捉摸了兩天（當然是因為使用時實在太苦惱），最終決定寫一個自定義dialog。

看到截圖了吧，哈哈，不煩你們了，這裡上傳程式碼

1：自定義控制元件目錄：myDialogComponent，在此目錄下建立四個檔案myDialogComponent.js,myDialogComponent.json,myDialogComponent.wxss,myDialogComponent.wxml.

2:首先需要在myDialogComponent.json檔案中進行引用宣告（將 component 欄位設為 true 可這一組檔案設為自定義元件）

{ "component": true }

3：wxss控制元件樣式書寫，這裡我就不多贅述了，和css樣式書寫類似,這裡只接寫程式碼，拷貝下來就行了

myDialogComponent.wxss檔案

/*mask*/
.drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden; }
/*content*/
.drawer_box { width: 76%; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 1001; background: #fafafa; margin: -150px 12% 0 12%; border-radius: 3px; }
.drawer_title { padding: 15px; text-align: center; background-color: gazure; }
.drawer_content { height: 130px; overflow-y: scroll; /*超出父盒子高度可滾動*/ }
.title { height: 30px; line-height: 30px; width: 160rpx; text-align: center; display: inline-block; font: 300 28rpx/30px "microsoft yahei"; }
.text { color: black; }
.sureQuery { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; background-color: white; }
.btn { width: 100%; padding: 10px; text-align: center; color: red; } .btn:active{ width: 100%; padding: 10px; text-align: center; color: red; background-color: gray; }
.btnSure { width: 100%; padding: 10px; background-color: gainsboro; text-align: center; }
.titleMsg { font: 200 35rpx/30px; text-align: center; margin-top: 45px; display: block; }
.input_base { padding-top: 3px; padding-bottom: 3px; max-block-size: 10; display: block; background-color: white; margin-top: 45px; border: 2rpx solid #ccc; padding-left: 20rpx; margin-right: 10%; border-radius: 3px; margin-left: 10%; } 4:接下來就是myDialogComponent.wxml檔案了 myDialogComponent.wxml檔案：
<view hidden='{{dialogHidden}}'> <view class='drawer_screen' bindtap='cancleBtn' /> <view class='drawer_box'> <view class="drawer_title">提示</view> <view class='drawer_content'>
<text class='titleMsg'>{{titleMsg}}</text>
<input class="input_base" hidden='{{inputHidden}}' bindinput="bindKeyInput" value="{{inputValue}}" maxlength='10' auto-focus='autofocus' placeholder='{{inputPlaceHalder}}' />
</view> <view class='sureQuery'> <view bindtap='cancleBtn' class='btn' hidden='{{cancleBtn}}'>取消</view> <view bindtap='determineBtn' class='btnSure'>確定</view> </view> </view> </view>

5：myDialogComponent.js檔案

Component({ properties: { inputPlaceHalder: { type: String, value: ' ', },
inputHidden: { type: Boolean, value: true },
dialogHidden: { type: Boolean, value: true },
// 這裡定義了innerText屬性，屬性值可以在元件使用時指定 titleText: { type: String, value: '提示', }, titleMsg: { type: String, value: ' ', },

inputMsg: { type: String, value: '請輸入你他媽想幹嘛', }, //確定 determineBtn: { type: String, value: 'default value', }, //取消 cancleBtn: { type: Boolean, value: true, },
},

data: { // 這裡是一些元件內部資料 inputValue: "", onCancleClick: false,
},
methods: { // 輸入值 bindKeyInput: function (e) { this.setData({ inputValue: e.detail.value }) },
// 這裡是一個自定義方法,取消 cancleBtn: function () { // Properties pro = new Properties(); console.log("點選取消按鈕") this.setData({ dialogHidden: true, })
},
// 確定 determineBtn: function () {
var determineDetail = this.data.inputValue // detail物件，提供給事件監聽函式 this.triggerEvent('determineevent', determineDetail) this.setData({ inputValue: "" }) } } })   大功告成，終於將自定義控制元件寫完了，接下來就要呼叫了

首先  1：在用到的page頁面的json中進行引用宣告，我用的page頁目錄為（myDialogTestPage）當然了，page頁面同樣擁有四個檔案（js,json,wxss,wxml）

myDialogTestPage.json檔案
{ "usingComponents": { "my-component-dialog": "../../myDialogComponent/myDialogComponent"（這是自定義控制元件的根目錄結構，你們用的時候可能也不一定是這個結構，要注意，別踩坑） } }

2：使用：在wxml中引用

myDialogTestPage.wxml檔案

<button bindtap='showCompomentDialog'>自定義元件</button> <my-component-dialog bind:determineevent="onMyEvent" bind:cancleevent="cancleBtn" dialog-hidden="{{isHidden}}" title-msg="{{titleMsg}}" input-hidden="{{inputHidden}}" cancle-btn="{{cancleBtn}}" input-place-halder="{{inputPlaceHolder}}" />

3：myDialogTestPage.js檔案

Page({
/** * 頁面的初始資料 */ data: { // isAdministrators:true isHidden: true, titleMsg: " ", inputHidden: false, cancleBtn: false, inputPlaceHolder: "" },
onMyEvent: function (e) { var that = this; console.log("e.detail :", e.detail)
that.setData({ isHidden: true, // inputHidden: false })
},
showCompomentDialog: function () { var that = this; that.setData({ isHidden: false, titleMsg: "這樣真的好嗎", // inputPlaceHolder: "請輸入想要傳送的內容", inputHidden: true, // cancleBtn: true, }) } })

在showCompomentDialog：function (){

}

onMyEvent方法就是點選確定按鈕（這裡我只是打印出來內容，比如輸入框裡面的內容）

中的值進行更改你們可以試一試，（//註釋掉的不要隨便刪除哦，去掉註釋可以顯示不同樣式，好用的話小夥伴們）