wepy中的群转发

onShareAppMessage进行小程序群分享
wepy项目中在.page中使用

在onLoad中插入

//显示转发按钮及分享的群列表
wepy.showShareMenu({
	withShareTicket: true
})

实现分享功能

//在onShareAppMessage中设置分享的界面,在分享成功后的回调函数中通过wepy.getShareInfo获取分享群的信息。群的信息是经过加密的,需要通过后台来进行解密操作。
onShareAppMessage(res){
        var shareTitle;
        if (res.from === 'button') {
            // 来自页面内转发按钮
            shareTitle = '这是来自button的转发';
        }else{
            shareTitle = '这是来自胶囊按键的转发';
        }
        return {
            title: '自定义转发标题',
            path: '/pages/index',
            success: function(res) {
              //转发成功获取shareTicket
              let shareId = res.shareTickets[0]
              console.log(shareId)
              // 转发成功
              //获取分享群信息
              wepy.getShareInfo({
                  shareTicket: shareId,
                  success: (data) => {
                    var appId = '自己的appId'
                    var encryptedData = data.encryptedData
                    var iv = data.iv
                    //请求接口
                    wepy.request({
                      url: 'http://100.39.8.54:3000/api/decode',
                      method: 'post',
                      data: {
                        appId: appId,
                        encryptedData: encryptedData,
                        iv: iv
                      },
                      success: (info) => {
                        console.log('info:' + info)
                      },
                      fail: (info) => {
                        console.log(info)
                      }
                    })
                    console.log(data)
                  },
                  fail: (data) => {
                    console.log(data)
                  }
              })
              console.log(res)
            },
            fail: function(res) {
                // 转发失败
                cobsole.log('转发失败')
                console.log(res)
            }
        }
    }

结果显示:
在这里插入图片描述

### 实现刮刮乐效果 要在 Wepy 框架中实现刮刮乐效果,主要思路是通过 Canvas 组件来绘制遮罩层,并允许用户通过触摸操作擦除部分区域显示下方的内容。具体来说: #### 1. 创建 Canvas 组件并绑定事件处理函数 首先,在页面的 `wxml` 文件里定义一个 `<canvas>` 标签用于绘图,并设置其宽高属性以及 id 属性以便后续 JavaScript 中获取该 canvas 对象。 ```html <view class="scratch-card"> <canvas type="2d" bindtouchstart="handleTouchStart" bindtouchmove="handleTouchMove" id="scratchCanvas"></canvas> </view> ``` #### 2. 初始化画布与背景图片加载 接着,在对应的 `.js` 文件内初始化画布上下文对象 ctx 和一些必要的变量如 scratchWidth, scratchHeight 表示可被划掉的最大宽度高度;imageSrc 存储要展示给用户的最终奖品图像路径等信息[^1]。 ```javascript import wepy from 'wepy'; export default class ScratchCard extends wepy.page { data = { imageSrc: '/static/images/prize.png', // 奖励图片资源地址 scratchWidth: 0, scratchHeight: 0, isScratchable: true }; async onLoad() { const query = wx.createSelectorQuery().in(this); await new Promise((resolve) => { query.select('#scratchCanvas').fields({ node: true }, (res) => { this.ctx = res.node.getContext('2d'); resolve(); }).exec(); }); // 加载完成后的回调函数 const img = await new Promise((resolveImg) => { const tempImage = new Image(); tempImage.src = this.data.imageSrc; tempImage.onload = () => resolveImg(tempImage); }); this.scratchWidth = img.width * 0.8; // 设置为原图大小的80% this.scratchHeight = img.height * 0.8; // 渲染初始状态下的画面 renderInitialState.call(this); } } ``` #### 3. 定义触控逻辑及渲染方法 为了能够响应用户的滑动动作从而达到“刮开”的视觉体验,还需要编写 handleTouchStart 和 handleTouchMove 方法分别用来记录手指按下位置坐标和移动过程中更新已刮去区域的数据结构(可以是一个二维数组)。最后再调用一次 render 函数重新绘制整个场景即可显示出最新的变化情况。 ```javascript // 记录上一次接触屏幕的位置 let lastX = null; let lastY = null; function handleTouchStart(e) { if (!this.isScratchable || !lastX === null || !lastY === null) return; let touch = e.touches[0]; lastX = touch.x; lastY = touch.y; } function handleTouchMove(e) { if (!this.isScratchable) return; let touch = e.touches[0]; drawLine(lastX, lastY, touch.x, touch.y); lastX = touch.x; lastY = touch.y; } function drawLine(fromX, fromY, toX, toY){ this.ctx.beginPath(); this.ctx.moveTo(fromX, fromY); this.ctx.lineTo(toX, toY); this.ctx.lineWidth = 50; this.ctx.strokeStyle = '#FFFFFF'; this.ctx.stroke(); checkIfFullyRevealed(); // 判断是否已经完全揭开 } function checkIfFullyRevealed(){ /* 这里的逻辑可以根据实际需求调整 */ console.log("Checking..."); } ``` #### 4. 添加样式美化界面布局 为了让用户体验更好一点,可以在 CSS 文件里面加入适当的选择器规则使卡片看起来更美观大方些。 ```css page{ background-color:#f7f7f7; } .scratch-card{ position:relative; width:90%; height:auto; margin-left:auto; margin-right:auto; border-radius:.2rem; overflow:hidden; box-shadow:0px 0px .5em rgba(0,0,0,.1); } #scratchCanvas{ display:block; width:100%; height:100%; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值