小程序 -立即购买按钮弹出界面

本文介绍了一个基于微信小程序的分享与购买功能的具体实现方式,包括如何展示分享弹窗及购买确认界面,并通过简单的代码示例展示了如何使用微信小程序API进行页面跳转和触发分享行为。

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

主要用到 {{isRuleShare?"isRuleShow":"isRuleHide"}}

// 微信分享弹出


 <view class='shade-box backg-bk {{isRuleShare?"isRuleShow":"isRuleHide"}}' >
    <view class='shop-box'>
        <view class='item backg-white'>
            <view class='shade-hd'>
                <view class='weui-cell border-bt'>
                    <view class='weui-cell-bd text-center font-lg font-wg'>分享至微信</view>
                    <view class='weui-cell-ft ' bindtap='hideRule'>
                        <view class='img-box'>
                            <image src='/image/icon-close.png' class='img' mode='widthFix'></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class='shade-ft padding-box'>
                <view class='weui-cell text-center'>
                    <view class='weui-cell-bd form-box'>
                        <button class='btn' open-type='share'>zhuanfa</button>
                        <view class='img-box'>
                            <image src='/image/icon-circle-ft.png' class='img' mode='widthFix'></image>
                        </view>
                        <view class='font-sm font-wg'>微信好友</view>
                    </view>
                    <view class='weui-cell-bd' bindtap='navigateUrl' data-url='/pages/member/poster/index/index'>
                        <view class='img-box'>
                            <image src='/image/icon-circle-rg.png' class='img' mode='widthFix'></image>
                        </view>
                        <view class='font-sm font-wg'>朋友圈</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view> 
// 分享按钮
<view class='dets-bd padding-box backg-white'>
    <view class='weui-cell'>
        <view class='weui-cell-bd'>
            <view class='weui-title'>
                <view class='text-flow clamp-xs font-lg font-wg'>创意方法论之探索未来的设计</view>
                <view class='text font-gray'>
                    <label class='backg-gray'>限时抢购</label>
                    <label class='backg-gray'>79 人已购</label>
                    <label class='backg-gray'>375cm*200cm</label>
                </view>
            </view>
            <view class='weui-cost font-yellow font-xs'>
                <label></label> <label class='font-lg'>273.69</label>
            </view>
        </view>
        <view class='weui-cell-ft form-box'>
        /* 弹出层按钮*/
            <!-- <button class='btn' open-type='share'>zhuanfa</button> -->
            <button class='btn' bindtap='showShare'>zhuanfa</button>
            <view class='img-box'>
                <image src='/image/icon-share.png' class='img' mode='widthFix'></image>
            </view>
        </view>
    </view>
</view>

// 购买弹出界面


<view class='shade-box backg-bk {{isRuleTrue?"isRuleShow":"isRuleHide"}}' >
    <view class='shop-box'>
        <view class='item backg-white'>
            <view class='shade-hd'>
                <view class='weui-cell border-bt'>
                    <view class='weui-cell-bd text-center font-lg font-wg'>确认购买</view>
                    <view class='weui-cell-ft ' bindtap='hideRule'>
                        <view class='img-box'>
                            <image src='/image/icon-close.png' class='img' mode='widthFix'></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class='shade-ft font-sm'>
                <view class='item-hd'>
                    <view class='text font-wg'>规格</view>
                    <view class='text font-yellow text-center'>1份</view>
                </view>
                <view class='item-bd border-bt border-top'>
                    <view class='text font-wg'>数量</view>
                    <view class='text text-xs font-yellow text-right font-lg'>
                        <label>-</label>
                        <label class='p-text'>2</label>
                        <label>+</label>
                    </view>
                </view>
                <view class='item-bd item-ft'>
                    <view class='text'><view class='pice font-lg font-yellow'>273.99 元</view></view>
                    <view class='text'>
                        <view class='form-btn'>
                            <button class='btn font-white backg-yellow' bindtap='navigateUrl' data-url='/pages/member/payment/info/index'>立即购买</button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>

