UDN-企业互联网技术人气社区

板块导航

浏览  : 2064
回复  : 2

[原生js] JavaScript获取wx.config内部字段解决微信分享

[复制链接]
西北的风的头像 楼主
发表于 2017-1-17 16:19:37 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了JavaScript获取wx.config内部字段解决微信分享,需要的朋友可以参考下

  背景
  
  在微信分享开发的时候我们通常的流程是
  1. <?php
  2. require_once "jssdk.php";
  3. $jssdk = new JSSDK("yourAppID", "yourAppSecret");
  4. $signPackage = $jssdk->GetSignPackage();
  5. ?>
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9. <meta charset="UTF-8">
  10. <title>微信分享</title>
  11. </head>
  12. <body>
  13. </body>
  14. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  15. <script>
  16. wx.config({
  17. appId: '<?php echo $signPackage["appId"];?>',
  18. timestamp: <?php echo $signPackage["timestamp"];?>,
  19. nonceStr: '<?php echo $signPackage["nonceStr"];?>',
  20. signature: '<?php echo $signPackage["signature"];?>',
  21. jsAPIList: ['onMenuShareTimeline'
  22. 'onMenuShareAppMessage'
  23. ]
  24. });

  25. wx.ready(function() {

  26. wx.onMenuShareTimeline({
  27. title: '', // 分享标题
  28. link: '', // 分享链接
  29. imgUrl: '', // 分享图标
  30. success: function() {
  31. // 用户确认分享后执行的回调函数
  32. },
  33. cancel: function() {
  34. // 用户取消分享后执行的回调函数
  35. }
  36. });

  37. wx.onMenuShareAppMessage({
  38. title: '', // 分享标题
  39. desc: '', // 分享描述
  40. link: '', // 分享链接
  41. imgUrl: '', // 分享图标
  42. type: '', // 分享类型,music、video或link,不填默认为link
  43. dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
  44. success: function() {
  45. // 用户确认分享后执行的回调函数
  46. },
  47. cancel: function() {
  48. // 用户取消分享后执行的回调函数
  49. }
  50. });

  51. });
  52. </script>

  53. </html>
复制代码
 
  上面是一个php文件,这样的代码的一个很大缺点是前后端未分离耦合度太高,再一就是混合写不是很美观,所以我们要让PHP和HTML分离,要实现分享功能,首先就是要调用用微信的jssdk Api获取到配置参数, 这个必须是要通过php后台语言来获取的,然后将这些参数配置于wx.config中,在wx.config之前要先引入http://res.wx.qq.com/open/js/jweixin-1.0.0.js 然后就可以写分享的函数了,他们的依赖关系是wx.config 需要js库和config内部的参数,分享依赖wx.config
  
  所以最重要的就把php的配置参数分离出来单独获取即可
  
  解决方案
  
  将获取配置参数的PHP写作为接口,在js里使用ajax调用,获取参数并转换为对象,再通过回调函数将ajax获取的参数塞到wx.config中
  
  代码结构及功能
201639102801401.jpg
  
  1.index.html 页面入口
  
  2.weixin.php 服务器端获取配置参数
  
  3.configdata.php将配置转为借口输出
  
  4.getconfig.js 用ajax获取configdata.php的数据
  
  5.share.js 分享回调函
  
  6.webpack.config.js webpack配置文件
  
  7.index.js 打包后最终html调用js文件
  
  index.html html静态文件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>静态页面微信分享测试</title>
  6. </head>
  7. <body>
  8. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  9. <script src="statics/js/index.js"></script>
  10. </body>
  11. </html>
