关于微信分享:Vue中的微信分享

微信分享遇到的问题一开始的时候,微信的sdk,是通过script引入的。 然而,因为咱们的页面是短链接,会有一次转换变成长链接,这就造成了在咱们的零碎不能失常应用微信分享。 最终通过N屡次失败,不得不重头再来,一步步的走下来,最终发现是还是短链接转长链接造成的问题,因为在初始化的时候是进来的时候是短链接,因为是通过script在结尾引入的,所以微信sdk曾经监控到了,然而咱们 wxsdk 配置外面的 link 是咱们要分享的长链接,微信会认为这是有效配置,所以微信分享不失效。 如果你的微信分享还是应用script引入的形式,然而微信分享不失效,能够试试换一种形式 解决问题的代码PS:多余代码就不写了 main.jsimport wxInit from '@/utils/wxjsdk'wxInit.install()wxsdk.js// 微信的配置import Vue from 'vue'// 咱们本人查要分享的数据的接口import { getWxConfig, getWxShareData } from '../api/bvent.js'import Store from '@/store'// 引入微信sdk的包import wx from 'weixin-js-sdk'window.wx = wxconst wxSdk = { install() { Vue.prototype.$wxSdkInit = wxSdk.init }, init() { getWxConfig({ url: location.href }).then(res => { wx.config({ debug: false, // 生产环境须要敞开debug模式 appId: res.appId, // appId通过微信服务号后盾查看 timestamp: res.timestamp, // 生成签名的工夫戳 nonceStr: res.nonceStr, // 生成签名的随机字符串 signature: res.signature, // 签名 jsApiList: [ // 须要调用的JS接口列表 'updateTimelineShareData', // 分享给好友 'updateAppMessageShareData', // 分享到朋友圈 'onMenuShareAppMessage', // 1.0 分享到敌人 'onMenuShareTimeline' // 1.0分享到朋友圈 ] }) wx.ready(function() { getWxShareData({ id: Store.getters.bventId }).then(e => { let shareData = { title: e.shareTitle, // 分享题目 desc: e.shareDescribe, // 分享形容 link: e.shareLink, // 分享链接 imgUrl: e.shareImage && e.shareImage.indexOf('http') === -1 ? window.domainConfig.fileServer + '/' + e.shareImage : e.shareImage // 分享图标 } wx.ready(function() { wx.onMenuShareAppMessage(shareData) wx.onMenuShareTimeline(shareData) wx.updateAppMessageShareData(shareData) wx.updateTimelineShareData(shareData) }) }) }) }) }}export default wxSdkApp.vue<template> <router-view /></template><script>export default { name: 'App', mounted() { // 微信分享应用的,所以判断微信浏览器执行该办法 let ua = navigator.userAgent.toLowerCase() var isWeixin = ua.indexOf('micromessenger') !== -1 if (isWeixin && !/miniprogram/.test(ua)) { this.$wxSdkInit() } }}</script>

June 10, 2022 · 1 min · jiezi

关于微信分享:记录uniapp调用微信分享出现invalid-signature的问题

先说解决方案因为我是用uni.request,所以须要在header加个以下代码。 uni.request({header: { "Content-Type": "application/x-www-form-urlencoded"}...})认为是其余url的问题,网上各种办法都试了就是不行。前面认真比照了下,发现post的data格局不一样,须要header那边加个"Content-Type": "application/x-www-form-urlencoded",真是钻研了好久好久才找到问题所在。

June 1, 2022 · 1 min · jiezi

自定义微信分享功能微信jssdk使用总结

