详解vue开发中调用微信jssdk的问题


Posted in Javascript onApril 16, 2019

起因

微信分享网址时无法分享图片,这个问题需要用jssdk去解决。其实开始的时候时可以看到图片的,但后来微信禁止了。所以只能使用jssdk去解决。
普通网页开发很简单,但是使用vue或其他前端框架开发spa单页面webapp的时候就会有问题了。只要url发生变化就会报签名错误。其实微信官方上已经写了说明。

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
但这些说明然并卵(然而并没有什么卵用)。

问题根源

1 同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用
如果你的链接时采用hash方式,锚点变了也要重新调用,因为url发生了变化,这一点可以放在router的监听事件中比如watch一下$route,或者使用2.2 中引入的 beforeRouteUpdate 守卫。

2 生成签名时url中不能包含锚点
微信jssdk的签名是需要服务端来生成的,所以我们需要将当前页面的网址传递给服务端,由服务端生成wx.config初始化所需要的参数。
但是url传递的时候需要注意,一定一定一定不能带有锚点链接。可以使用location.href.split(‘#')[0]获取url中锚点之前的部分。
比如你的网址是http://domain.com/index.html#/food/1
你只需要把http://domain.com/index.html传递到服务端,让服务端生成签名就可以了,你在调用jssdk的时候可以把url后面添加锚点链接。

实例

安装jssdk

npm install weixin-js-sdk --save

 前段代码

export default {
  mounted() {
   this.$nextTick(function () {
    this.getConfig()
   })
  },
  data () {
   return {
    detail: [],
   }
  },
  methods: {   
   // 微信分参数
   getConfig() { 
    let url = location.href.split('#')[0] //获取锚点之前的链接
    this.$http.get('/index.php',{
     params: {
      url: url
     }
    }).then(response => {
      let res = response.data;
      this.wxInit(res);
     })
   },
   // 微信分享
   wxInit(res) {
    let url = location.href.split('#')[0] //获取锚点之前的链接 
    let links = url+'#/Food/' + this.$route.params.id;
    let title = this.detail.name + '-嘌呤查';
    let desc = '了解更多知识,请关注“嘌呤查”公众号';
    let imgUrl = this.thumb;
    wx.config({
     debug: false,
     appId: res.appId,
     timestamp: res.timestamp,
     nonceStr: res.nonceStr,
     signature: res.signature,
     jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
    });
    wx.ready(function() {
     wx.onMenuShareTimeline({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: links, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function() {
//        alert("分享到朋友圈成功")
       //Toast({
        //message: "成功分享到朋友圈"
       //});
      },
      cancel: function() {
//        alert("分享失败,您取消了分享!")
       //Toast({
        //message: "分享失败,您取消了分享!"
       //});
      }
     });
     //微信分享菜单测试
     wx.onMenuShareAppMessage({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: links, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function() {
       // alert("成功分享给朋友")
//       Toast({
//        message: "成功分享给朋友"
//       });
      },
      cancel: function() {
       // alert("分享失败,您取消了分享!")
//       Toast({
//        message: "分享失败,您取消了分享!"
//       });
      }
     });

     wx.onMenuShareQQ({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: links, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function() {
       // alert("成功分享给QQ")
//       Toast({
//        message: "成功分享到QQ"
//       });
      },
      cancel: function() {
       // alert("分享失败,您取消了分享!")
//       Toast({
//        message: "分享失败,您取消了分享!"
//       });
      }
     });
     wx.onMenuShareWeibo({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: links, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function() {
       // alert("成功分享给朋友")
//       Toast({
//        message: "成功分享到腾讯微博"
//       });
      },
      cancel: function() {
       // alert("分享失败,您取消了分享!")
//       Toast({
//        message: "分享失败,您取消了分享!"
//       });
      }
     });
     wx.onMenuShareQZone({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: links, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function() {
       // alert("成功分享给朋友")
//       Toast({
//        message: "成功分享到QQ空间"
//       });
      },
      cancel: function() {
       // alert("分享失败,您取消了分享!")
//       Toast({
//        message: "分享失败,您取消了分享!"
//       });
      }
     });

    });
    wx.error(function(err) {
     alert(JSON.stringify(err))
    });
   }
  }
 }

index.php页面代码

// 官方实例,生成wx.config需要的配置信息
class 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 = !empty($_GET['url']) ? $_GET['url'] : "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

  $timestamp = time();
  $nonceStr = $this->createNonceStr();

  // 这里参数的顺序要按照 key 值 ASCII 码升序排序
  $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$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);
 }
}



// 逻辑代码
$appId = '你的appid';
$appSecret = '你的appSecret';
$jssdk = new JSSDK($appId, $appSecret);
$signPackage = $jssdk->GetSignPackage();
echo json_encode($signPackage);

看到上面的类中使用$_GET[‘url']接收前段传过来的数据

以上所述是小编给大家介绍的vue开发中调用微信jssdk的问题详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 #Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 #Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 #Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 #Javascript
详解vue-cli 脚手架 安装
Apr 16 #Javascript
详解jquery和vue对比
Apr 16 #jQuery
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 #Javascript
You might like
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
常用js脚本
2006/12/03 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
javascript的push使用指南
2014/12/05 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
python访问类中docstring注释的实现方法
2015/05/04 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python中遍历列表的方法总结
2019/06/27 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
如何设置Java的运行环境
2013/04/05 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
土木工程专业本科生求职信
2014/10/01 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
创业计划书之服装
2019/10/07 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
使用 JavaScript 制作页面效果
2021/04/21 Javascript
MySQL数据库简介与基本操作
2022/05/30 MySQL