复制代码
 
  configdata.php 后台获取配置的参数 注意url要写上自己被分享的页面url不然会报invalid signature错误
  1. <?php
  2. class JSSDK {
  3. private $appId;
  4. private $appSecret;

  5. public function __construct($appId, $appSecret) {
  6. $this->appId = $appId;
  7. $this->appSecret = $appSecret;
  8. }

  9. public function getSignPackage() {
  10. $jsapiTicket = $this->getJsApiTicket();
  11. $url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
  12. $timestamp = time();
  13. $nonceStr = $this->createNonceStr();

  14. // 这里参数的顺序要按照 key 值 ASCII 码升序排序
  15. $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";

  16. $signature = sha1($string);

  17. $signPackage = array(
  18. "appId" => $this->appId,
  19. "nonceStr" => $nonceStr,
  20. "timestamp" => $timestamp,
  21. "url" => $url,
  22. "signature" => $signature,
  23. "rawString" => $string
  24. );
  25. return $signPackage;
  26. }

  27. private function createNonceStr($length = 16) {
  28. $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  29. $str = "";
  30. for ($i = 0; $i < $length; $i++) {
  31. $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
  32. }
  33. return $str;
  34. }

  35. private function getJsApiTicket() {
  36. // jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
  37. $data = json_decode(file_get_contents("jsapi_ticket.json"));
  38. if ($data->expire_time < time()) {
  39. $accessToken = $this->getAccessToken();
  40. $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
  41. $res = json_decode($this->httpGet($url));
  42. $ticket = $res->ticket;
  43. if ($ticket) {
  44. $data->expire_time = time() + 7000;
  45. $data->jsapi_ticket = $ticket;
  46. $fp = fopen("jsapi_ticket.json", "w");
  47. fwrite($fp, json_encode($data));
  48. fclose($fp);
  49. }
  50. } else {
  51. $ticket = $data->jsapi_ticket;
  52. }

  53. return $ticket;
  54. }

  55. private function getAccessToken() {
  56. // access_token 应该全局存储与更新,以下代码以写入到文件中做示例
  57. $data = json_decode(file_get_contents("access_token.json"));
  58. if ($data->expire_time < time()) {
  59. $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
  60. $res = json_decode($this->httpGet($url));
  61. $access_token = $res->access_token;
  62. if ($access_token) {
  63. $data->expire_time = time() + 7000;
  64. $data->access_token = $access_token;
  65. $fp = fopen("access_token.json", "w");
  66. fwrite($fp, json_encode($data));
  67. fclose($fp);
  68. }
  69. } else {
  70. $access_token = $data->access_token;
  71. }
  72. return $access_token;
  73. }

  74. private function httpGet($url) {
  75. $curl = curl_init();
  76. curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
  77. curl_setopt($curl, CURLOPT_TIMEOUT, 500);
  78. curl_setopt($curl, CURLOPT_URL, $url);

  79. $res = curl_exec($curl);
  80. curl_close($curl);

  81. return $res;
  82. }
  83. }
复制代码

  weixin.php 将配置参数格式化输出
  1. <?php

  2. require_once "weixin.php";
  3. $jssdk = new JSSDK(appId, appSecretecret);
  4. $signPackage = $jssdk->GetSignPackage();

  5. class Config{
  6. var $appId;
  7. var $timestamp;
  8. var $nonceStr;
  9. var $signature;
  10. var $url;
  11. }

  12. $config = new Config();

  13. $config -> appId = $signPackage["appId"];
  14. $config -> timestamp = $signPackage["timestamp"];
  15. $config -> nonceStr = $signPackage["nonceStr"];
  16. $config -> signature = $signPackage["signature"];
  17. $config -> url = $signPackage["url"];

  18. echo json_encode($config);
  19. ?>
复制代码

  getconfig.js 使用ajax获取接口数据(配置参数)
  1. var getConfig = function(callback) {
  2. $.ajax({
  3. url: "http://www.goxueche.com/api/configdata.php",
  4. type: "get",
  5. success: function(data) {
  6. callback(data);
  7. }
  8. })
  9. }

  10. module.exports = getConfig;
复制代码

  share.js 分享函数
  1. var getWeixincofig = require("./getconfig.js");
  2. getWeixincofig(shareweixin);


  3. function shareweixin(data) {

  4. var data = JSON.parse(data);
  5. console.log(data);

  6. window.wx.config({
  7. debug:true,
  8. appId: data.appId,
  9. timestamp: data.timestamp,
  10. nonceStr: data.nonceStr,
  11. signature: data.signature,
  12. jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage']
  13. });

  14. wxShare();
  15. }

  16. function wxShare() {
  17. //检测api是否生效
  18. wx.ready(function() {
  19. wx.checkJsApi({
  20. jsApiList: [
  21. 'getNetworkType',
  22. 'previewImage'
  23. ],
  24. success: function(res) {
  25. console.log(JSON.stringify(res));
  26. }
  27. });
  28. //分享给好友
  29. wx.onMenuShareAppMessage({
  30. title: '趣学车-有温度的互联网驾校',
  31. desc: '想去学车,就趣学车!',
  32. link: 'http://www.goxueche.com',
  33. imgUrl: 'http://www.goxueche.com/....png'
  34. });

  35. //分享到朋友圈
  36. wx.onMenuShareTimeline({
  37. title: '趣学车-有温度的互联网驾校',
  38. desc: '想去学车,就趣学车!',
  39. link: 'http://www.goxueche.com',
  40. imgUrl: 'http://www.goxueche.com/....png'
  41. });

  42. });
  43. }
复制代码

  webpack.config.js
  1. var webpack = require('webpack');
  2. module.exports = {
  3. entry: {
  4. index: './share.js',
  5. },
  6. output: {
  7. path: './',
  8. filename: '[name].js'
  9. }
  10. };
复制代码

  以上就是本文的全部内容,希望对大家的学习有所帮助。

相关帖子

发表于 2017-1-17 16:20:11 | 显示全部楼层
貌似看过类似的文章恩,排版更清晰点就更好了
使用道具 举报

回复

发表于 2017-1-17 16:20:12 来自手机 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部