需求:vue项目移动端要求用户在公众号中分享出去的链接是图片+文字+标题的形式。而不是默认的要实现的效果如图所示: 不设置时,分享的默认效果,如下图所示: 几个要注意的地方:wx.config 所有的配置项的数据都是后台返回的wx.config配置项的参数大小写一定要按照官网文档来,区分大小写,但是获取到的后台返回的字段可以自由定义,这个时候要注意后台返回的数据字段名称是否和官网的一致,在这块有个问题找了半天,结果最后发现wx.config配置项里面后台返回的res.data.noncestr中noncestr为小写,而自己没有细看一直以为也是nonceStr.导致config:fail.分享时,请求的url不能带有hash值等,所以要进行截取具体参考代码如下所示:` wxShared() { let newUrl = window.location.href.split("#")[0]; // let url = newUrl; this.$store.dispatch("GetTicketJSAPI", url).then(res => { let params = { debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: "wx3dab174110e5f840", // 必填,企业微信的corpID timestamp: res.data.timestamp, // 必填,生成签名的时间戳*************** nonceStr: res.data.noncestr, // 必填,生成签名的随机串 必填,生成签名的随机串*************** signature: res.data.signature, // 必填,签名*************** jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"] }; wx.config(params); //通过config接口注入权限验证配置 wx.ready(function() { // config信息验证成功后会执行ready方法 //通过ready接口处理成功验证 wx.onMenuShareAppMessage({ // 分享给朋友 title: "声动语商学苑", // 分享标题 desc: "好语商引领自信人生 · “一站式”专业青少儿语商培养教育品牌", // 分享描述 link: res.data.str, // 分享链接 imgUrl: "http://www.shengdongyushang.com/upload/asserts/sdys_logo1.png", // 分享图标 type: "", // 分享类型,music、video或link,不填默认为link dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空 success: function(res) { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); wx.onMenuShareTimeline({ //分享朋友圈 title: "声动语商学苑", // 分享标题 desc: "好语商引领自信人生 · “一站式”专业青少儿语商培养教育品牌", link: res.data.str, imgUrl: "https://qccdata.qichacha.com/AutoImage/052236e320f34be80991ce01fd8cd138.jpg?x-oss-process=image/resize,w_120", // 分享图标 success: function(res) { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); }); });},`如果对你有所帮助,麻烦点个赞再走吧 ^_^

June 19, 2019 · 1 min · jiezi

h5微信自定义分享

为了h5页面在微信分享效果更好,我们接入了 h5 微信sdk,下面对接入流程总结。1、在项目中引用微信的js-sdkjs-sdk地址(支持https):http://res.wx.qq.com/open/js/... 或者 http://res2.wx.qq.com/open/js... 2、在微信公众平台绑定安全域名3、配置config在1,2步操作成功后,进入我们写代码正题,我们需要在入口js中配置config wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', timestamp: , nonceStr: '', signature: '', jsApiList: [] });参数说明:appId:公众号的唯一标识,在公众号中可以取到;timestamp:生成签名的时间戳nonceStr: 生成签名的随机串signature: 最后生成的签名jsApiList: 需要使用的JS接口列表,我们这里是用分享接口,将分享几个api接口填进去,例如:['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareQQ'](备注:出于安全考虑,微信要求开发者必须在服务器端实现签名的逻辑,故timestamp, nonceStr,signature 可以通过请求自己服务器返回。如果有兴趣了解是如何生成的,如下图1所示。) 图1 4、wx.ready中配置自定义分享信息config 配置玩成功后,可以在wx.ready回调填写自定义的信息,如下: wx.ready(function () { wx.onMenuShareQQ({ //分享QQ title: data.wxTitle, // 分享标题 link: data.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致且分享的地址不要带端口 desc: data.wxDesc, imgUrl: data.wxImg || defaultIcon, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 // alert(e); }, cancel: function () { // 用户取消分享后执行的回调函数 } }); wx.updateAppMessageShareData({ // 分享好友 title: data.wxTitle, // 分享标题 link: data.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致且分享的地址不要带端口 desc: data.wxDesc, imgUrl: data.wxImg || defaultIcon, // 分享图标 type: "", // 分享类型,music、video或link,不填默认为link dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空 success: function (e) { // 用户点击了分享后执行的回调函数 // alert(e); } }); wx.onMenuShareTimeline({ // 分享朋友圈 title: data.wxTitle, // 分享标题 link: data.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致且分享的地址不要带端口 desc: data.wxDesc, imgUrl: data.wxImg || defaultIcon, // 分享图标 success: function (e) { // 用户点击了分享后执行的回调函数 // alert(e) } }); });总结到这一步分享的操作基本就完成了,建议在测试时将debug打开,看看分享提示,从而判定是否分享成功。如果不成功,可以参考一下在开发时候遇到的坑。 ...

May 30, 2019 · 1 min · jiezi

