h5在微信自定义分享php,微信公众号h5页面自定义分享

transparent

//配置公总号自定义分享//需要引入jauery

$.ajax({

method:‘GET‘,

url: window.BASE_URL+ ‘api/v1/sharding/get‘,

contentType:‘application/x-www-form-urlencoded‘,async: false,

dataType:"json",

data: {

url: location.href.split(‘#‘)[0],

},

success: function(data) {

console.log(data.data)var signatures =data.data

wx.config({

debug:false, //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

appId: signatures.appid, //必填,公众号的唯一标识

timestamp: ((signatures.timeStamp).toString()).substring(0, 10), //必填,生成签名的时间戳= $data[‘timestamp‘]?>

nonceStr: signatures.nonce_str, //必填,生成签名的随机串= $data[‘noncestr‘]?>

signature: (signatures.signature).toLowerCase(), //必填,签名= $data[‘signature‘]?>

jsApiList: [‘openLocation‘, ‘getLocation‘, ‘translateVoice‘,‘onMenuShareTimeline‘,‘onMenuShareAppMessage‘,‘onMenuShareQQ‘,‘onMenuShareWeibo‘,‘onMenuShareTimeline‘,‘onMenuShareQZone‘]//这里先声明我们要用到打开地图的JS接口

});

}

});

wx.ready(function() {

wx.checkJsApi({

jsApiList: [‘chooseImage‘], //需要检测的JS接口列表,所有JS接口列表见附录2,

success: function(res) {//以键值对的形式返回,可用的api值true,不可用为false//如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

}

});var shareUrl = ‘https://www.gzkny.com/h5/ziyemian/souquan.html?openid=‘ +openid;var obj = { //朋友圈

title: ‘康尼雅口腔医院‘, //分享标题

desc: ‘‘, //分享描述

link: shareUrl, //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致//该链接是重定向链接,因为需要获取用户code,但是该链接又无法直接写微信获取code的链接,//所以需要点击后重新加载新的页面,来实现重定向,重新打开获取code的微信链接,实现获取用户信息的功能;

imgUrl: ‘https://i.loli.net/2019/05/29/5ceded0eaa03e44687.jpg‘,

fail: function(res) {

alert(JSON.stringify(res));

}

};var obj1 = { //好友

title: ‘康尼雅口腔医院‘, //分享标题

desc: ‘‘, //分享描述

link: shareUrl, //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致//该链接是重定向链接,因为需要获取用户code,但是该链接又无法直接写微信获取code的链接,//所以需要点击后重新加载新的页面,来实现重定向,重新打开获取code的微信链接,实现获取用户信息的功能;

imgUrl: ‘https://i.loli.net/2019/05/29/5ceded0eaa03e44687.jpg‘, //分享图标

fail: function(res) {

alert(JSON.stringify(res));

}

};//2.1 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口

wx.onMenuShareAppMessage(obj1);//2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口

wx.onMenuShareTimeline(obj);//2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口

wx.onMenuShareQQ(obj);//2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口

wx.onMenuShareWeibo(obj);//2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口

wx.onMenuShareQZone(obj);//7.2 获取当前地理位置

wx.getLocation({

type:‘wgs84‘, //默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入‘gcj02‘

success: function(res) {var latitude = res.latitude; //纬度,浮点数,范围为90 ~ -90

var longitude = res.longitude; //经度,浮点数,范围为180 ~ -180。

var speed = res.speed; //速度,以米/每秒计

var accuracy = res.accuracy; //位置精度

var result =[]

result.push(longitude)

result.push(latitude)

result=JSON.stringify(result);

localStorage.setItem("result", result);

longg()

}

});

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现自定义微信分享当前页,需要在uniapp中使用微信JS-SDK,以下是大致的步骤: 1. 在公众号后台开启JS接口安全域名,并将当前网站的域名加入安全域名列表。 2. 在uniapp项目中安装并引入jweixin-1.6.0.js,可以通过npm命令安装,也可以手动下载并引入。 3. 在vue组件的mounted钩子函数中初始化微信JS-SDK,代码如下: ``` mounted() { // 初始化微信JS-SDK this.initWXSDK() }, methods: { initWXSDK() { // 替换为你自己的appId和当前页面地址 const appId = 'yourAppId' const url = window.location.href const timestamp = new Date().getTime() const nonceStr = 'yourNonceStr' // 调用后端接口获取微信JS-SDK的签名signature axios.get('/api/getSignature?url=' + encodeURIComponent(url)) .then(res => { const signature = res.data.signature // 配置微信JS-SDK wx.config({ debug: false, appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] }) // 初始化成功后调用分享函数 wx.ready(() => { this.shareToWechat() }) }) .catch(err => { console.error(err) }) }, shareToWechat() { // 获取当前页面的标题、描述和图片 const title = '分享标题' const desc = '分享描述' const imgUrl = '分享图片地址' // 分享给朋友 wx.updateAppMessageShareData({ title: title, desc: desc, link: window.location.href, imgUrl: imgUrl, success: function () { // 分享成功后的回调函数 } }) // 分享到朋友圈 wx.updateTimelineShareData({ title: title, link: window.location.href, imgUrl: imgUrl, success: function () { // 分享成功后的回调函数 } }) } } ``` 4. 在后端接口中生成微信JS-SDK的签名signature,代码如下: ``` const crypto = require('crypto') const request = require('request') const config = { appId: 'yourAppId', appSecret: 'yourAppSecret' } async function getSignature(url) { const access_token = await getAccessToken() const nonceStr = createNonceStr() const timestamp = Math.floor(Date.now() / 1000) const jsapi_ticket = await getJsApiTicket(access_token) // 按照微信JS-SDK的规则生成签名signature const str = `jsapi_ticket=${jsapi_ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}` const signature = crypto.createHash('sha1').update(str, 'utf-8').digest('hex') return { appId: config.appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature } } function createNonceStr() { return Math.random().toString(36).substr(2, 15) } function getAccessToken() { return new Promise((resolve, reject) => { const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appId}&secret=${config.appSecret}` request(url, (err, res, body) => { if (err) { reject(err) } else { const data = JSON.parse(body) if (data.access_token) { resolve(data.access_token) } else { reject(data.errmsg) } } }) }) } function getJsApiTicket(access_token) { return new Promise((resolve, reject) => { const url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi` request(url, (err, res, body) => { if (err) { reject(err) } else { const data = JSON.parse(body) if (data.ticket) { resolve(data.ticket) } else { reject(data.errmsg) } } }) }) } module.exports = { getSignature } ``` 这样就完成了在uniapp h5自定义微信分享当前页的实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值