【键盘/支付】h5键盘以及拉起微信/支付宝支付功能

本文链接：https://blog.csdn.net/qq_38140894/article/details/121920267

本文探讨了如何在H5应用中实现自定义键盘的使用，并详细讲解了如何无缝集成微信与支付宝的支付功能，为前端开发者提供了一站式的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写自定义目录标题

<div class="container" id="newsInfoPreview" v-cloak>
        <!-- 输入框 以及商户信息，这里从后台拿数据获取对应的商户信息-->
        <div class="monenyBox">
            <div class="logoBox">
                <div>
                    <img class="image" src="http://xiangyin-qipai.oss-cn-beijing.aliyuncs.com/202112/1638343588400.png" alt="">
                </div>
                <div class="shopName">
                    <div class="shangjia" style="color:#333;margin-bottom: 0.35rem;font-weight: bold;">{
  {tenantName}}</div>
                    <div style="font-size: 0.7rem;height: 0.8rem;line-height: 0.8rem;">
                        <span class="shopClass">门店</span><span style="color:#666;padding: 0.05rem 0rem;">{
  {shopName}}</span>
                    </div>
                </div>
            </div>
            <div class="payMoneny">消费金额</div>
            </!--键盘输入的数字金额-->
            <div class="monenyNum">
                <div class="content_num">
                    <div>￥</div>
                    <div v-for="item in inputArray" :key="item" class="content_item">{
  {moneyNum[item-1]}}</div>
                    <div class="blink"></div>
                </div>
            </div>
            <div>
                <p style="color:#999;font-size:0.6rem">为保障您的资金安全，请核实商户信息</p>
            </div>
        </div>
		<!---h5键盘在这里插入代码片-->
        <div class="keyboardbox">
            <div class="numkeyboard">
                <div class="num-area">
                    <div class="row" v-for="(item,index) in numKeybordList" :key="index">
                        <div :class="['item',ite===0?'z':'']" v-for="(ite,idx) in item" 
                        :key="idx" @click="input({num:ite})">{
  {ite}}</div>
                    </div>
                </div>
                <div class="btn-area">
                    <div :class="['item','del']" id="delId"  @click="delNumFun">
                        <img src="http://xiangyin-qipai.oss-cn-beijing.aliyuncs.com/202112/1638428193035.png" style="width: 29px;height: 18px;" alt="">
                    </div>
                    <button class="item" :class="[disabledVisible==true?'confirems':'confirem']" @click="pay" :disabled="disabledVisible">
                        <div>立即</div>
                        <div>支付</div>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
``
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> //拉起微信支付引用的官方接口
    <script src = "https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.m