记录一次开发微信网页分享

需求最近在做一个项目需求,分享领好书活动,获取用户的个人信息以及unionID,并诱导用户分享给好友或朋友圈,达到裂变拉新的目的。在做的过程中遇到了一些坑的地方,所以回过来总结一下 技术方案使用微信JS-SDK自定义分享到好友和分享到朋友圈 实现步骤1、要实现微信H5网页自定义分享功能,必须先熟悉下微信公众平台开发文档,具体文档里面说的很详细,这里说下需要注意的点,别忘了绑定开发者权限,还有绑定js安全域名,要不然有可能会报redirect_uri参数错误。 2、首先一般在做微信H5网页活动,都需要获取用户的个人信息,这就需要用户授权,一般授权有两种方式,一种是静默授权,一种是网页授权,这个在微信开发文档说的很详细。 对于已关注公众号的用户,如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页,即使是scope为snsapi_userinfo,也是静默授权,用户无感知一般网页授权流程分为四步: ①引导用户进入授权页面同意授权,获取code ②通过code换取网页授权access_token(与基础支持中的access_token不同) ③如果需要,开发者可以刷新网页授权access_token,避免过期 ④通过网页授权获取用户基本信息(openid 、UnionID、个人头像、性别、省市、微信昵称等) 3、下面是具体实现代码,说下大概思路,通过判断参数是否在微信浏览器中打开,是否让用户授权,并重定向到微信的接口拿到code后通过接口传给后端返回用户的基本信息。 // 用户授权 if (this.$route.query.from) { // 跳转微信页面 let _nowUrl = window.location.href.split("?")[0] +`?pictureId=${this.$route.query.pictureId}`; // 参数拼接 let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=微信公众号APPID&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`; window.location.href = _shareUrl; // 重定向到这个定义的URL } // 通过code获取用户信息 if (this.$route.query.code) { let _code = this.$route.query.code; this.handleWechatMsg(_code); }4、接下来就是如何自定义分享给好友或者朋友圈,同样也是按照调用微信开发文档上说的进行配置和调用。在调用分享接口成功之后开始调用分享api,并在调用成功之后的回调函数执行跳页,这里微信那边做了限制,如果用户在点击分享的时候取消了,默认还是走success成功回调函数,是拿不到最终分享成功的状态。下面是实现分享的具体代码 // 分享给朋友或朋友圈 wxChatShare(param) { var that = this; let _url = encodeURIComponent(param.url); apiUrl.wechatConfig(_url).then(res => { if (res.data.code == 200) { wx.config({ debug: false, appId: res.data.content.appid, timestamp: res.data.content.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.content.nonceStr, // 必填,生成签名的随机串 signature: res.data.content.signature, // 必填,签名 jsApiList: [ "onMenuShareTimeline", "onMenuShareAppMessage" // "updateAppMessageShareData", // "updateTimelineShareData" ] }); // wx.ready(function() { //分享到朋友圈 wx.onMenuShareTimeline({ title: param.title, // 分享标题 link: param.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: param.imgUrl, // 分享图标 success: function() { // 用户点击了分享后执行的回调函数 that.$Message.message("分享成功!"); that.toRouter(); } }); //分享到好友 wx.onMenuShareAppMessage({ title: param.title, // 分享标题 desc: param.desc, // 分享描述 link: param.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: param.imgUrl, // 分享图标 type: param.type, // 分享类型,music、video或link,不填默认为link dataUrl: param.dataUrl, // 如果type是music或video,则要提供数据链接,默认为空 success: function() { // 用户点击了分享后执行的回调函数 that.$Message.message("分享成功!"); that.toRouter(); } }); // wx.updateTimelineShareData({ // title: param.title, // 分享标题 // link: param.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 // imgUrl: param.imgUrl, // 分享图标 // success: function(res) { // // 设置成功 // that.$Message.message("设置成功!"); // that.toRouter(); // } // }); // //分享给朋友 // wx.updateAppMessageShareData({ // title: param.title, // 分享标题 // desc: param.desc, // 分享描述 // link: param.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 // imgUrl: param.imgUrl, // 分享图标 // success: function(res) { // // 设置成功 // that.$Message.message("设置成功!"); // that.toRouter(); // } // }); // }); wx.error(function(res) { console.log("验证失败返回的信息:", res); }); } else { console.log(res.data.message); } }) .catch(err => { this.$Message.message(error); }); },总结这里遇到比较坑的就是,在调用分享事件的时候,不能同时写四个分享按钮事件,如果都写上,会造成在安卓机上还没有点击分享按钮的时候,就已经走分享成功success回调函数了,这里说下为啥写四个分享按钮事件,因为发现如果不写上即将废掉的两个onMenuShareTimeline、onMenuShareAppMessage会在安卓机上遇到不能分享的问题,所以把新增的两个分享按钮事件updateAppMessageShareData、updateTimelineShareData注释掉,就都可以分享了,iOS和安卓均没问题。 ...

