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

最新推荐文章于 2025-06-16 14:12:13 发布

置二

最新推荐文章于 2025-06-16 14:12:13 发布

阅读量5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：【小程序】文章标签：购买按钮弹出界面 js

本文链接：https://blog.youkuaiyun.com/weixin_42675488/article/details/82315132

【小程序】专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个基于微信小程序的分享与购买功能的具体实现方式，包括如何展示分享弹窗及购买确认界面，并通过简单的代码示例展示了如何使用微信小程序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,
        })
     },
})

这里写图片描述