本地调试和开发微信 jssdk 主要一下几个步骤.
1.修改hosts 中的指定域名的指向;
2.让自己的平台服务在80端口,如果80端口不能直接用就端口转发一下. windows 下也可以再服务前面增加一层 nginx 反向代理一次.
3.找一个代理软件,并将自己的电脑和手机,放置在同一个 wifi 内.把手机的代理设置指向到自己的电脑,这样访问指定域名的时候就会由自己的电脑提供服务;
4.在微信平台配置安全域名.在微信平台配置 accesstoken 的白名单;
5.写代码提供 jsticket 的认证.特别注意 url, 哪怕错一个?号都会认证失败.也就是同样一个http://xxx.xxx.com/F0602与http://xxx.xxx.com/F0602?phoneNo=12345678901就是两个不同的域名了,验证就会通不过, jssdk 一定会去验证当前浏览器地址栏中的 url.
1 hosts 修订
因为微信的 jssdk 一定是要求设置引用的安全域名的,所以,在调试期间,一定要把本地的 hosts 修改一下,让指定的域名指向本地的 ip.
mac os 下 sudo vim /etc/hosts ,打开,进行修改;配置一个域名到 ip, 这个 ip 最好是192,等开头的路由器分配的 ip 而不是127那个 ip, 不然用手机等其他设备还是无法访问的;
2 端口转发
貌似这个在 windows 下都不是个事儿,但是在 macos 中,不允许使用1024一下的端口,所以还需要做一次端口的转发.
具体步骤如下.
主体步骤是:
- 查看当前端口转发给状态;
- 查看 ip 与网卡名称
- 建立转发规则文件
- 将转发规则文件放入系统转发规则中
- 启动转发
2.1.查看本地的转发状态
$ sudo sysctl -w net.inet.ip.forwarding=1
net.inet.ip.forwarding: 0 -> 1
2.2.查看 ip 与网卡名称
ifconfig
主要看 ip 地址与网卡的对应关系.在创建转发规则的时候配置使用.
2.3.建立转发规则文件
文件可以创建在 /etc/pf.anchors/目录,可以随意命名文件名.比如 http
文件内容根据查看到的网卡名称和 ip 进行配置:
rdr pass on lo0 inet proto tcp from any to any port 80 -> 127.0.0.1 port 9000
rdr pass on en0 inet proto tcp from any to any port 80 -> 192.168.31.167 port 9000
注意文件最后一行增加回车.
运行一次检查配置文件
$ sudo pfctl -vnf /etc/pf.anchors/http
验证正确进行以后的步骤.
2.4.放入系统转发规则文件
编辑 /etc/pf.conf 文件,因为转发有顺序要求,所以就按文档说明,
在rdr-anchor "com.apple/*" 下增加我们的转发锚点,比如
rdr-anchor "ylmt"
然后再load anchor "com.apple" from "/etc/pf.anchors/com.apple"这行之后加载我们自己的锚点
load anchor "ylmt" from "/etc/pf.anchors/http"
2.5.启动转发
使用指令
$ sudo pfctl -evf /etc/pf.anchors/http
启动我们的转发规则文件.
以上就完成了端口转发.
3.代理软件
根据网络推荐使用了 SquidMan. 配置 服务端口为自己制定的端口,注意手机上也要配置相同的代理端口.
修改squidMan配置中的templet 中的两个项目.
# 修改http_access deny all
http_access allow all
# 修改http_access deny to_localhost
http_access allow to_localhost
特别注意的是,配置后要重新启动 squidman.
手机的代理设置比较简单,不展开了.
4.微信平台设置
到了这一步基本上如果平台是正常的,那就可以正常使用了.但是由于微信平台的安全限制,需要在
平台设置中设置 js 安全域名.并设置 accesstoken 的白名单.这样我们请求 accesstoken 和拿到 jssdk 以后才能正常配置出效果来.
5.代码部分.
使用的流程是
1.拿到access_token
2.用access_token 去拿到js_ticket;
3.用 appid,js_ticket 和 url创建 调用jssdk 用的 config中的签名参数等.
4.配置成功后开始绑定weixin jssdk 提供的功能函数.
一下是一个代码段.供参考.中间就涉及到 url 带参数或者不带参数的问题.这个非常容易被忽视.
//微信上传接口
var p="$!{refereePhoneNo}";
var url=p==""?"/F0602":"/F0602?phoneNo="+p;
$.get("/wx/jsconfig",{url:url},function(data){
wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ['chooseImage','uploadImage']
});
wx.ready(function () {
//绑定图片选择上传的函数
$(".upload").click(function(e) {
var id = $(this).attr("id");
wx.chooseImage({
count: 1, // 默认9
sizeType: [ 'compressed'], // 这里指定压缩，'original',可以指定原图
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (result) {
var photoId = result.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
$("#"+id+"Msg").html("<img src='" + photoId + "' style='max-width:100%;max-height:150px;'>");
console.log(result);
wx.uploadImage({
localId: photoId,
isShowProgressTips: 1,
success: function(r) {
console.log(r);
var serverId = r.serverId;
$.post("/F0602/ajax2",{serverId:serverId},function(res) {
console.log(res);
$("#"+id+"Msg").html("<img src='" + res.data + "' style='max-width:100%;max-height:150px;'>");
if(id=="idcardPhoto"){
vm.row.idcardPhoto=res.data;
}
if(id=="payPhoto"){
vm.row.payPhoto=res.data;
}
},"json");
}
});
}
});
});
});
},"json");
经历了这些之后你就可以顺利的玩耍微信 jssdk 了.
网友评论