May 7, 2019 · 2 min · jiezi

微信分享如何实现

今天在做一个项目的时候用到微信的分享 实现定义分享标题,图片,以及简介下面来记录分享一下制作过程 <?php require_once “jssdk.php”; $jssdk = new JSSDK(“yourAppID”, “yourAppSecret”); yourAppID//为你微信APPID yourAppSecret//为yourAppID $signPackage = $jssdk->GetSignPackage();?><!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title></title></head><body> </body><script src=“http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script>  / 注意: * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 * 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。 * 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈: * 邮箱地址:weixin-open@qq.com * 邮件主题:【微信JS-SDK反馈】具体问题 * 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。 */ wx.config({ debug: true, appId: ‘<?php echo $signPackage[“appId”];?>’, timestamp: <?php echo $signPackage[“timestamp”];?>, nonceStr: ‘<?php echo $signPackage[“nonceStr”];?>’, signature: ‘<?php echo $signPackage[“signature”];?>’, jsApiList: [ //把需要的接口加入至列表 “onMenuShareTimeline”, //分享给好友 “onMenuShareAppMessage”, //分享到朋友圈 “onMenuShareQQ”, //分享到QQ “onMenuShareWeibo”, //分享到微博 “checkJsApi”,“scanQRCode”, //如果需要调扫码 侧加入至列表 ] }); wx.ready(function (){ var shareData = { title: ‘{$user_info.card.name}’, //标题 desc: ‘{$user_info.card.company} 分享来自[智昕网络]’,//简介,这里请特别注意是要去除html link: ‘<?php echo $signPackage[“url”];?>’, imgUrl: ‘{$user_info.avatar_img}’ }; wx.onMenuShareAppMessage(shareData); wx.onMenuShareTimeline(shareData); wx.onMenuShareQQ(shareData); wx.onMenuShareWeibo(shareData); });</script></html> 下面是微信的jssdk.php <?phpclass JSSDK { private $appId; private $appSecret; public function __construct($appId, $appSecret) { $this->appId = $appId; $this->appSecret = $appSecret; } public function getSignPackage() { $jsapiTicket = $this->getJsApiTicket(); // 注意 URL 一定要动态获取,不能 hardcode. $protocol = (!empty($_SERVER[‘HTTPS’]) && $_SERVER[‘HTTPS’] !== ‘off’ || $_SERVER[‘SERVER_PORT’] == 443) ? “https://” : “http://”; $url = “$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”; $timestamp = time(); $nonceStr = $this->createNonceStr(); // 这里参数的顺序要按照 key 值 ASCII 码升序排序 $string = “jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url”; $signature = sha1($string); $signPackage = array( “appId” => $this->appId, “nonceStr” => $nonceStr, “timestamp” => $timestamp, “url” => $url, “signature” => $signature, “rawString” => $string ); return $signPackage; } private function createNonceStr($length = 16) { $chars = “abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789”; $str = “”; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } private function getJsApiTicket() { // jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例 $data = json_decode($this->get_php_file(“jsapi_ticket.php”)); if ($data->expire_time < time()) { $accessToken = $this->getAccessToken(); // 如果是企业号用以下 URL 获取 ticket // $url = “https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";      $url = “https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";      $res = json_decode($this->httpGet($url)); $ticket = $res->ticket; if ($ticket) { $data->expire_time = time() + 7000; $data->jsapi_ticket = $ticket; $this->set_php_file(“jsapi_ticket.php”, json_encode($data)); } } else { $ticket = $data->jsapi_ticket; } return $ticket; } private function getAccessToken() { // access_token 应该全局存储与更新,以下代码以写入到文件中做示例 $data = json_decode($this->get_php_file(“access_token.php”)); if ($data->expire_time < time()) { // 如果是企业号用以下URL获取access_token // $url = “https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";      $url = “https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";      $res = json_decode($this->httpGet($url)); $access_token = $res->access_token; if ($access_token) { $data->expire_time = time() + 7000; $data->access_token = $access_token; $this->set_php_file(“access_token.php”, json_encode($data)); } } else { $access_token = $data->access_token; } return $access_token; } private function httpGet($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_TIMEOUT, 500); // 为保证第三方服务器与微信服务器之间数据传输的安全性,所有微信接口采用https方式调用,必须使用下面2行代码打开ssl安全校验。 // 如果在部署过程中代码在此处验证失败,请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。 curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true); curl_setopt($curl, CURLOPT_URL, $url); $res = curl_exec($curl); curl_close($curl); return $res; } private function get_php_file($filename) { return trim(substr(file_get_contents($filename), 15)); } private function set_php_file($filename, $content) { $fp = fopen($filename, “w”); fwrite($fp, “<?php exit();?>” . $content); fclose($fp); }} 现在完成了,关闭wx.config debug改为 debug: false,OK,完成 ...

