实现微信分享

您所在的位置:网站首页 vue微信分享链接需要正式域名 实现微信分享

实现微信分享

2024-07-15 06:51| 来源: 网络整理| 查看: 265

前端微信分享的基本步骤:

一.绑定域名:

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这个不多说,微信开发的都应该清楚。

二.引入js文件:

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js。 请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK。 这里我采用了https,而且我用Vue-cli生成的项目,因此我将文件直接在index.html中引入。

三.通过config接口注入权限验证配置:

在下面会有实例说明,这里我只想说,接口可以放在自己写的AJAX回调用,将成功回调的值直接传入到wx.config需要的参数中。

四.通过ready接口处理成功验证

文档中说:“ config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。” 个人认为,这个可能是针对APP的,我的项目是微信的H5功能页面,如果想分享的话只能从右上角的“三个点点”中直接分享。(这仅是小生的个人想法,还望有学识有智谋的您给出确切的答案)。

五.通过error接口处理失败验证:这个我只是写到了项目中,不多做说明。

        其他的文档中写的很清楚,聪明的你可能不需要我更多的解释。微信API给的还算详细,很多地方直接调用就可以。只是对于初次使用的人来说,放到自己的环境中会有些许小坑很难发现,导致浪费很多时间,但解决后发现并不难处理。以下是我开发时的部分笔记,如有不足还望各位观众老爷多多提点:

1.触及某个页面分享时,需要得到当前该页面的Url,用来传给后台。换取config中的参数。

2.页面分享出去的窗口中对应着一个接口,该接口中包含一个Url,这个Url是分享者希望分享出去的页面链接。在这个Url中可以拼加自己需要的参数,实现分享的追踪。

如:var shareUrl = 'https://show.mypro.com/#/product_details?userId=' + userId + '&level=' + level;这个shareUrl可以直接传到街口的参数中。

3.分享页面的JS中必须配置有config,在config中有一个jsApiList,在其中放置需要使用的JS接口列表,并以字符串的形式写入。

//接口入住权限验证配置 wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: appId, // 必填,公众号的唯一标识 timestamp: timestamp, // 必填,生成签名的时间戳 nonceStr: nonceStr, // 必填,生成签名的随机串 signature: signature, // 必填,签名,见附录1 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage' ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 });

4.在config下方,有一个ready方法,该方法用来初始化我们要应用的js列表,而且任何方法一定要放在config方法后才可以。 如在Vue中,可以将该方法放在mounted中,并在其中放入‘分享给朋友’,‘分享至朋友圈’的js接口。 值得注意的是:两个接口并不是写在触发事件的方法中(如@click='Fun'),而是直接在页面初始化的时候,放在ready中直接被调用。

