使用javascript获取wxconfig内部字段解决微信分享Word文件下载.docx
- 文档编号:22526563
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:37
- 大小:23.96KB
使用javascript获取wxconfig内部字段解决微信分享Word文件下载.docx
《使用javascript获取wxconfig内部字段解决微信分享Word文件下载.docx》由会员分享,可在线阅读,更多相关《使用javascript获取wxconfig内部字段解决微信分享Word文件下载.docx(37页珍藏版)》请在冰豆网上搜索。
scriptsrc="
script>
wx.config({
appId:
'
<
phpecho$signPackage["
appId"
];
'
timestamp:
timestamp"
nonceStr:
nonceStr"
signature:
signature"
jsApiList:
['
onMenuShareTimeline'
onMenuShareAppMessage'
]
});
wx.ready(function(){
wx.onMenuShareTimeline({
title:
//分享标题
link:
//分享链接
imgUrl:
//分享图标
success:
function(){
//用户确认分享后执行的回调函数
},
cancel:
//用户取消分享后执行的回调函数
}
wx.onMenuShareAppMessage({
desc:
//分享描述
type:
//分享类型,music、video或link,不填默认为link
dataUrl:
//如果type是music或video,则要提供数据链接,默认为空
/script>
/html>
上面是一个php文件,这样的代码的一个很大缺点是前后端未分离耦合度太高,再一就是混合写不是很美观,所以我们要让PHP和HTML分离,要实现分享功能,首先就是要调用用微信的jssdkApi获取到配置参数,这个必须是要通过php后台语言来获取的,然后将这些参数配置于wx.config中,在wx.config之前要先引入然后就可以写分享的函数了,他们的依赖关系是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.jswebpack配置文件
index.js打包后最终html调用js文件
index.htmlhtml静态文件
静态页面微信分享测试<
statics/js/index.js"
configdata.php后台获取配置的参数注意url要写上自己被分享的页面url不然会报invalidsignature错误
classJSSDK{
private$appId;
private$appSecret;
publicfunction__construct($appId,$appSecret){
$this->
appId=$appId;
appSecret=$appSecret;
publicfunctiongetSignPackage(){
$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,
$nonceStr,
$timestamp,
url"
$url,
$signature,
rawString"
$string
);
return$signPackage;
privatefunctioncreateNonceStr($length=16){
$chars="
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
$str="
"
for($i=0;
$i<
$length;
$i++){
$str.=substr($chars,mt_rand(0,strlen($chars)-1),1);
return$str;
privatefunctiongetJsApiTicket(){
//jsapi_ticket应该全局存储与更新,以下代码以写入到文件中做示例
$data=file_get_contents("
jsapi_ticket.json"
));
if($data->
expire_time<
time()){
$accessToken=$this->
getAccessToken();
$res=$this->
httpGet($url));
$ticket=$res->
ticket;
if($ticket){
$data->
expire_time=time()+7000;
jsapi_ticket=$ticket;
$fp=fopen("
w"
fwrite($fp,$data));
fclose($fp);
}else{
$ticket=$data->
jsapi_ticket;
return$ticket;
privatefunctiongetAccessToken(){
//access_token应该全局存储与更新,以下代码以写入到文件中做示例
access_token.json"
$access_token=$res->
access_token;
if($access_token){
access_token=$access_token;
$access_token=$data->
return$access_token;
privatefunctionhttpGet($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=newJSSDK(appId,appSecretecret);
classConfig{
var$appId;
var$timestamp;
var$nonceStr;
var$signature;
var$url;
}
$config=newConfig();
$config->
appId=$signPackage["
timestamp=$signPackage["
nonceStr=$signPackage["
signature=$signPackage["
url=$signPackage["
echo$config);
getconfig.js使用ajax获取接口数据(配置参数)
vargetConfig=function(callback){
$.ajax({
url:
get"
function(data){
callback(data);
})
module.exports=getConfig;
share.js分享函数
vargetWeixincofig=require("
./getconfig.js"
getWeixincofig(shareweixin);
functionshareweixin(data){
vardata=JSON.parse(data);
console.log(data);
window.wx.config({
debug:
true,
data.appId,
data.timestamp,
data.nonceStr,
data.signature,
checkJsApi'
'
]
wxShare();
functionwxShare(){
//检测api是否生效
wx.checkJsApi({
[
getNetworkType'
previewImage'
],
function(res){
console.log(JSON.stringify(res));
//分享给好友
趣学车-有温度的互联网驾校'
想去学车,就趣学车!
//分享到朋友圈
webpack.config.js
varwebpack=require('
webpack'
module.exports={
entry:
{
index:
./share.js'
output:
path:
./'
filename:
[name].js'
参考资料:
微信JSSDKDemo
微信JS-SDK分享到朋友圈分享给朋友分享到QQ拍照或从手机相册中选图识别音频并返回识别结果使用微信内置地图查看位置
一、JS部分
复制代码
wx.ready(function(){
//1判断当前版本是否支持指定JS接口,支持批量判断
document.querySelector('
#checkJsApi'
).onclick=function(){
function(res){
alert(JSON.stringify(res));
};
//2.分享接口
//2.1监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口
#onMenuShareAppMessage'
互联网之子方倍工作室'
在长大的过程中,我才慢慢发现,我身边的所有事,别人跟我说的所有事,那些所谓本来如此,注定如此的事,它们其实没有非得如此,事情是可以改变的。
更重要的是,有些事既然错了,那就该做出改变。
trigger:
alert('
用户点击发送给朋友'
已分享'
已取消'
fail:
已注册获取“发送给朋友”状态事件'
//2.2监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
#onMenuShareTimeline'
用户点击分享到朋友圈'
已注册获取“分享到朋友圈”状态事件'
//2.3监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
#onMenuShareQQ'
wx.onMenuShareQQ({
用户点击分享到QQ'
complete:
已注册获取“分享到QQ”状态事件'
//2.4监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
#onMenuShareWeibo'
wx.onMenuShareWeibo({
用户点击分享到微博'
已注册获取“分享到微博”状态事件'
//3智能接口
varvoice={
localId:
serverId:
//3.1识别音频并返回识别结果
#translateVoice'
if(voice.localId=='
){
请先使用startRecord接口录制一段声音'
return;
wx.translateVoice({
voice.localId,
if(res
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 javascript 获取 wxconfig 内部 字段 解决 分享