April 17, 2019 · 2 min · jiezi

Vue项目history模式下微信分享总结

每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下。原文http://justyeh.top/post/39技术要点Vue,history常见问题及说明debug模式下报false这个没得说,就是调用wx.config方法的参数错误造成的,请确认以下事项:是否成功绑定了域名(域名校验文件要能被访问到)使用最新的js-sdk文件,因为微信会改部分apiconfig方法的参数是否传正确了(拼写错误、大小写…)需要使用的方法是否写在了jsApiList中获取签名的url需要decodeURIComponent后台的生成签名的加密方法需要对照官方文档debug返回ok,分享不成功确保代码拼写正确分享链接域名或路径必须与当前页面对应的公众号JS安全域名一致接口调用需要放在wx.ready方法中单页项目(SPA)中的一些要点所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。上面那段话摘自官方文档开发者需要注意的事项:android和ios需要分开处理需要在页面url变化的时候重新调用wx.config方法,android获取签名的url就传window.location.hrefVue项目在切换页面时,IOS中浏览器的url并不会改变,依旧是第一次进入页面的地址,所以IOS获取签名的url需要传第一次进入的页面urlCoderouter/index.js……import { wechatAuth } from “@/common/wechatConfig.js”;……const router = new Router({ mode: “history”, base: process.env.BASE_URL, routes: [ { path: “/”, name: “home”, meta: { title: “首页”, showTabbar: true, allowShare: true }, }, { path: “/cart”, name: “cart”, meta: { title: “购物车”, showTabbar: true }, component: () => import("./views/cart/index.vue") } …… ]});router.afterEach((to, from) => { let authUrl = ${window.location.origin}${to.fullPath}; let allowShare = !!to.meta.allowShare; if (!!window.__wxjs_is_wkwebview) {// IOS if (window.entryUrl == "" || window.entryUrl == undefined) { window.entryUrl = authUrl; // 将后面的参数去除 } wechatAuth(authUrl, “ios”, allowShare); } else { // 安卓 setTimeout(function () { wechatAuth(authUrl, “android”, allowShare); }, 500); }});代码要点:meta中的allowShare用于判断页面是否可分享window.__wxjs_is_wkwebview可用来判断是否是微信IOS浏览器entryUrl是项目第一次进入的页面的地址,将其缓存在window对象上为什么安卓的时候要增加一个延时器,因为安卓会存在一些情况,就是即便签名成功,但是还是会唤不起功能,这个貌似是一个比较稳妥的解决办法wechatConfig.jsimport http from “../api/http”;import store from “../store/store”;export const wechatAuth = async (authUrl, device, allowShare) => { let shareConfig = { title: “xx一站式服务平台”, desc: “xxxx”, link: allowShare ? authUrl : window.location.origin, imgUrl: window.location.origin + “/share.png” }; let authRes = await http.get("/pfront/wxauth/jsconfig", { params: { url: decodeURIComponent(device == “ios” ? window.entryUrl : authUrl) } }); if (authRes && authRes.code == 101) { wx.config({ //debug: true, appId: authRes.data.appId, timestamp: authRes.data.timestamp, nonceStr: authRes.data.nonceStr, signature: authRes.data.signature, jsApiList: [“updateAppMessageShareData”, “updateTimelineShareData”, “onMenuShareAppMessage”, “onMenuShareTimeline”] }); wx.ready(() => { wx.updateAppMessageShareData({ title: shareConfig.title, desc: shareConfig.desc, link: shareConfig.link, imgUrl: shareConfig.imgUrl, success: function () { shareSuccessCallback(); } }); wx.updateTimelineShareData({ title: shareConfig.title, link: shareConfig.link, imgUrl: shareConfig.imgUrl, success: function () { shareSuccessCallback(); } }); wx.onMenuShareTimeline({ title: shareConfig.title, link: shareConfig.link, imgUrl: shareConfig.imgUrl, success: function () { shareSuccessCallback(); } }); wx.onMenuShareAppMessage({ title: shareConfig.title, desc: shareConfig.desc, link: shareConfig.link, imgUrl: shareConfig.imgUrl, success: function () { shareSuccessCallback(); } }); }); }};function shareSuccessCallback() { if (!store.state.user.uid) { return false; } store.state.cs.stream({ eid: “share”, tpc: “all”, data: { uid: store.state.user.uid, truename: store.state.user.truename || "" } }); http.get("/pfront/member/share_score", { params: { uid: store.state.user.uid } });}总结原先计划不能分享的页面就使用hideMenuItems方法隐藏掉相关按钮,在ios下试了一下,有些bug:显示按钮的页面切换的影藏按钮的页面,分享按钮有时依然存在,刷新就没问题,估计又是一个深坑,没精力在折腾了,就改为隐私页面分享到首页,公共页面分享原地址,如果有什么好的解决办法,请联系我!一开始我有参考sf上的一篇博客https://segmentfault.com/a/1190000014455713,按照上面的代码,android手机都能成功,但是IOS有一个奇怪的问题,就是分享间歇性的失效,同一个页面,刚刚调起分享成功,再试一次就失败(没有图标、title,只能跳转到首页),经过“不断”努力的尝试,应该是解决了问题,说一下过程:一开始以为是异步唤起没成功的问题,就和android一样给IOS调用wechatAuth方法也加了个定时器,测了一遍没效果,放弃起始js-sdk是通过npm安装的,版本上带了个test,有点不放心,改为直接使用script标签引用官方的版本重新读了一遍文档,发现onMenuShareTimeline等方法即将废弃,就把jsApiList改为jsApiList:[‘updateAppMessageShareData’,‘updateTimelineShareData’],改后就变成了IOS可以成功,android分享失败百度updateAppMessageShareData安卓失败原因,参考这个链接https://www.jianshu.com/p/1b6e04c2944a,把老的api也加到jsApiList中,仔细、反复试了试两种设备都ok,好像是成功了,说"好像"是因为心里没底啊,各种“魔法”代码!最后,在这里希望腾讯官方能不能走点心,更新文档及时点,demo能不能提供完整点….参考链接https://segmentfault.com/a/1190000014455713https://www.jianshu.com/p/1b6e04c2944ahttps://segmentfault.com/a/1190000012339148https://github.com/vuejs/vue-router/issues/481 ...

