收藏
下载资源下载资源 加入VIP,免费下载

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

上传人：b****8 文档编号：9390506 上传时间：2023-02-04 格式：DOCX 页数：37 大小：23.96KB
下载 相关 举报
使用javascript获取wxconfig内部字段解决微信分享.docx_第1页
第1页 / 共37页
使用javascript获取wxconfig内部字段解决微信分享.docx_第2页
第2页 / 共37页
使用javascript获取wxconfig内部字段解决微信分享.docx_第3页
第3页 / 共37页
使用javascript获取wxconfig内部字段解决微信分享.docx_第4页
第4页 / 共37页
使用javascript获取wxconfig内部字段解决微信分享.docx_第5页
第5页 / 共37页
点击查看更多>>
下载资源
资源描述

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

《使用javascript获取wxconfig内部字段解决微信分享.docx》由会员分享，可在线阅读，更多相关《使用javascript获取wxconfig内部字段解决微信分享.docx（37页珍藏版）》请在冰豆网上搜索。

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

使用javascript获取wxconfig内部字段解决微信分享

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

背景

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

php

require_once"jssdk.php";

$jssdk=newJSSDK（"yourAppID","yourAppSecret"）;

$signPackage=$jssdk->GetSignPackage（）;

?

>

DOCTYPEhtml>

微信分享

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

DOCTYPEhtml>

静态页面微信分享测试

configdata.php后台获取配置的参数注意url要写上自己被分享的页面url不然会报invalidsignature错误

php

classJSSDK{

private$appId;

private$appSecret;

publicfunction__construct（$appId,$appSecret）{

$this->appId=$appId;

$this->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×tamp=$timestamp&url=$url";

$signature=sha1（$string）;

$signPackage=array（

"appId"=>$this->appId,

"nonceStr"=>$nonceStr,

"timestamp"=>$timestamp,

"url"=>$url,

"signature"=>$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

$accessToken=$this->getAccessToken（）;

$url="

$res=$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,$data））;

fclose（$fp）;

}

}else{

$ticket=$data->jsapi_ticket;

}

return$ticket;

}

privatefunctiongetAccessToken（）{

//access_token应该全局存储与更新，以下代码以写入到文件中做示例

$data=file_get_contents（"access_token.json"））;

if（$data->expire_time

$url="

$res=$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,$data））;

fclose（$fp）;

}

}else{

$access_token=$data->access_token;

}

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将配置参数格式化输出

php

require_once"weixin.php";

$jssdk=newJSSDK（appId,appSecretecret）;

$signPackage=$jssdk->GetSignPackage（）;

classConfig{

var$appId;

var$timestamp;

var$nonceStr;

var$signature;

var$url;

}

$config=newConfig（）;

$config->appId=$signPackage["appId"];

$config->timestamp=$signPackage["timestamp"];

$config->nonceStr=$signPackage["nonceStr"];

$config->signature=$signPackage["signature"];

$config->url=$signPackage["url"];

echo$config）;

?

>

 

getconfig.js使用ajax获取接口数据（配置参数）

vargetConfig=function（callback）{

$.ajax（{

url:

"

type:

"get",

success:

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,

appId:

data.appId,

timestamp:

data.timestamp,

nonceStr:

data.nonceStr,

signature:

data.signature,

jsApiList:

['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage']

}）;

wxShare（）;

}

functionwxShare（）{

//检测api是否生效

wx.ready（function（）{

wx.checkJsApi（{

jsApiList:

[

'getNetworkType',

'previewImage'

],

success:

function（res）{

console.log（JSON.stringify（res））;

}

}）;

//分享给好友

wx.onMenuShareAppMessage（{

title:

'趣学车-有温度的互联网驾校',

desc:

'想去学车，就趣学车!

',

link:

'',

imgUrl:

'

}）;

//分享到朋友圈

wx.onMenuShareTimeline（{

title:

'趣学车-有温度的互联网驾校',

desc:

'想去学车，就趣学车!

',

link:

'',

imgUrl:

'

}）;

}）;

}

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（）{

wx.checkJsApi（{

jsApiList:

[

'getNetworkType',

'previewImage'

],

success:

function（res）{

alert（JSON.stringify（res））;

}

}）;

};

//2.分享接口

//2.1监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口

document.querySelector（'#onMenuShareAppMessage'）.onclick=function（）{

wx.onMenuShareAppMessage（{

title:

'互联网之子方倍工作室',

desc:

'在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。

更重要的是，有些事既然错了，那就该做出改变。

',

link:

'

imgUrl:

'

trigger:

function（res）{

alert（'用户点击发送给朋友'）;

},

success:

function（res）{

alert（'已分享'）;

},

cancel:

function（res）{

alert（'已取消'）;

},

fail:

function（res）{

alert（JSON.stringify（res））;

}

}）;

alert（'已注册获取“发送给朋友”状态事件'）;

};

//2.2监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口

document.querySelector（'#onMenuShareTimeline'）.onclick=function（）{

wx.onMenuShareTimeline（{

title:

'互联网之子方倍工作室',

link:

'

imgUrl:

'

trigger:

function（res）{

alert（'用户点击分享到朋友圈'）;

},

success:

function（res）{

alert（'已分享'）;

},

cancel:

function（res）{

alert（'已取消'）;

},

fail:

function（res）{

alert（JSON.stringify（res））;

}

}）;

alert（'已注册获取“分享到朋友圈”状态事件'）;

};

//2.3监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口

document.querySelector（'#onMenuShareQQ'）.onclick=function（）{

wx.onMenuShareQQ（{

title:

'互联网之子方倍工作室',

desc:

'在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。

更重要的是，有些事既然错了，那就该做出改变。

',

link:

'

imgUrl:

'

trigger:

function（res）{

alert（'用户点击分享到QQ'）;

},

complete:

function（res）{

alert（JSON.stringify（res））;

},

success:

function（res）{

alert（'已分享'）;

},

cancel:

function（res）{

alert（'已取消'）;

},

fail:

function（res）{

alert（JSON.stringify（res））;

}

}）;

alert（'已注册获取“分享到QQ”状态事件'）;

};

//2.4监听“分享到微博”按钮点击、自定义分享内容及分享结果接口

document.querySelector（'#onMenuShareWeibo'）.onclick=function（）{

wx.onMenuShareWeibo（{

title:

'互联网之子方倍工作室',

desc:

'在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。

更重要的是，有些事既然错了，那就该做出改变。

',

link:

'

imgUrl:

'

trigger:

function（res）{

alert（'用户点击分享到微博'）;

},

complete:

function（res）{

alert（JSON.stringify（res））;

},

success:

function（res）{

alert（'已分享'）;

},

cancel:

function（res）{

alert（'已取消'）;

},

fail:

function（res）{

alert（JSON.stringify（res））;

}

}）;

alert（'已注册获取“分享到微博”状态事件'）;

};

 

//3智能接口

varvoice={

localId:

'',

serverId:

''

};

//3.1识别音频并返回识别结果

document.querySelector（'#translateVoice'）.onclick=function（）{

if（voice.localId==''）{

alert（'请先使用startRecord接口录制一段声音'）;

return;

}

wx.translateVoice（{

localId:

voice.localId,

complete:

function（res）{

if（res

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置：首页 > 自然科学 > 物理

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1