背景
在微信分享开发的时候我们通常的流程是
<"jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourAppSecret"); $signPackage = $jssdk->GetSignPackage(); "en"> <head> <meta charset="UTF-8"> <title>微信分享</title> </head> <body> </body> <script src="/UploadFiles/2021-04-02/jweixin-1.0.0.js">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="/UploadFiles/2021-04-02/jweixin-1.0.0.js">configdata.php 后台获取配置的参数 注意url要写上自己被分享的页面url不然会报invalid signature错误
<"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"; $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"; $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 将配置参数格式化输出
<"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); "color: #800000">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微信开发技巧汇总》,欢迎大家学习阅读。
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 魏新雨《为你祈祷+新歌精逊2CD[WAV]
- 影心、明萨拉你选哪个?国外美女COS《博德3》
- 澳洲女子骑车跌入“自杀树”丛 疼痛持续9个月崩溃
- 育碧公布2024“她创力”计划:为女性游戏人提供辅导
- 刘美君.2017-千色·30总选3CD【环球】【WAV+CUE】
- 群星.2022-星河长明电视原声带【乐有奇思】【FLAC分轨】
- 陈淑桦.1995-淑桦盛开Forever【滚石】【WAV+CUE】
- 《再来一张》评测:出师成败皆系“赌”
- 《银河汉堡店》测评:我是银河走菜王!
- 《末日地带2》评测:酣畅淋漓的“和面”之旅
- 萧煌奇《没事的》[320K/MP3][96.22MB]
- 萧煌奇《没事的》[FLAC/分轨][263.38MB]
- 群星《音你而来 第6期》[320K/MP3][90.61MB]
- 交错战线爬塔攻略一览
- 战锤40K星际战士2全近战武器使用教学|近战武器连招表