March 28, 2019 · 2 min · jiezi

uni-app实现Android分享到微信朋友圈和微信好友,附DEMO和源码

微信分享大家见怪不怪了!就是再APP点击分享,然后唤起微信,分享当前页面到朋友圈或者分享给朋友。所以,我开发了这样的一个工具。动图demo分享后就是一个带有标题、描述文字、LOGO、分享来源的一个小卡片。开发这个App是使用uni-app框架开发的。没了解过可以取访问:https://uniapp.dcloud.io/了解一下!uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。创建项目1、先下载开发工具HBuilderX2、创建项目3、选择uni-app4、创建完成后就会有一个模板了。代码5、打开pages/index/index.vue,拷贝下面代码进去<template> <view class=“content”> <form @submit=“formSubmit” @reset=“formReset”> <input class=“uni-input” name=“title” placeholder=“文章标题”/> <input class=“uni-input” name=“miaoshu” placeholder=“文章描述”/> <input class=“uni-input” name=“imgurl” placeholder=“图片地址”/> <input class=“uni-input” name=“url” placeholder=“跳转链接”/> <button formType=“submit”>分享到微信群或好友</button> <button type=“default” formType=“reset”>清空以上信息</button> <view class=“banquan”>里客云科技开发</view> </form> </view> </template><script> export default { data() { return {} }, // 执行事件 methods:{ formSubmit:function(e){ var title = e.detail.value.title; var miaoshu = e.detail.value.miaoshu; var imgurl = e.detail.value.imgurl; var url = e.detail.value.url; uni.share({ provider: “weixin”, scene: “WXSceneSession”, type: 0, href: url, title: title, summary: miaoshu, imageUrl: imgurl, success: function (res) { console.log(JSON.stringify(res)); uni.showToast({ title: ‘已分享’, duration: 2000 }); }, fail: function (err) { var errrr = JSON.stringify(err); if(errrr){ uni.showModal({ title: ‘表单不能留空’, content: ‘请完善所有信息再发起分享’, success: function (res) { if (res.confirm) { console.log(‘用户点击确定’); } else if (res.cancel) { console.log(‘用户点击取消’); } } }); } } }); }, }, }</script><style> *{margin: 0;padding: 0;} .content{ width: 100%; margin: 20px auto; } .content .uni-input{ width: 80%; height: 45px; margin: 8px auto; border: 1px solid #ccc; margin-bottom: 8px; padding-left: 8px; border-radius: 10px; font-size: 16px; color: #333; } .content button{ width: 80%; height: 45px; line-height: 45px; margin: 8px auto; border: 1px solid #ccc; margin-bottom: 8px; padding-left: 8px; border-radius: 10px; font-size: 16px; color: #fff; background: #56b273; border: none; } button::after{ border: none;} .content .banquan{ text-align: center; margin-top: 50px; font-size: 15px; color: #666; }</style>6、打开manifest.json,点击App模块权限配置,给Share(分享)打勾,代表我们给这个App注入一个分享权限。7、点击App SDK配置,进去找到分享,填写appid和appsecretappid和appsecret在哪弄?这是需要前往微信开放平台申请的!https://open.weixin.qq.com/进去注册一个帐号,登录,创建移动应用。填写资料,上传LOGO即可,等待审核完成即可,此处省略详细的讲解,自行研究。8、配置好了之后,App已经是开发好了,制作自定义基座,在真机上进行调试。其中Android包名一定要填你在微信开放平台创建的应用时填写的报名一致。还有,微信开放平台填应用签名的时候,也是要获取的,应用签名要用签名检测工具https://res.wx.qq.com/open/zh…使用方法安装上面的签名工具在你的安卓设备安装你打包好的App然后输入包名即可获取然后再次调试,是否可以唤起分享,如果可以那就可以打包了。打包App打包完成,就可以在你的安卓设备安装使用!App Demohttps://www.lanzous.com/i39swli作者:TANKING时间:2019-03-01网站:http://likeyunba.com微信:likeyunba520 ...

