首先，我們先認識一下自定義元件的一些基本知識，要知道它和page一樣，都包含4個檔案（wxml、wxss、js、json)。
1、先在自定義元件的json檔案裡設定：
自定義元件的模板：
1component(,
5properties:
11},
12data: ,
15methods:
18 })
2、在要引用該元件的頁面的json中配置：
}
在頁面引用，標籤名只能是小寫字母、中劃線和下劃線的組合
<component-tag-name
inner-text
="some text"
>
component-tag-name
>
那麼接下來開始實踐一下。因為平時的一些應用中，傳送驗證碼，是比較常見的功能，所以我們可以把這個單獨做成乙個元件，以便之後的復用。
思路：單獨把傳送驗證碼作為乙個元件，傳入手機號，在元件內判斷是否為合法的手機號，如果是，則呼叫介面獲取驗證碼，按鈕置灰，顯示60s倒計時。超過60s即可重新獲取驗證碼。**如下：
2component(,
11 checkphone:
15},
1617/**
18* 元件的初始資料
19*/
20data: ,
2728/**
29* 元件的方法列表
30*/
31methods: )41}
42else)49
}50},51
getcode()$/;
53 let phone = this
.properties.phone
54if (!(reg.test(phone))) )
56return
false;57
}58if (this
.properties.checkphone))
63return
false64}
65this
.sendcode()
66 }, (error) =>)
6869}70
if (!this
.properties.checkphone)
73},
74sendcode())83}
84 let code =res.data.data.msg
85this.triggerevent('transcode', )
86this
.setdata(, 1000)
88})
89 }, (error) =>)92}
93}94 })
假設在註冊頁面引入，或者忘記密碼頁面使用：
1、在引入頁面的json檔案裡：
}
2、頁面引入
微信小程式之獲取驗證碼js
第一步 結構 view class get code wx if bindtap getcode 獲取驗證碼 view view class get code wx if 秒後重新傳送 view 備註 用wx if條件渲染來判斷某個按鈕是否顯示與隱藏。是要動態顯示的秒數，只繫結乙個view的點選事件...
小程式驗證碼頁面
輸入驗證碼 已向 傳送驗證碼 s 後可重新獲取 重新獲取 wcss page vercodeview vercodesendview sendtime vercodeinputview vercodeinput 新驗證碼輸入框樣式 page code input content wrap input...
獲取手機驗證碼按鈕的效果實現
在web網頁中,使用者的一些行為,例如註冊,登入,付款,修改密碼等,都需要 通過手機驗證碼來確認其行為身份,從而保證使用者賬戶和 自身的安全.網頁中的驗證碼一般都是採用點選獲取的方式,在實現頁面的獲取手機驗證碼按鈕時,著重需要考慮的是以下幾點 在這裡我們主要來實現前兩項效果.保證網頁重新整理後驗證碼...