微信小程序web-view，微信支付，分享
项目架构
文章图片
image.png
文章图片
image.png
文章图片
image.png 一、微信支付
H5代码 在需要调用支付的地方写此段代码，需要注意的地方 获取package的时候如下图即可
文章图片
image.png
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
axios
.get('请求地址+参数').then(res => {
let data=https://www.it610.com/article/res.data
//alert(data.package)
if(res){
let params='?timestamp='+data.timeStamp+'&nonceStr='+data.nonceStr
+'&'+data.package+'&signType='+data.signType
+'&paySign='+data.paySign+'&orderId='+that.payCodeInfo;
// let params=JSON.stringify(res.data)
let path = '/page/wxpay/wxpay'+params;
//通过JSSDK的api使小程序跳转到指定的小程序页面
wx.miniProgram.navigateTo({
url: path
});
}})
}
})
微信waypay.js代码
onLoad: function (options) {
console.log(options)
let orderid = options.orderId
let that=this;
wx.requestPayment({
timeStamp: options.timestamp,
nonceStr: options.nonceStr,
package: 'prepay_id='+options.prepay_id,
signType: options.signType,
paySign: options.paySign,
success:function(res){
console.log(res)
var pages=getCurrentPages();
//当前页面
var currpage=pages[pages.length-1]
var prevpage=pages[pages.length-2]
prevpage.setData({
web_src: 'https://xxxxx/?orderId=' + orderid//赋值会自动跳转到当前页面，你就可以在前端H5页面中通过url参数接收，然后判断是否支付成功后的操作
})
wx.navigateBack();
},
fail:function(res){
var pages = getCurrentPages();
//获取你页数集
console.log(pages)//打印一下自己看一下
// //当前页面
var currpage = pages[pages.length - 1]
var prevpage = pages[pages.length - 2]
// prevpage.setData({
//web_src: 'https://xxxx.com/?orderId=' + orderid//支付失败也可以写判断，我这里他就是自动自己回到付款页面，我就不在传值判断了
// })
wx.navigateBack();
},
})
},
H5页面代码判断 这里的获取指定url参数方法有误，请注意查看
文章图片
image.png
//获取指定的url中的参数
GetUrlParam(paraName) {
var url = document.location.toString();
var arrObj = url.split("?");
if (arrObj.length > 1) {
var arrPara = arrObj[1].split("&");
var arr;
for (var i = 0;
i < arrPara.length;
i++) {
arr = arrPara[i].split("=");
if (arr != null && arr[0] == paraName) {
return arr[1];
}
}
return "";
} else {
return "";
}
}
openid的问题
小程序可以通过
wx.login({
success:function(res){
//code
//通过res.code向后端请求接口获取openid，然后将openid传到H5页面中
let promise = new Promise(function (resolve, reject) {
wx.request({
url: "https://xxxxx.com/xxx?code=" + code,
header: {
'content-type': 'application/json' // 默认值
},
method: 'GET',
success: function (res) {
resolve(res.data);
reject("调用失败");
},
fail: function (res) {
resolve(res);
reject("调用失败");
}
})
}).then(function (data) {
that.setData({
web_src: `https://xxxxx.com/?openid=${data.openid}`
})
});
}
}
})
【微信小程序web-view，微信支付，分享】H5代码
GetUrlParam(paraName) {
var url = document.location.toString();
var arrObj = url.split("?");
if (arrObj.length > 1) {
var arrPara = arrObj[1].split("&");
var arr;
for (var i = 0;
i < arrPara.length;
i++) {
arr = arrPara[i].split("=");
if (arr != null && arr[0] == paraName) {
return arr[1];
}
}
return "";
} else {
return "";
}
}
//获取指定参数的值
let openid=this.GetUrlParam('openid')
localStorage.setItem('openid',openid)
二、微信分享
H5页面代码
//首先在H5页面想要分享的页面写传递给小程序参数
const agent = navigator.userAgent.toLowerCase();
const isWechat = agent.match(/MicroMessenger/i) == 'micromessenger';
//为了兼容判断是否为微信，微信小程序、公众号环境
if(this.isWechat){
//微信环境
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
//小程序环境
var simg_url='设置的分享图的地址'
var stit='设置的分享的标题'
var info={
imgUrl:simg_url,
stit:stit
}
var json=JSON.stringify(info)//转换成json字符串
wx.miniProgram.postMessage({data:json})
}
})
}else{
//非微信环境
}
小程序代码
page/index/index.js
//接收网页传过来的值
getmessage:function(res){
console.log(res)
let data=https://www.it610.com/article/res.detail.data
//传过来的值不会替换删除而是累加，所以取最后一条数据
let lastData=res.detail.data[res.detail.data.length-1];
let json=JSON.parse(lastData)//转换成json对象
console.log(json.imgUrl)
this.setData({
shareImg: json.imgUrl,
sharetit: json.stit
})
},
//点击右上角三点分享触发
onShareAppMessage: function (options) {
//普通的分享，所有页面将会是您传递进来的标题和图片
// let return_url = encodeURIComponent(options.webViewUrl)
//var path ="page/share/share?shareUrl=" + return_url;
//根据当前的url路由关键词判断，其他的都为默认图片标题
var path =''
let return_url = encodeURIComponent(options.webViewUrl)
if (return_url){
if (return_url.indexOf("detail") == -1 && return_url.indexOf("share") == -1) {
return_url = 'https://xxxx.com/'
this.setData({
shareImg: '默认图片',
sharetit: '默认标题',
})
} else {
return_url = encodeURIComponent(options.webViewUrl)
}
}else{
//为了兼容有些手机获取不到当前的h5url
return_url = 'https://xxxx.com'
}
path = "page/share/share?shareUrl=" + return_url;
return {
title: this.data.sharetit,
path: path,
imageUrl: 'https://xxxx.com'+this.data.shareImg,
}
}
page/share/share.wxml
page/share/share.js
page({
/**
* 页面的初始数据
*/
data: {
share_src:''
},/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if(options &&options.shareUrl){
this.setData({
share_src:decodeURIComponent(options.shareUrl)
})
}
},
})
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）