March 1, 2019 · 1 min · jiezi

单页面路由工程使用微信分享及二次分享解决方案

wxShare 说明文档单页面路由工程使用微信分享及二次分享解决方案很多人在单页面工程中使用weixin jsSDK时 ,第一次调用正常, 路由切换时发现调用分享配置报错, 此时忽略了一点 ,在单页面路由的 url 发生变化时, 需要重现调用微信jsSDK分享配置;wxShare除适用于 Vue 单页工程外, 也可以使用与其他单页工程例如 React,本示例主要展示如何在 Vue中使用;微信 jssdk调用基本原理1. (初始化页面,划重点)掉用 api 获取当前页面 url 授权的签名2. 配置微信分享 jssdk3. 路由切换时, 重新执行步骤21. 快速使用, 只需三步示例参见 demo下 src/main.js在工程入口文件引入 wxShare 文件/*************** 步骤一 引入 微信 jssdk /let appInit=0;import wx from ‘weixin-js-sdk’;//配置授权apiwxShare.config.jsSDKAuth=’/api/mobile/WeiXin/ecstoreSendJsSdk’;/*** 第二步 初始化微信分享 /if (location.host != “localhost:8080”) { let sign_url = location.href.split("#")[0]; appInit++; if (wx) { wxShare.initWxShare(sign_url); }}/*** 第三步 监听路由重置微信分享为默认 /router.afterEach(route => { let url=location.href.split("#")[0]; if (!store) return; if(appInit>1){ wxShare.resetWxShareConfig(); } appInit++;})/*** end 分割线 ************/2. wxShare提供的方法2.1 initWxShare()初始化微信分享, 此时会调用内部方法 wxShareAuth, 请求 api 授权当前页面 url;2.2 updateWxShareConfig()更新微信分享配置内容, 例如, 在某个事件上主动调用此方法, 来更改微信分享配置的标题, 简述,链接或者封面图2.3 resetWxShareConfig()通常情况下, 在路由发生变化时, 希望已被更改过的分享配置, 重新重置为默认分享配置2.4 configWXJSSDK();调用微信jsSDK 完成分享配置3. wxShare.config属性配置配置名称属性值默认值jsSDKAuthString’‘shareSignObject下文shareSigndefaultWxShareConfigObject下文defaultWxShareConfigwxShareConfigObject下文wxShareConfig3.1 shareSign提供的配置{ appid:"", jsapi_ticket:"", nonceStr:"", signature:"", timestamp:’’, url:"",}3.2 defaultWxShareConfig{ title: “默认分享配置title”, desc: “默认分享配置desc”, link: location.href.split("#")[0], imgUrl: ‘https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/dNEBuK6.png', jsApiList:[‘onMenuShareTimeline’, ‘onMenuShareAppMessage’, ‘hideMenuItems’, ‘closeWindow’], hideMenuList:[‘menuItem:editTag’, ‘menuItem:delete’, ‘menuItem:originPage’, ‘menuItem:readMode’, ‘menuItem:openWithQQBrowser’, ‘menuItem:openWithSafari’, ‘menuItem:share:email’, ‘menuItem:share:brand’]}3.3 wxShareConfigwxShareConfig:{}其他/wxShare.js 为插件源码文件, 可根据自己需求自行更改demo 工程只需 clone 本工程,npm installnpm run servenpm依赖插件weixin-js-sdkaxios ...

February 21, 2019 · 1 min · jiezi

微信如何实现自动跳转到用其他浏览器打开指定页面下载APK的方案

微信在朋友圈中屏蔽了APP store的链接,以及所有.apk的链接,这意味着app下载在微信浏览器中全面被屏蔽。如何突破这层屏蔽,业界的朋友也是想尽了一切办法,恩,其实我这里还是有一些办法的。方案1:引导用户浏览器打开当我们的手游、APP内部加上微信分享功能,分享内容到微信朋友圈,这时第一个页面可以在微信打开,但是里面引导用户下载的链接会被微信屏蔽,不能直接点击。需要长按出现一个菜单提示用户是否打开,再次确认才能打开,要知道用户往往不知道需要长按的。常规的做法是提示用户在浏览器中重新打开,这样就不受微信限制了,但是操作有点复杂,但被使用的最广泛,因为最简单。(网上代码有很多,有不懂技术可以去这里:XXXXX)方案二:直接跳转到手机浏览器下载这个方案就是我们现在用的这种,相比第一种的话,转化率方面都有显著发的提升,这个方案需要我们借助一个外部的接口来实现此功能 旋风微跳:www.zjychina.cn我们在他们那边租用了此接口。通过租用的接口可以实现安卓端微信直接唤醒手机默认浏览器打开指定的链接,从而实现下载APP的功能, 我们抓包查看了具体实现原理:利用HTTP请求中Header中的user-agent字段,来识别用户的客户端,如果判断用户是在微信中打开的链接,则自动打开系统手机浏览器来打开链接。如果是在手机浏览器打开,则正常访问。好了,以上几种方法就是我之前解决微信无法下载APP文件的解决方法,希望可以帮助到大家

January 24, 2019 · 1 min · jiezi