首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript获取wx.config内部字段解决微信分享

Posted in Javascript onMarch 09, 2016

背景
在微信分享开发的时候我们通常的流程是

<?php
 require_once "jssdk.php";
 $jssdk = new JSSDK("yourAppID", "yourAppSecret");
 $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>
 wx.config({
 appId: '<?php echo $signPackage["appId"];?>',
 timestamp: <?php echo $signPackage["timestamp"];?>,
 nonceStr: '<?php echo $signPackage["nonceStr"];?>',
 signature: '<?php echo $signPackage["signature"];?>',
 jsApiList: ['onMenuShareTimeline'
 'onMenuShareAppMessage'
 ]
 });

 wx.ready(function() {
 
 wx.onMenuShareTimeline({
 title: '', // 分享标题
 link: '', // 分享链接
 imgUrl: '', // 分享图标
 success: function() {
 // 用户确认分享后执行的回调函数
 },
 cancel: function() {
 // 用户取消分享后执行的回调函数
 }
 });

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

 });
 </script>

 </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中

代码结构及功能

javascript获取wx.config内部字段解决微信分享

  • index.html 页面入口
  • weixin.php 服务器端获取配置参数
  • configdata.php将配置转为借口输出
  • getconfig.js 用ajax获取configdata.php的数据
  • share.js 分享回调函
  • webpack.config.js webpack配置文件
  • index.js 打包后最终html调用js文件

index.html html静态文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>静态页面微信分享测试</title>
</head>
<body>
 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
 <script src="statics/js/index.js"></script>
</body>
</html>

configdata.php 后台获取配置的参数 注意url要写上自己被分享的页面url不然会报invalid signature错误

<?php
class JSSDK {
 private $appId;
 private $appSecret;

 public function __construct($appId, $appSecret) {
 $this->appId = $appId;
 $this->appSecret = $appSecret;
 }

 public function getSignPackage() {
 $jsapiTicket = $this->getJsApiTicket();
 $url = "http://$_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(file_get_contents("jsapi_ticket.json"));
 if ($data->expire_time < time()) {
 $accessToken = $this->getAccessToken();
 $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;
 $fp = fopen("jsapi_ticket.json", "w");
 fwrite($fp, json_encode($data));
 fclose($fp);
 }
 } else {
 $ticket = $data->jsapi_ticket;
 }

 return $ticket;
 }

 private function getAccessToken() {
 // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
 $data = json_decode(file_get_contents("access_token.json"));
 if ($data->expire_time < time()) {
 $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;
 $fp = fopen("access_token.json", "w");
 fwrite($fp, json_encode($data));
 fclose($fp);
 }
 } 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);
 curl_setopt($curl, CURLOPT_URL, $url);

 $res = curl_exec($curl);
 curl_close($curl);

 return $res;
 }
}

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

<?php

 require_once "weixin.php";
 $jssdk = new JSSDK(appId, appSecretecret);
 $signPackage = $jssdk->GetSignPackage();
 
 class Config{ 
 var $appId; 
 var $timestamp; 
 var $nonceStr; 
 var $signature; 
 var $url;
 } 
 
 $config = new Config(); 
 
 $config -> appId = $signPackage["appId"]; 
 $config -> timestamp = $signPackage["timestamp"]; 
 $config -> nonceStr = $signPackage["nonceStr"]; 
 $config -> signature = $signPackage["signature"];
 $config -> url = $signPackage["url"]; 
 
 echo json_encode($config);
?>

getconfig.js 使用ajax获取接口数据（配置参数）

var getConfig = function(callback) {
 $.ajax({
 url: "http://www.goxueche.com/api/configdata.php",
 type: "get",
 success: function(data) {
 callback(data);
 }
 })
}

module.exports = getConfig;

share.js 分享函数

var getWeixincofig = require("./getconfig.js");
getWeixincofig(shareweixin);


function shareweixin(data) {

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

 window.wx.config({
 debug:true,
 appId: data.appId,
 timestamp: data.timestamp,
 nonceStr: data.nonceStr,
 signature: data.signature,
 jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage']
 });

 wxShare();
}

function wxShare() {
 //检测api是否生效
 wx.ready(function() {
 wx.checkJsApi({
 jsApiList: [
 'getNetworkType',
 'previewImage'
 ],
 success: function(res) {
 console.log(JSON.stringify(res));
 }
 });
 //分享给好友
 wx.onMenuShareAppMessage({
 title: '趣学车-有温度的互联网驾校',
 desc: '想去学车，就趣学车!',
 link: 'http://www.goxueche.com',
 imgUrl: 'http://www.goxueche.com/....png'
 });
 
 //分享到朋友圈
 wx.onMenuShareTimeline({
 title: '趣学车-有温度的互联网驾校',
 desc: '想去学车，就趣学车!',
 link: 'http://www.goxueche.com',
 imgUrl: 'http://www.goxueche.com/....png'
 });

 });
}

webpack.config.js

var webpack = require('webpack'); 
module.exports = { 
 entry: {
 index: './share.js',
 },
 output: {
 path: './',
 filename: '[name].js'
 }
};

本文已被整理到了《JavaScript微信开发技巧汇总》，欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

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

javascript获取wx.config内部字段解决微信分享

- Author -

Leinov

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
js导出txt示例代码
Jan 14 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)
Jun 20 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
安装vue-cli的简易过程
May 22 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 #Javascript
jquery实现文本框textarea自适应高度
Mar 09 #Javascript
分享12个实用的jQuery代码片段
Mar 09 #Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 #Javascript
javascript html5移动端轻松实现文件上传
Mar 27 #Javascript
javascript事件绑定学习要点
Mar 09 #Javascript
js实现分割上传大文件
Mar 09 #Javascript
iOS(1) 嘧啶碱基(2) iPhone(1) RNA(2) iOS15(1) compose(3) DNA(2) 陨石(1) iOS16(1) Athens(1)
You might like
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
js 函数的副作用分析
2011/08/23 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
详解MVC如何使用开源分页插件（shenniu.pager.js）
2016/12/16 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
vue中axios处理http发送请求的示例（Post和get）
2017/10/13 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
vue中activated的用法
2021/01/03 Vue.js
Python3基础之函数用法
2014/08/13 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python实现简单的2048小游戏
2021/03/01 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
印度领先的眼镜电子商务网站：Lenskart
2019/12/16 全球购物
中专自荐信
2013/10/13 职场文书
军训自我鉴定范文
2014/02/13 职场文书
初中差生评语
2014/12/29 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
python数据处理之Pandas类型转换
2022/04/28 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers