uniapp对接微信公众号H5微信支付、分享、小程序隐藏右上角分享胶囊

1、导包

npm install jweixin-module --save

2、在创建wxApi.js文件，将方法封装在js文件里

/*微信(公众号)支付方法
*/
const wx = require('jweixin-module');// 微信支付
const wexinPay = (data, callback, errorCallback) => {let [appId, timestamp, nonceStr, signature, packages, sign] = [data.appid, data.timeStamp, data.nonceStr, data.app_sign,data.package, data.app_sign];wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId, // 必填，公众号的唯一标识timestamp, // 必填，生成签名的时间戳nonceStr, // 必填，生成签名的随机串signature, // 必填，签名，见附录1jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});WeixinJSBridge.invoke('getBrandWCPayRequest', {appId: appId, //公众号名称，由商户传入timeStamp: timestamp, //时间戳，自1970年以来的秒数nonceStr: nonceStr, //随机串package: packages,signType: 'MD5', //微信签名方式：paySign: sign //微信签名},function(res) {if (res.err_msg == 'get_brand_wcpay_request:ok') {// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。//支付成功回调callback(res)} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {//支付失败回调errorCallback(res)}})
}// 微信分享
const wexinShare = (data, callback, errorCallback) => {let [appId, timestamp, nonceStr, signature, packages, sign,name,link,url] = [data.appId, data.timestamp, data.nonceStr, data.signature,data.package, data.app_sign,data.name,data.link,data.url    ];wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId, // 必填，公众号的唯一标识timestamp, // 必填，生成签名的时间戳nonceStr, // 必填，生成签名的随机串signature, // 必填，签名，见附录1jsApiList: ["onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。// 设置分享内容wx.onMenuShareAppMessage({title: '', // 分享标题desc: name, // 分享描述link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl:url,type: '', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function (res) {console.log("分享成功",name,link,url);// 设置成功callback(res)},fail:function(err){errorCallback(err)}});});
}// 隐藏右上角胶囊
const wexinHide = (data, callback, errorCallback) => {let [appId, timestamp, nonceStr, signature] = [data.appId, data.timestamp, data.nonceStr, data.signature];wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId, // 必填，公众号的唯一标识timestamp, // 必填，生成签名的时间戳nonceStr, // 必填，生成签名的随机串signature, // 必填，签名，见附录1jsApiList: ["hideOptionMenu"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。wx.hideOptionMenu();});wx.error(function(res){console.log("信息验证失败",res);// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});}// 导出这三个方法
export default {wexinPay,wexinShare,wexinHide,
}

3、将方法挂入全局main.js

//导入
import wxApi from './common/wxApi.js'
//挂载
Vue.prototype.$wxPay = wxApi.wexinPay
Vue.prototype.$wxShare = wxApi.wexinShare
Vue.prototype.$wxHide = wxApi.wexinHide

4、调用微信支付

            //支付订单payorder() {const that = this;// 调用后台接口 获取jsapy中wxpay 所需要的参数// 接口根据自己的业务来写that.$http.post("api/agent_goods/pay_order", {order_id: that.order_id, //pay_type: 4,}).then(res => {console.log("支付订单", res);if (res.status_code == 200) {console.log('微信公众号支付', res)// 调用挂载在全局中的方法 将后端获取的数据传入方法中// 千万注意 res.data获取的参数要与 上边封装方法中数据接口的参数名一致that.$wxPay(res.data, function(res) {/*成功的回调*/console.log('成功', res)uni.showToast({title: "支付成功",})setTimeout(() => {that.toPath('/pages/suppliers/orderList')}, 1000)}, function(e) {/**失败的回调*/that.$tool.toast('支付失败或取消支付')console.log("支付失败或取消支付", e)})}})},

5、调用微信分享

const that = this
// 调用后端接口 将当前分享页面的链接传给后端 后台通过域名进行授权
this.$http.get('api/user/signature',{url:'url'}).then(res=>{console.log("获取分享验证",res);let data1 = res.data; // 得到分享需要的参数 appId 公众号的唯一标识，timestamp 生成签名的时间戳,nonceStr 生成签名的随机串 ,signature 签名data1.name = that.goodsInfo.goods_name; // 分享描述data1.link = 'url'; // 分享链接data1.url = that.goodsInfo.image; // 分享图片路径if (res.status_code == 200) {// 调用封装好的分享方法that.$wxShare(data1, function (res) {/*成功的回调*/console.log('成功',res)}, function (e) {/**失败的回调*/// that.$tool.toast('分享失败或取消分享')console.log("分享失败或取消分享",e)})

注意:

① 公众号分享只能通过右上角分享触发,默认分享的是当前页面

② 分享的页面链接必须在后台配置 js接口安全域名和网络授权域名

6、隐藏右上角胶囊

onLoad() {const that = this// 隐藏右上角按钮功能let url = that.$http.baseUrl2+window.location.pathname;console.log("当前页面完整路径",url);that.$http.get('api/user/signature',{url:url}).then(res=>{console.log("隐藏验证",res); let data1 = res.data; // 得到分享需要的参数 appId 公众号的唯一标识，timestamp 生成签名的时间戳,nonceStr 生成签名的随机串 ,signature 签名if (res.status_code == 200) {that.$wxHide(data1)} else {that.$tool.toast(res.message)}})},

uniapp对接微信公众号H5微信支付、分享、小程序隐藏右上角分享胶囊相关推荐

前端实现微信公众号h5页面跳转小程序-成功案例
微信公众号h5页面跳转小程序-成功案例微信公众号h5页面跳转小程序-成功案例,标题已经明确说明,h5页面可以正常跳转微信小程序官网说可以,不是我说的文章目录微信公众号h5页面跳转小程序-成功案 ...
微信公众号h5页面跳转小程序
微信公众号h5页面跳转小程序文章目录微信公众号h5页面跳转小程序前言一.注意二.使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置前言问:h5 页面可以跳转至微信小程序吗? ...
微信公众号可快速创建“门店小程序” 不用开发
"门店小程序"是啥?"门店小程序"是小程序的一项新能力.无需开发,商户就可在微信公众号后台快速创建"门店小程序".这个小程序类似一张&quo ...
微信公众号可以关联多少个小程序？
微信公众号可以关联多少个小程序? 微信公众号关联小程序功能介绍为扩展小程序的使用场景,便于用户使用小程序的服务.微信公众号可关联小程序,并在公众号图文消息.自定义菜单.模板消息等场景中使用已关联的小 ...
微信公众号计算机编程,微信公众号群发文章怎么添加小程序？-电脑教程
2017年4月20日微信发布公告称,微信公众平号群发文章支持添加小程序功能,这对于推广小程序来说,无疑是不错的途径.那么微信公众号群发文章怎么添加小程序?以下是华强电子网带来的详细教程. 微信公众号群 ...
微信公众号发送小程序卡片_微信公众号群发文章支持添加小程序卡片
2017年4月20日微信发布公告称,微信公众平号群发文章支持添加小程序功能,这对于推广小程序来说,无疑是不错的途径.那么微信公众号群发文章怎么添加小程序?下面爱站技术频道的小编带来的详细教程. 微信公 ...
微信公众号如何结合答题活动小程序进行拓客引流？
如果你是新媒体运营者,如果你也有自己的微信公众号,那么,相信你也会问过这么的一个问题:微信公众号引流的方法有哪些? 你会看见的回答是这样的: 是这样的: 还有这样的: 然而,大部分都是上面那些套路,是 ...
alert点击确定后跳转_公众号/h5 跳转到小程序填坑指南
公众号/h5 跳转到小程序填坑指南本文介绍的是使用微信开放标签 wx-open-launch-weapp 实现微信浏览器内网页跳转到任意合法合规的小程序里,官方要求微信版本为:7.0.12 及以上, ...
让微信公众号自动回复可以跳转小程序的消息
1.在公众号中关联对应的小程序点击公众号左侧菜单栏"小程序管理",点击"添加"按钮. 添加小程序,点击"关联小程序" 输入对应的小 ...
微信公众号如何关联答题活动小程序
通常,如果想做一个答题活动,然后将它作为微信公众号的线上答题的唯一入口,那么就要首先关联答题活动小程序了. 微信公众号关联小程序具体操作步骤如下: 1.进入你的公众号页面,点击"小程序管理& ...

uniapp对接微信公众号H5微信支付、分享、小程序隐藏右上角分享胶囊

uniapp对接微信公众号H5微信支付、分享、小程序隐藏右上角分享胶囊相关推荐

最新文章

热门文章