当前位置：首页 > ops >正文

记录前端菜鸟的日常——小程序内嵌H5页面自定义分享按钮

ops 2025/8/22 18:05:43

一个新的小需求，客户想把某一个页面（在H5里写的）的右上角的三个点分享禁掉，改成用悬浮在页面某个位置且可拖动的按钮进行分享

我之前只知道两种方式可以进行分享：onShareAppMessage和button按钮上的open-type="share"

一、自定义分享按钮

最开始想的是h5来写这个按钮，然后向小程序原生用postMessage发送消息，小程序进行监听并且触发分享，但是后来发现监听完之后也只能是修改消息内容，并不能触发分享事件，然后我就想在小程序原生里把按钮给加上，用open-type="share"的方式

如果是直接写的话都会被webview的优先级把页面写的内容都覆盖掉

h5的页面使用webview内嵌进来的，问了chat和看一位大佬的文章了解到cover-view组件优先级比webview要高https://blog.csdn.net/m0_47791238/article/details/133789009?ops_request_misc=%257B%2522request%255Fid%2522%253A%25229557455c43ea01001c42aa6e36b05764%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=9557455c43ea01001c42aa6e36b05764&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-133789009-null-null.142^v102^pc_search_result_base4&utm_term=cover-view%E5%92%8Cwebview&spm=1018.2226.3001.4187

cover-view功能描述：

这里面还能写button真是天助我也，不过需要注意cover-view的样式我本来用的是absolute结果真机调试的时候不出现，用了fixed才好，不过fixed也是不影响按钮拖动的（本地看不见按钮必须真机调试）

二、按钮拖动效果

按钮出现之后就是拖动功能了，先上代码

wxml：

<view><web-view src="{{currentDetailUrl}}" bindmessage="handleWebviewMessage"></web-view><cover-view class="draggable-btn" style="left: {{btnLeft}}px; top: {{btnTop}}px;"bindtouchstart="onTouchStart"bindtouchmove="onTouchMove"bindtouchend="onTouchEnd"><button class="text" open-type="share">分享</button></cover-view>
</view>

js：

data: {// 初始位置（单位：px）btnLeft: 30,   // 距离左边btnTop: 100,   // 距离顶部// 当前拖动状态startX: 0,startY: 0,isMoving: false},
// 触摸开始
onTouchStart(e) {const { clientX, clientY } = e.touches[0];this.setData({startX: clientX - this.data.btnLeft,startY: clientY - this.data.btnTop,isMoving: true});
},// 触摸移动
onTouchMove(e) {if (!this.data.isMoving) return;if (this.throttle) return;this.throttle = true;setTimeout(() => {this.throttle = false;}, 16);const { clientX, clientY } = e.touches[0];let left = clientX - this.data.startX;let top = clientY - this.data.startY;const { windowWidth, windowHeight } = wx.getSystemInfoSync();const btnWidth = 60;const btnHeight = 40;left = Math.max(10, Math.min(left, windowWidth - btnWidth - 10));top = Math.max(80, Math.min(top, windowHeight - btnHeight - 10));this.setData({btnLeft: left,btnTop: top});
},// 触摸结束
onTouchEnd() {this.setData({isMoving: false});
},onLoad(options) {// wx.hideShareMenu()this.setData({btnLeft: 30,btnTop: 100});

我画了一个图片帮助理解，字不好看不过应该能看懂