wx2 qq com

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

背景

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

<?php

require_once"";

$jssdk=newJSSDK("yourAppID","yourAppSecret");

$signPackage=$jssdk->GetSignPackage();

?>

上面是一个php文件，这样的代码的一个很大缺点是前后端未分离耦合度太高，再一就是混合写不是很美

观，所以我们要让PHP和HTML分离，要实现分享功能，首先就是要调用用微信的jssdkApi获取到配置参

数，这个必须是要通过php后台语言来获取的，然后将这些参数配置于中，在之前要

先引入/open/js/然后就可以写分享的函数了，他们的依赖关系是

需要js库和config内部的参数，分享依赖

所以最重要的就把php的配置参数分离出来单独获取即可

解决方案

将获取配置参数的PHP写作为接口，在js里使用ajax调用，获取参数并转换为对象，再通过回调函数将ajax

获取的参数塞到中

代码结构及功能

页面入口

服务器端获取配置参数

将配置转为借口输出

用ajax获取的数据

分享回调函

ack配置文件

打包后最终html调用js文件

ml静态文件

后台获取配置的参数注意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="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

$str="";

for($i=0;$i<$length;$i++){

$str.=substr($chars,mt_rand(0,strlen($chars)-1),1);

}

return$str;

}

privatefunctiongetJsApiTicket(){

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

$data=json_decode(file_get_contents("jsapi_"));

if($data->expire_time

$accessToken=$this->getAccessToken();

$url="/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_","w");

fwrite($fp,json_encode($data));

fclose($fp);

}

}else{

$ticket=$data->jsapi_ticket;

}

return$ticket;

}