wx.ready(function() { wx.onMenuShareAppMessage({ title: shareTitle, // 分享标题 desc: 'This is a test!', // 分享描述 link: shareUrl, // 分享链接 imgUrl: imgUrl, // 分享图标 type: '', // 分享类型,music、video或link,不填默认为link dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 success: function() { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); wx.onMenuShareTimeline({ title: shareTitle, // 分享标题 link: shareUrl, imgUrl: imgUrl, // 分享图标 success: function() { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); });

 以上部分代码放在Vue的mounted中,当页面组件生成的时候直接被调用。

5.坑点

    个人认为比较坑的点(1):因为我的项目为单页式应用,并且采用了Vue中的hash模式,因此项目路径中带有#号的部分,微信可能会在其前面加一个?号(不知未来还会不会有变化)。这样当自己拼值时(如“?userId=123”)则需要取第二个问号后的值。之前无论如何都取不到自己拼在路径后的值,复制链接后才发现,微信默默地给加了一个问号和其他参数在其中。

    个人认为比较坑的点(2):我的项目中,如果在公众号中浏览各个界面,直接都是通过路由进行跳转的。但当浏览者从分享窗口进入后,他从分享页按着正常路由跳转到其他页面,其他页面的逻辑中如果有需要获取当前页面url的需要,会发现这个url和正常路由跳转的不一样。

    例如:

    这是正常跳转后的路径:https://show.mypro.com/#/firPage?userId=1     这是从分享页跳转后的路径:https://show.mypro.com/?#/firPage?userId=1

    非常明显,如果根据问号的索引去获取当前Id,我永远获取不到。不知是否和坑(1)中同一个原因,因此我独立写了出来。因为是第一次做这个地方的东西,而且只能在移动端环境,我测了很多遍才发现。得知真相的我宛如醍(bei)醐(gou)灌(ri)顶(le)。可能是我经验太少,才如此踩坑。

6.后续坑点补充:

    (1) 微信分享中:只要是分享出去的页面,如果为hash模式(在路由中带有#号),微信都会在#的前边给加一个‘?’。虽然微信API中有说过关于#的问题。但是很容易单纯的认为,仅仅在需要分享的页面的url会被修改,这也是我疏忽的一个地方。

    (2) 苹果和iPhone打架后,我的微信功能页也莫名其妙的受到了影响,虽然我的公众号没有涉及到打赏的功能。具体问题如下:

       我的分享shareUrl为:

var shareUrl = 'https://migxin.mypro.com/#/product_details?custId=null&shareCustId=' + custId + '&shareProductId=' + productId;

   通过安卓分享出去的页面可以成功获取页面url后的值,并且成功显示页面。url如下:

https://migxin.mypro.com/#/product_details?custId=7&shareCustId=7&shareProductId=1223

 但是在iphone中,页面URl后的值被截取掉了,页面因为无法获取值而无法显示。url如下:

https://migxin.mypro.com/?from=timeline#/product_details

7.有关微信公众号的关注页面:

    目前我们不用自己去做公众号的关注页面,进入公众号,查看历史消息,在该页面会提供进入公众号的接口按钮。在这个页面中,按钮的状态为“进入公众号”,“关注”。可以自行判断当前用户是否已经关注公众号。该页面的链接也是直接可以复制得到的,对于迭代期比较紧张的情况 will do the trick~可以直接拿来使用。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

广东:

在该分享的页面 created钩子内去调用微信验签  

在mounted钩子内去调用wx.ready的方法,最好把这个方法加上延时,延时500毫秒

1.是微信验签方法

 (分享配置方法)

 

 -------------------------------------------------------------------------------------------------------------------------------------------------

基本案例,实现一个拍照、录音、结束录音的功能

Document img { width: 200px; } #txt { font-size: 30px; } 拍照 开始录音 结束录音 // 测试帐号提供的信息: // appID:wx248164a664432d19 // appsecret:0b67e59eb4f9ff80489a02111f5a34ca /* 微信JS-SDK的使用步骤: 1 引入 sdk 的js文件 2 配置权限信息 */ // 重要:这些操作步骤应该由后端通过写代码完成!!! // 为了能够拿到config中需要的签名信息,我们需要先 // 1 获取 access_token // 2 通过 access_token 获取到 ticket // 3 通过 tiket 以及其他信息,加密处理后,获取到 signature // 1 获取 access_token // https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx248164a664432d19&secret=0b67e59eb4f9ff80489a02111f5a34ca // access_token: "9_qtmr8tVs-Vbz9J--n8QRG82t-TscCBwEEBPy1cu4AaUb7Wp6cyPJAaQeuzcGF6k26DrBEWhoK6qVCX2xXLNll3PPfniFQzRrsMz_G3KmvvvBjrkF51sIeNrUvAIXOIgABABSM" // 2 获取 ticket // https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=9_qtmr8tVs-Vbz9J--n8QRG82t-TscCBwEEBPy1cu4AaUb7Wp6cyPJAaQeuzcGF6k26DrBEWhoK6qVCX2xXLNll3PPfniFQzRrsMz_G3KmvvvBjrkF51sIeNrUvAIXOIgABABSM&type=jsapi // ticket: "HoagFKDcsGMVCIY2vOjf9joijlBx41Uetbsa1sudsgDKkOJXtniXoSksYy7BvH88vNyYuZSTkTFN9-p6sm9Qwg" // 3 准备签名算法,这一步实际中都是后端操作的,前端不需要写的,前端只需调个接口获取下面的配置信息即可 const signatureObj = { // 随机字符串 noncestr: 'yinxiangpaidayu', // ticke 门票 jsapi_ticket: 'HoagFKDcsGMVCIY2vOjf9joijlBx41Uetbsa1sudsgDKkOJXtniXoSksYy7BvH88vNyYuZSTkTFN9-p6sm9Qwg', // 时间戳(使用数值类型的时间戳) timestamp: new Date() - 0, // 微信内页地址:(注意:地址需要带有协议) url: 'http://czwblog.com:8080/' // url: 'czwblog.com:8080' } const signatureArr = [] for (let k in signatureObj) { signatureArr.push(k + '=' + signatureObj[k]) } // 按照字段名的ASCII 码从小到大排序 signatureArr.sort() let signatureStr = signatureArr.join('&') // 进行sha1加密 signatureStr = sha1(signatureStr) // alert(signatureStr) // console.log(signatureStr) // wx 是 jweixin 这个js文件中提供的全局变量: wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'wx248164a664432d19', // 必填,公众号的唯一标识 // 注意:此处的时间戳以及noncestr必须使用上面对象中提供的数据!!! timestamp: signatureObj.timestamp, // 必填,生成签名的时间戳 nonceStr: signatureObj.noncestr, // 必填,生成签名的随机串 signature: signatureStr, // 必填,签名,签名生成算法见附录1 jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'onVoicePlayEnd', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard' ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2,这里把所有的接口都写过来了,一般用几个写几个 }) wx.ready(function () { // 此处,就可以调用 微信提供的SDK 了 // 点击按钮实现拍照: document.getElementById('btn').addEventListener('click', () => { // 调用手机摄像头以及访问手机相册功能: wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 localIds.forEach((localId) => { // 为每一个id生成一个图片 var img = new Image() img.src = localId document.getElementById('pic_box').appendChild(img) }) } }); }) // 实现录音功能: document.getElementById('startRecord').addEventListener('click', () => { wx.startRecord(); }) document.getElementById('stopRecord').addEventListener('click', () => { wx.stopRecord({ success: function (res) { // localId 表示录音的id var localId = res.localId; wx.translateVoice({ localId, // 需要识别的音频的本地Id,由录音相关接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { document.getElementById('txt').innerText = res.translateResult } }); } }); }) });

 

 

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3