详解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 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
浅析JavaScript动画
Jun 10 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
vue生命周期实例小结
Aug 15 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 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 socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php文件操作相关类实例
2015/06/18 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
详解python之协程gevent模块
2018/06/14 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
政治学求职信
2014/06/03 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
合同意向书范本
2014/07/30 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
详解Python描述符的工作原理
2021/06/11 Python
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android