首页
所有分类
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 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
表变量(1) mixin(1) 绝对定位(1) ECharts(3) ref(1) 游标(1) ip连接(1) GTID(1) postcss-px2rem(1) props(1)
You might like
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
angular5 httpclient的示例实战
2018/03/12 Javascript
vuex 的简单使用
2018/03/22 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
理解Python中的类与实例
2015/04/27 Python
python创建和删除目录的方法
2015/04/29 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
CK巴西官方网站：Calvin Klein巴西
2019/07/19 全球购物
小学学校评估方案
2014/06/08 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android