最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 20:52:01
文档

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

javascript获取wx.config内部字段解决微信分享_javascript技巧:背景 在微信分享开发的时候我们通常的流程是 GetSignPackage(); ?> 微信分享 wx.config({ appId: '', timestamp: , nonceStr: '', signature: '', jsApiList: ['onMenuShareTimeline' 'onMe
推荐度:
导读javascript获取wx.config内部字段解决微信分享_javascript技巧:背景 在微信分享开发的时候我们通常的流程是 GetSignPackage(); ?> 微信分享 wx.config({ appId: '', timestamp: , nonceStr: '', signature: '', jsApiList: ['onMenuShareTimeline' 'onMe
 背景
在微信分享开发的时候我们通常的流程是

 <?php
 require_once "jssdk.php";
 $jssdk = new JSSDK("yourAppID", "yourAppSecret");
 $signPackage = $jssdk->GetSignPackage();
?>
 
 
 
 
 微信分享
 
 
 
 
 

上面是一个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静态文件

    
    
    
     
     静态页面微信分享测试
    
    
     
     

    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获取接口数据(配置参数)

    share.js 分享函数

    webpack.config.js

    文档

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

    javascript获取wx.config内部字段解决微信分享_javascript技巧:背景 在微信分享开发的时候我们通常的流程是 GetSignPackage(); ?> 微信分享 wx.config({ appId: '', timestamp: , nonceStr: '', signature: '', jsApiList: ['onMenuShareTimeline' 'onMe
    推荐度:
    标签: 分享 weixin js
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top