// 购买的按钮
<view class='form-ft form-md backg-white clearfix'>
    <view class='item pull-left'>
        <view class='weui-cell text-center border-top'>
            <view class='weui-cell-bd form-box'>
                <button class='btn' bindtap='navigateHome' data-url="/pages/index/index">首页</button>
                <view class='img-box'>
                    <image src='/image/icon.navbar09.png' class='img' mode='widthFix'></image>
                </view>
                <view class='text'>首页</view>
            </view>
            <view class='weui-cell-bd form-box'>
                <button class='btn'>客服</button>
                <view class='img-box'>
                    <image src='/image/icon.navbar10.png' class='img' mode='widthFix'></image>
                </view>
                <view class='text'>客服</view>
            </view>
        </view>
    </view>
    <view class='item backg-yellow pull-right'>
        <view class='btn-lg text-center form-box'>
        /* 弹出层按钮*/
            <button class='btn' bindtap='showRule'>立即订购</button>
            <view class='btn-bk font-lg font-white'>立即订购</view>
        </view>
    </view>
</view>
JS
Page({
    // 分享弹出
    showShare: function() {
        this.setData({
            isRuleTrue: true
        })
    },
    // 购买弹出
    showRule: function() {
        this.setData({
            isRuleTrue: true
        })
    },
    // 关闭按钮
    hideRule: function() {
        this.setData({
            isRuleTrue: false,
            isRuleShare: false
        })
    },
    //   分享给好友
    onShareAppMessage: function () {
        return this.data.shareData
    },
    // 页面跳转
    navigateUrl: function (e) {
      var url = e.currentTarget.dataset.url;
        url && wx.navigateTo({
            url: url,
        })
     },
})

这里写图片描述
这里写图片描述

### 微信小程序键盘弹出时点击按钮无反应的解决方案 在微信小程序开发中,当键盘弹出时可能会遇到点击按钮无反应的问题。这通常是因为键盘弹起动画与界面交互冲突所致[^1]。 #### 问题分析 - 当键盘弹出时,如果立即点击其他控件(如按钮),由于键盘弹起存在动画过程,在此期间某些操作可能被暂时屏蔽。 - 如果用户快速连续点击不同控件,则可能导致事件无法及时响应或部分功能失效。 #### 解决方法 以下是几种可行的解决策略: 1. **延迟处理逻辑** 可通过设置定时器来延后绑定的操作逻辑执行时间,从而避开键盘动画的时间窗口。例如: ```javascript Page({ onBtnClick: function() { setTimeout(() => { console.log('按钮已成功点击'); }, 300); // 延迟300毫秒以等待键盘动画完成 } }); ``` 2. **监听键盘状态变化** 使用 `onKeyboardHeightChange` 方法监听键盘高度的变化情况,并在此基础上调整布局或其他行为。具体实现如下: ```javascript Page({ data: { keyboardHeight: 0, }, onLoad: function () { wx.onKeyboardHeightChange(res => { this.setData({ keyboardHeight: res.height }); }); }, onUnload: function () { wx.offKeyboardHeightChange(); } }); ``` 这样可以动态感知键盘的状态并作出相应调整[^4]。 3. **优化事件绑定机制** 对于按钮点击事件,建议采用标准方式绑定,确保其能够正确捕获用户的触碰动作。例如: ```html <!-- WXML --> <button bindtap="handleButtonClick">提交</button> ``` 配合对应的JS函数定义: ```javascript Page({ handleButtonClick: function (event) { console.log('按钮已被点击:', event); } }); ``` 4. **防止重复触发** 若发现因多次快速点击引发异常,可在程序内部加入防抖动设计。比如利用标志位控制同一时间内只允许一次有效操作: ```javascript Page({ isProcessing: false, handleButtonClick: function () { if (!this.isProcessing) { this.isProcessing = true; try { // 执行业务逻辑... console.log('正在处理...'); } finally { this.isProcessing = false; // 恢复状态以便下次调用 } } } }); ``` 以上措施综合运用可显著改善用户体验并减少潜在错误发生概率。 ### 示例代码片段 下面给出一个完整的例子展示如何结合上述技术点解决问题: ```html <!-- WXML --> <view class="container"> <input type="text" placeholder="请输入内容..." /> <button bindtap="submitAction">确认</button> </view> ``` ```css /* WXSS */ .container { padding-bottom: env(safe-area-inset-bottom); /* 自适应安全区域 */ } ``` ```javascript // JS Page({ submitAction: function () { const self = this; // 添加短暂停顿规避干扰 setTimeout(function () { console.log('提交操作已完成!'); }, 200); // 或者更复杂场景下的异步流程管理 new Promise((resolve, reject) => { resolve(); // 模拟网络请求等耗时任务结束信号 }).then(() => { console.log('后续步骤启动...'); }); } }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值