privatefunctiongetAccessToken(){

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

$data=json_decode(file_get_contents("access_"));

if($data->expire_time

$url=

"/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appS

ecret";

$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_","w");

fwrite($fp,json_encode($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;

}

}

将配置参数格式化输出

<?php

require_once"";

$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"];

echojson_encode($config);

?>

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

vargetConfig=function(callback){

$.ajax({

url:"/api/",

type:"get",

success:function(data){

callback(data);

}

})

}

s=getConfig;

分享函数

vargetWeixincofig=require("./");

getWeixincofig(shareweixin);

functionshareweixin(data){

vardata=(data);

(data);

({

debug:true,

appId:,

timestamp:amp,

nonceStr:tr,

signature:ure,

jsApiList:['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage']

});

wxShare();

}

functionwxShare(){

//检测api是否生效

(function(){

sApi({

jsApiList:[

'getNetworkType',

'previewImage'

],

success:function(res){

(ify(res));

}

});

//分享给好友

ShareAppMessage({

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

desc:'想去学车，就趣学车!',

link:'',

imgUrl:'/....png'

});

//分享到朋友圈

ShareTimeline({

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

desc:'想去学车，就趣学车!',

link:'',

imgUrl:'/....png'

});

});

}

varwebpack=require('webpack');

s={

entry:{

index:'./',

},

output:{

path:'./',

filename:'[name].js'

}

参考资料：

微信JSSDKDemo

微信JS-SDK分享到朋友圈分享给朋友分享到QQ拍照或从手机相册中选图识别音频并返回识别结果

使用微信内置地图查看位置

一、JS部分

复制代码

(function(){

//1判断当前版本是否支持指定JS接口，支持批量判断

elector('#checkJsApi').onclick=function(){

sApi({

jsApiList:[

'getNetworkType',

'previewImage'

],

success:function(res){

alert(ify(res));

}

});

};

//2.分享接口

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

elector('#onMenuShareAppMessage').onclick=function(){

ShareAppMessage({

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

desc:'在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，

注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出

改变。',

link:'/subject/25785114/',

imgUrl:'/view/movie_poster_cover/spst/public/',

trigger:function(res){

alert('用户点击发送给朋友');

},

success:function(res){

alert('已分享');

},

cancel:function(res){

alert('已取消');

},

fail:function(res){

alert(ify(res));

}

});

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

};

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

elector('#onMenuShareTimeline').onclick=function(){

ShareTimeline({

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

link:'/subject/25785114/',

imgUrl:'/view/movie_poster_cover/spst/public/',

trigger:function(res){

alert('用户点击分享到朋友圈');

},

success:function(res){

alert('已分享');

},

cancel:function(res){

alert('已取消');

},

fail:function(res){

alert(ify(res));

}

});

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

};

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

elector('#onMenuShareQQ').onclick=function(){

ShareQQ({

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

desc:'在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，

注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出

改变。',

link:'/subject/25785114/',

imgUrl:'/view/movie_poster_cover/spst/public/',

trigger:function(res){

alert('用户点击分享到QQ');

},

complete:function(res){

alert(ify(res));

},

success:function(res){

alert('已分享');

},

cancel:function(res){

alert('已取消');

},

fail:function(res){

alert(ify(res));

}

});

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

};

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

elector('#onMenuShareWeibo').onclick=function(){

ShareWeibo({

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

desc:'在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，

注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出

改变。',

link:'/subject/25785114/',

imgUrl:'/view/movie_poster_cover/spst/public/',

trigger:function(res){

alert('用户点击分享到微博');

},

complete:function(res){

alert(ify(res));

},

success:function(res){

alert('已分享');

},

cancel:function(res){

alert('已取消');

},

fail:function(res){

alert(ify(res));

}

});

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

};

//3智能接口

varvoice={

localId:'',

serverId:''

};

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

elector('#translateVoice').onclick=function(){

if(d==''){

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

return;

}

ateVoice({

localId:d,

complete:function(res){

if(Property('translateResult')){

alert('识别结果：'+ateResult);

}else{

alert('无法识别');

}

}

});

};

//4音频接口

//4.2开始录音

elector('#startRecord').onclick=function(){

ecord({

cancel:function(){

alert('用户拒绝授权录音');

}

});

};

//4.3停止录音

elector('#stopRecord').onclick=function(){

ord({

success:function(res){

d=d;

},

fail:function(res){

alert(ify(res));

}

});

};

//4.4监听录音自动停止

eRecordEnd({

complete:function(res){

d=d;

alert('录音时间已超过一分钟');

}

});

//4.5播放音频

elector('#playVoice').onclick=function(){

if(d==''){

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

return;

}

ice({

localId:d

});

};

//4.6暂停播放音频

elector('#pauseVoice').onclick=function(){

oice({

localId:d

});

};

//4.7停止播放音频

elector('#stopVoice').onclick=function(){

ice({

localId:d

});

};

//4.8监听录音播放停止

ePlayEnd({

complete:function(res){

alert('录音（'+d+'）播放结束');

}

});

//4.8上传语音

elector('#uploadVoice').onclick=function(){

if(d==''){

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

return;

}

Voice({

localId:d,

success:function(res){

alert('上传语音成功，serverId为'+Id);

Id=Id;

}

});

};

//4.9下载语音

elector('#downloadVoice').onclick=function(){

if(Id==''){

alert('请先使用uploadVoice上传声音');

return;

}

adVoice({

serverId:Id,

success:function(res){

alert('下载语音成功，localId为'+d);

d=d;

}

});

};

//5图片接口

//5.1拍照、本地选图

varimages={

localId:[],

serverId:[]

};

elector('#chooseImage').onclick=function(){

Image({

success:function(res){

d=ds;

alert('已选择'++'张图片');

}

});

};

//5.2图片预览

elector('#previewImage').onclick=function(){

wImage({

current:'/view/photo/photo/public/',

urls:[

'/view/photo/photo/public/',

'/view/photo/photo/public/',

'/view/photo/photo/public/'

]

});

};

//5.3上传图片

elector('#uploadImage').onclick=function(){

if(==0){

alert('请先使用chooseImage接口选择图片');

return;

}

vari=0,length=;

Id=[];

functionupload(){

Image({

localId:d[i],

success:function(res){

i++;

alert('已上传：'+i+'/'+length);

(Id);

if(i

upload();

}

},

fail:function(res){

alert(ify(res));

}

});

}

upload();

};

//5.4下载图片

elector('#downloadImage').onclick=function(){

if(===0){

alert('请先使用uploadImage上传图片');

return;

}

vari=0,length=;

d=[];

functiondownload(){

adImage({

serverId:Id[i],

success:function(res){

i++;

alert('已下载：'+i+'/'+length);

(d);

if(i

download();

}

}

});

}

download();

};

//6设备信息接口

//6.1获取当前网络状态

elector('#getNetworkType').onclick=function(){

workType({

success:function(res){

alert(kType);

},

fail:function(res){

alert(ify(res));

}

});

};

//8界面操作接口

//8.1隐藏右上角菜单

elector('#hideOptionMenu').onclick=function(){

tionMenu();

};

//8.2显示右上角菜单

elector('#showOptionMenu').onclick=function(){

tionMenu();

};

//8.3批量隐藏菜单项

elector('#hideMenuItems').onclick=function(){

nuItems({

menuList:[

'menuItem:readMode',//阅读模式

'menuItem:share:timeline',//分享到朋友圈

'menuItem:copyUrl'//复制链接

],

success:function(res){

alert('已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');

},

fail:function(res){

alert(ify(res));

}

});

};

//8.4批量显示菜单项

elector('#showMenuItems').onclick=function(){

nuItems({

menuList:[

'menuItem:readMode',//阅读模式

'menuItem:share:timeline',//分享到朋友圈

'menuItem:copyUrl'//复制链接

],

success:function(res){

alert('已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');

},

fail:function(res){

alert(ify(res));

}

});

};

//8.5隐藏所有非基本菜单项

elector('#hideAllNonBaseMenuItem').onclick=function(){

lNonBaseMenuItem({

success:function(){

alert('已隐藏所有非基本菜单项');

}

});

};

//8.6显示所有被隐藏的非基本菜单项

elector('#showAllNonBaseMenuItem').onclick=function(){

lNonBaseMenuItem({

success:function(){

alert('已显示所有非基本菜单项');

}

});

};

//8.7关闭当前窗口

elector('#closeWindow').onclick=function(){

indow();

};

//9微信原生接口

//9.1.1扫描二维码并返回结果

elector('#scanQRCode0').onclick=function(){

Code({

desc:'scanQRCodedesc'

});

};

//9.1.2扫描二维码并返回结果

elector('#scanQRCode1').onclick=function(){

Code({

needResult:1,

desc:'scanQRCodedesc',

success:function(res){

alert(ify(res));

}

});

};

//10微信支付接口

//10.1发起一个支付请求

elector('#chooseWXPay').onclick=function(){

WXPay({

timestamp:1414723227,

nonceStr:'noncestr',

package:

'addition=action_id%3dgaby1234%26limit_pay%3d&bank_type=WX&body=innertest&fee_type=1&input_charset

=GBK¬ify_url=http%3A%2F%2F120.204.206.246%2Fcgi-bin%2Fmmsupport-bin%2Fnotifypay&out_trade_no=

18375338&partner=1900000109&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF

73BCD177CEECBEF8D',

paySign:'bd5b1933cda6e9548862944836a9b52e8c9a2b69'

});

};

//11.3跳转微信商品页

elector('#openProductSpecificView').onclick=function(){

oductSpecificView({

productId:'pDF3iY0ptap-mIIPYnsM5n8VtCR0'

});

};

//12微信卡券接口

//12.1添加卡券

elector('#addCard').onclick=function(){

d({

cardList:[

{

cardId:'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',

cardExt:'{"code":"","openid":"","timestamp":"1418301401",

"signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'

},

{

cardId:'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',

cardExt:'{"code":"","openid":"","timestamp":"1418301401",

"signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'

}

],

success:function(res){

alert('已添加卡券：'+ify(st));

}

});

};

//12.2选择卡券

elector('#chooseCard').onclick=function(){

Card({

cardSign:'97e9c5e58aab3bdf6fd6150e599d7e5806e5cb91',

timestamp:1417504553,

nonceStr:'k0hGdSXKZEj3Min5',

success:function(res){

alert('已选择卡券：'+ify(st));

}

});

};

//12.3查看卡券

elector('#openCard').onclick=function(){

alert('您没有该公众号的卡券无法打开卡券。');

rd({

cardList:[

]

});

};

varshareData={

title:'方倍工作室微信JS-SDKDEMO',

desc:'微信JS-SDK,帮助第三方为用户提供更优质的移动web服务',

link:'/txw1958/',

imgUrl:

'/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0

N5TMnMfth7SdxtzMvVgXg/0'

};

ShareAppMessage(shareData);

ShareTimeline(shareData);

});

(function(res){

alert();

});

复制代码

二、HTML调用

复制代码

基础接口

分享接口

图像接口

音频接口

智能接口

设备信息接口

地理位置接口

界面操作接

口

微信扫一扫接口

微信小店接

口

微信卡券接口

微信支付接口