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

背景

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

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

代码结构及功能

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&timestamp=$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'

	}

};

webpack打包

查看分享效果

参考文档

http://203.195.235.76/jssdk/

http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html

巴特西

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

背景

解决方案

代码结构及功能

参考文档

最新文章

热门文章