WeChat applet example: implementing random verification code (with code)-Mini Program Development-php.cn

WeChat applet example: implementing random verification code (with code)

不言

Release： 2018-08-16 18:03:08

Original

8601 people have browsed it

The content of this article is about the WeChat applet example: implementing random verification code (with code), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are often some registration and application pages on mini programs that require a random verification code. I won’t say much about the specific implementation method, just go to the code

   <view class=&#39;yanzhengma&#39;>
        <text class=&#39;left&#39;>{{code}}</text>
        <text class=&#39;right&#39; bindtap=&#39;huanyizhang&#39;>换一张</text>
    </view>

Copy after login

.yanzhengma {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yanzhengma .left {
    font-family: Arial;
    font-style: italic;
    font-weight: bold;
    border: 0;
    letter-spacing: 3px;
    font-size: 18px;
    background-color: #ccc;
    padding: 10rpx;
    margin-right: 20rpx;
    color: blue;
}

Copy after login

Page({

    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
    //刚进入页面随机先获取一个
        this.createCode()

    },
    huanyizhang(){
        this.createCode()
    },
    createCode() {
        var code;
        //首先默认code为空字符串
        code = &#39;&#39;;
        //设置长度，这里看需求，我这里设置了4
        var codeLength = 4;
        //设置随机字符
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, &#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;E&#39;, &#39;F&#39;, &#39;G&#39;, &#39;H&#39;, &#39;I&#39;, &#39;J&#39;, &#39;K&#39;, &#39;L&#39;, &#39;M&#39;, &#39;N&#39;, &#39;O&#39;, &#39;P&#39;, &#39;Q&#39;, &#39;R&#39;, &#39;S&#39;, &#39;T&#39;, &#39;U&#39;, &#39;V&#39;, &#39;W&#39;, &#39;X&#39;, &#39;Y&#39;, &#39;Z&#39;);
        //循环codeLength 我设置的4就是循环4次
        for (var i = 0; i < codeLength; i++) {
            //设置随机数范围,这设置为0 ~ 36
            var index = Math.floor(Math.random() * 36);
            //字符串拼接 将每次随机的字符 进行拼接
            code += random[index];
        }
        //将拼接好的字符串赋值给展示的code
        this.setData({
            code: code
        })
    },




})

Copy after login

Related recommendations:

WeChat applet example: How to count down the verification code (code)

WeChat Mini Program Example: How to obtain and render data (with code)

The above is the detailed content of WeChat applet example: implementing random verification code (with code). For more information, please follow other related articles on the PHP Chinese website!