微信开发二次总结

最新推荐文章于 2022-06-14 17:41:30 发布

原创最新推荐文章于 2022-06-14 17:41:30 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

微信专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在前端实现电话号码的直接呼叫功能，通过JavaScript限制文本输入框内的字符数量并实时更新剩余输入字数，以及使用WeUI库在微信环境中进行图片选择与预览的相关代码实现。

1.电话号的呼叫

 <div class="btn-call" data-phone="{{v.phone}}">
                        <a href="tel:{{v.phone}}">
                            <i class="img-phone-write">      </i>呼叫
                        </a>
                    </div>

2。文本输入框的计算

//文本域中字数的限制和显示剩余输入的文字
function checkLength(which) {
    var maxChars = 300; //
    if (which.value.length > maxChars) {
        alert("您出入的字数超多限制!");
        // 超过限制的字数了就将 文本框中的内容按规定的字数 截取
        which.value = which.value.substring(0, maxChars);
        return false;
    } else {
        var curr = maxChars - which.value.length; //250 减去 当前输入的
        document.getElementById("sy").innerHTML = curr.toString();
        return true;
    }
}

3.微信图片的控件的添加

  $("#chooseImage").click(function() {
        wx.chooseImage({
            count: 9, // 默认9
            success: function(res) {
                operatePicList = res.localIds;
                var max = 9 - res.localIds.length;
                if (max < 1) {
                    $('.weui_uploader_input_wrp').css('display', 'none');
                }
                var html = template('tmp_preview', { "data": res.localIds });
                $('.weui_uploader_files').html(html);
                $('.weui_cell_ft').html(res.localIds.length + '/' + 9);
            }
        });
    });

  <div class="weui_cell_bd weui_cell_primary">
                            <div class="weui_uploader">
                                <div class="weui_uploader_hd weui_cell">
                                    <div class="weui_cell_bd weui_cell_primary">图片选择</div>
                                    <div class="weui_cell_ft"></div>
                                </div>
                                <div class="weui_uploader_bd">
                                    <ul class="weui_uploader_files"> </ul>
                                    <div class="weui_uploader_input_wrp">
                                        <div class="weui_uploader_input" id="chooseImage">chooseImage</div>
                                    </div>

                                </div>
                            </div>
                        </div>

4.微信端的控件一般可以用wei ui的东西 http://jqweui.com/