微信支付其实并不复杂，看下我的页面，点击下面的确认充值，即可调起微信支付，其实后台复杂一点，前端很简单： [图片] WXML <view class="tx-18" bindtap="postMoney">确认充值</view> JS postMoney() { // 点击确认充值     wx.showLoading({       title: '加载中',     })     let that = this     app.http.getData({ //第一步请求后台接口，获取发起支付所需要的数据       amount: that.data.orderId // 我这里发起请求传过去的是订单编号     }).then((res1) => {             if (res1.code == 200) {                 wx.requestPayment({ // 这一步是调起微信支付                   "appId": res1.appId,                   "timeStamp": res1.timeStamp,                   "nonceStr": res1.nonceStr,                   "package": res1.package,                   "signType": res1.signType,                   "paySign": res1.paySign,                   "success": function (res) {                     wx.hideLoading({})                     app.ShowToast('充值成功')                   },                   "fail": function (res) {                     app.ShowToast('支付失败');                   },                   "complete": function (res) {                     app.ShowToast('取消支付');                   }                 })             } else {               wx.hideLoading({})               app.ShowToast('支付失败')             }     })   }, 如果还有不明白的朋友欢迎在下方留言。

微信外部浏览器唤起微信小程序目的：通过发送短信召回流失用户。官方文档地址https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html步骤一该API我们主要用到的配置如下：jump_wxa：跳转到的目标小程序信息。该对象内包含两个字段。path：通过scheme码进入的小程序页面路径，必须是已经发布的小程序存在的页面，不可携带queryquery：通过scheme码进入小程序时的query。步骤二需要注意的是，query必传，然而如果我们需要跳转的页面不需要参数，也需要配置上query，默认我们填写的是from=sms, 用于统计是从短信渠道来的。步骤三与后端约定access_token 通过前端传递appKey进行区分，传哪个微信小程序的appKey 就生成对应小程序的access_token。步骤四支持设置scheme的过期时间，默认永久，我们的应用场景很少，暂不详说。步骤五代码里操作如下，由后端聚合参数信息。let postData = { appKey: 'QTSHE_MINI_APP', path: 'pages/partdetails/partdetails', query: 'partJobId=123456' || 'a=1' } this.$axios.post('xxx', postData).then((res) => { if (res.success) { const url = res.data.openlink // 将scheme转为我们平台的短链接，否则在安卓手机上无法打开微信小程序，会默认打开浏览器搜索。 this.$axios.get(`xxx`, {url}).then((res) => { if (res.success) { this.shortLink = res.data // 将weixin://xxxx 转换为 https://b.qtshe.com/xxx } }) } else { this.$Message.error('获取失败，请稍后重试') } }).catch((err) => { console.log(err) this.$Message.error('获取失败，请稍后重试') }) 微信内部浏览器唤起小程序官方文档地址https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html步骤一首先需要登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，未配置会导致wx.config签名失败，导致无法使用开放标签。步骤二在需要调用JS接口的页面引入如下JS文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js，1.6.0版本内才增加了上述标签，低于该版本的都无法显示。步骤三通过config接口注入权限验证配置并申请所需开放标签, 在wx.config里增加openTagList标签，内置两个开放标签 [代码]wx-open-launch-app[代码] 微信h5唤起本地已经安装的app，以及 [代码]wx-open-launch-weapp[代码] 微信h5唤起小程序，操作如下：wx.config({ debug: false, appId: window.g_info.wx_appid, // 全局变量appId timestamp: data.data.timestamp, // 调用微信接口返回的 nonceStr: data.data.nonceStr, // 调用微信接口返回的 signature: data.data.signature, // 调用微信接口返回的 jsApiList: ['openLocation', 'getLocation'], // 这里需要任意填写api，不能为空 openTagList: [ 'wx-open-launch-app', 'wx-open-launch-weapp' ] }) 注意点对于Vue等视图框架，为了避免template标签冲突的问题，可使用[代码]<script type="text/wxtag-template"></script>[代码]进行代替，来包裹插槽模版和样式。页面中与布局和定位相关的样式，如[代码]position: fixed; top -100;[代码]等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；对于有CSP要求的页面，需要添加白名单frame-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。// Vue里操作代码如下，如果需要写样式，最好是外部包一个div进行样式编写，内部的内容宽高100%即可，调试样式可使用微信开发者工具的网页模式： .quick-btn { // 这里写样式 width: 3.43rem; height: 0.96rem; display: flex; img { width: 100%; display: block; } } <div class="quick-btn"> <img src="https://qiniu-image.qtshe.com/20220317quick-apply.png" alt="" /> </div> 示例效果[图片] 为了方便运营同学，做了个工具给他们使用。 [图片] 2023年4.11号新版本后的改版方案： 首先做一个落地页：https://b.qtshe.com/1DF43E 代码如下： import toast from 'toast' export default { created() { this.init() }, methods: { // 获取微信scheme地址，并且主动跳转一次 init() { this.$axios.post(`https://xxx/你们的接口地址/user/device/scheme`, this.$route.query).then(res => { if (res.success) { window.location.href = res.data } else { toast(res.msg) } }).catch(() => { toast('服务器错误，请稍后重试') }) } } } 原理：通过地址栏配置需要跳转的参数，h5页面拿到参数后通过接口转换为weixin://xxxx 开头的scheme协议地址，并且主动location.href一次。这样能保证用户每次打开都是新的scheme地址，针对一天50w数量上限的问题，可尝试同一个用户在固定时间内相同的参数，返回相同的scheme地址。 以上限制只存在于除微信外的外部浏览器，微信容器里没有以上的限制。 2023年12月18日后方案： 官方公告如下： https://developers.weixin.qq.com/community/develop/doc/00024e32cbc36055c0c0a34b066401 ，没有外部浏览器、微信环境的限制，可以被多人打开。 使用方式通过明文拼接： weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION* 示例: // query需要encode编码，ENV_VERSION为控制打开开发版、体验版、线上版本 weixin://dl/business/?appid=wxa7b0b022472e55e6&path=pages/partdetails/partdetails&query=partJobId%3D123456 通过明文 URL Scheme 拉起的小程序（页面）必须要提前在「小程序管理后台 -> 设置 -> 隐私与安全 -> 明文 scheme 拉起此小程序」中进行声明； 小程序：配置能够通过明文 scheme 进入的小程序页面[图片] 这一点很烦很烦，希望能支持下 默认可打开所有的，不然每次都得去配置。

本人使用的VUE框架。 代码提示： 1、vue代码； 2、点击事件代码； 3、php代码； 遇到的大坑重要提示： 3、必须是认证服务号； 4、必须是服务号绑定的微信小程序 5、https接口获取服务号的access_token 6、如果你的https接口没有问题，但是你的wx-open-launch-weapp标签没有显示或者点击无反应。有以下原因： 1》、vue代码样式问题，可以根据我的代码写样式，最好写成一样的。 2》、在微信开发者工具没有反应的话，最好在微信客户端试试。 3》、JSSDK版本是1.6.0。 4》、如果框架写上还不行，可以试试在文件main.js中，写上： Vue.config.ignoredElements = [‘wx-open-launch-app’, ‘wx-open-launch-weapp’]; 新增项： 5》、在小程序后台配置上业务域名，域名必须有证书。代码放到服务器上，用业务域名访问。 官方链接参考： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 还是不行的话，下方留言或者私信我。 1、<template> <div class=“cnt”> <div> <button @click=“onClickOpens”>新开页面跳转</button> </div> <div class=“test-position”> <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxx" path=“pages/index/index.html?user=123&action=abc” > <script type=“text/wxtag-template”> <style>.btn {width: 200px; height: 100px;}</style> <button class=“btn”>打开测试小程序</button> </script> </wx-open-launch-weapp> </div> </div> </template> 2、 onClickOpens() { this.$axios({ method: “POST”, url: “https://接口”, data: { url: window.location.href, }, }).then(function (res) { console.log(res); if (res.status == 200) { console.log(res.data.appid); wx.config({ debug: true, appId: res.data.appid, timestamp: res.data.timestamp, nonceStr: res.data.nonce_str, signature: res.data.sign, jsApiList: [“scanQRCode”], openTagList: [“wx-open-launch-weapp”], // 可选，需要使用的开放标签列表，例如[‘wx-open-launch-weapp’] }); wx.error(function (res) { console.log(res); // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 }); } }); }, 3、 [图片]

  that.setData({     selfOpenId :res.data.data.openid   }) wx.joinVoIPChat({       'roomType':'video',       'signature':res.data.data.signature,       'nonceStr':res.data.data.nonceStr,       'timeStamp':res.data.data.timeStamp,       'groupId':res.data.data.groupId,       'muteConfig':{         'muteMicrophone':false,         'muteEarphone':false,       },       success(res){         var openIdList =  res.openIdList || []         that.setData({           openIdList :openIdList         })       },       fail(res){         console.log(res)       }   });   wx.onVoIPVideoMembersChanged(function(res){     console.log(res);   })   //监听实时语音通话成员在线状态变化事件。有成员加入/退出通话时触发回调   wx.onVoIPChatMembersChanged(function(res){     that.setData({       openIdList: res.openIdList,      })   })   setTimeout(() => {     if(that.data.openIdList.length>2)     {        //订阅视频画面成员。对于视频房间，当成员超过两人时需进行订阅，否则只能看到最先加入房间的两人画面。        wx.subscribeVoIPVideoMembers({         openIdList: that.data.openIdList,         success(res){           console.log('subscribeVoIPVideoMembers success_b')         }       })      }   }, 5000);

如下图示，房间有四个视频框框。ABC三人进入房间。D最后进入，ABC看到的 D是黑屏 依次类推，最后一个进入房间的，别人看到的都是黑屏 已执行订阅 subscribeVoIPVideoMembers 接口 请官方和各路朋友支招..... [图片] [图片]

经测试，以下解决多人进入黑屏的正常代码。 joinvoip(){ var _this=this //加入 (创建) 实时语音通话 wx.joinVoIPChat({ signature: signature, nonceStr: nonceStr, timeStamp: timeStamp, groupId: groupId, roomType: 'video', success(res){ wx.hideLoading(); console.log(res) _this.setData({ openIdList: res.openIdList, }) //监听实时语音通话成员视频状态变化事件。 wx.onVoIPVideoMembersChanged(_this.handleVideoMemberChange); //监听实时语音通话成员在线状态变化事件。有成员加入/退出通话时触发回调 wx.onVoIPChatMembersChanged(_this.handleChatMemberChange); //监听实时语音通话成员通话状态变化事件。有成员开始/停止说话时触发回调 wx.onVoIPChatSpeakersChanged(function(res){ console.log('监听实时语音通话成员在线状态变化事件',res) _this.setData({ speakerList: res.openIdList, }) }) }, fail(err){ wx.hideLoading(); console.error('err',err) _this.setData({ joinVoIPChat:'fail' + err.errCode + err.errMsg }) } }) }, handleChatMemberChange(data){ console.log('handleChatMemberChange', data.openIdList); this.setData({ openIdList: data.openIdList }) }, handleVideoMemberChange(data){ //订阅视频画面成员。对于视频房间，当成员超过两人时需进行订阅，否则只能看到最先加入房间的两人画面 wx.subscribeVoIPVideoMembers({ openIdList: data.openIdList }) },

前言 图片保存是业务中非常常见的需求，本文带你解锁三种不一样的图片保存方式： 点击图片预览保存 点击按钮保存 长按图片保存 点击图片预览保存 点击图片预览保存先通过wx.previewImage接口预览图片，然后长按图片弹出底部弹窗保存图片。这种方式的缺点是会多一个预览的步骤 详细实现代码如下： [代码]wx.previewImage({ current: '', // 当前显示图片的http链接 urls: ['https://www.xxx.png', ...] // 需要预览的图片http链接列表 }) [代码] 如果只想显示一张，那urls数组值只写一个即可，但urls的类型必须是数组 current默认第一张，如果你有多张图片，可以选择其中一张作为优先预览显示的图片 实现效果如下： [图片] 点击按钮保存图片 微信官方并当前没有直接提供api实现保存图片到相册的功能，其实现的思路是利用canvas画布有提供api可保存到相册，将图片通过画布相关接口绘制成画布，再通过其api保存到相册即可。 详细的实现步骤如下 首先准备一个画布和按钮 [代码]<canvas canvas-id="myQrcode" style="width: 100%; height: 180px;" /> <button bindtap="onSave" data-value="myQrcode" style="margin-top: 100rpx">保存图片</button> [代码] 在合适的时机绘制画布（请求到图片后、生命周期等） [代码]const ctx = wx.createCanvasContext('myQrcode') wx.getImageInfo({ src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2369241864,430646211&fm=26&gp=0.jpg', // 图片地址 success: (res) => { console.log(res) ctx.drawImage(res.path, 0, 0, 375, 180) ctx.draw() } }) [代码] 点击按钮实现保存逻辑 [代码]onSave(res) { const { value } = res.currentTarget.dataset wx.canvasToTempFilePath({ canvasId: value, success: (res) => { const tempFilePath = res.tempFilePath; //保存二维码 wx.getSetting({ success: (res) => { console.log(res) const status = res.authSetting['scope.writePhotosAlbum'] if (!status) { // 引导用户授权... } else { // 保存图片到系统相册 this.saveImg(tempFilePath) } } }) }, fail: function(err) { console.log(err); } }); }, /* 保存图片 */ saveImg(tempFilePath) { wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success: function (res) { wx.showToast({ title: '保存图片成功', }) }, fail: function (err) { wx.showToast({ title: '保存图片失败' , }) } }) } [代码] 实现效果如下： [图片] 如果在组件中使用这种方式，画布相关的api第二个参数需要传入组件的this。 wx.saveImageToPhotosAlbum接口不支持网络路径。 wx.getImageInfo接口对于网络图片需先配置download域名才能生效。 长按图片保存 虽然官方也没有提供图片长按保存的功能，但是根据上节内容的实现方法配合wx.showActionSheet接口即可实现长按图片保存的功能 具体的实现步奏如下： 准备画布，监听长按操作 [代码]<canvas canvas-id="myQrcode" style="width: 100%; height: 180px" data-value="myQrcode" bindlongpress="showActionSheet"/> [代码] 2.长按图片弹出操作菜单 [代码]showActionSheet(res) { wx.showActionSheet({ itemList: ['保存图片'], success: (e) => { if(e.tapIndex === 0) { this.onSave(res) } }, fail (e) { console.log(e.errMsg) } }) }, [代码] 3.实现保存图片相关逻辑，拷贝上节的onSave及相关方法即可，思路都是一样的。 实现效果如下： [图片] [图片] 这三种方式保存图片的路径都是相同的。