微信JSSDK前端应用教程

一、配置公众号
①基本配置
首先，你得有一个微信公众号，然后登陆微信公众平台 https://mp.weixin.qq.com/
基本配置中的AppID和AppSecret后面都会用到
服务器配置的相关内容由后端配置

②公众号设置-功能设置

设置JS安全域名，一个自然月内最多可以修改并保存3次

③开发者工具-web开发者工具
绑定一波微信号，绑定之后才能使用web开发者工具

④接口权限-网页服务-网页账号-网页授权获取用户基本信息
填写授权回调页面域名

④微信支付-开发配置
授权目录需要在JS安全域名下
测试的话，测试号需要加入白名单
前端应用不同的框架，设置目录的方式也不同

JQ
授权目录直接截取页面url，http至最后一个”/“中间的内容
AngularJS
angular为SPA，只有第一次进入页面会引起全页面刷新，而之后的所有操作均是SPA内部的路由变换，只会引起哈希变化。
IOS和Android识别支付页面url的机制不同，IOS识别的是全页面刷新的url，Android识别的是发起支付请求页面的url，举个栗子，用户进入项目主页A，之后通过点击操作，最终在页面B发起支付请求，IOS识别的支付url还是页面A的url，而Android识别的是页面B的url，所以需要针对两个系统，设置两套不同的支付授权目录。用angularJS开发的时候，我们往往会将页面参数直接拼在url中的"/"后面，然而微信并不能智能识别后面的参数，将参数改成？a=xx&b=xx的形式就可以了。如果一个项目中，有多个支付页面，建议将所有页面放在一个目录下，那么针对Android只需要设置一个总的目录就行了。

⑤微信JS-SDK说明文档
https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html 看一波说明书
⑥微信网页开发样式库
http://mp.weixin.qq.com/wiki/2/ae9782fb42e47ad79eb7b361c2149d16.html
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页开发量身设计，可以令用户的使用感知更加统一

二、微信登陆
html中写好页面，记得先引入微信JS文件

然后在JS中加上点击事件

//微信登录
$("#wx")[0].onclick = function () {
var WxURL = 'https://open.weixin.qq.com/connect/oauth2/authorize?' +
   'appid={见第一步}' +
   '&redirect_uri=' + {授权之后跳转的网页，路径需在第一步中设置的授权回调页面域名下} +
   '?type=wx' +
   '&response_type=code' +
   '&scope=snsapi_userinfo' +
   '&state=STATE' +
   '#wechat_redirect';
   window.location.href = WxURL
};

登陆微信web开发者工具，点击页面中的微信登陆按钮，就会出现如下授权页面

点击确定之后，会跳转到之前设置的回调页面，同时url中会自动带上微信返回的code和state
http://{回调页面}?type=wx&code={code}i&state={code}#
接下来，我们需要取出url中的code，之后用code向后台请求，获取用户信息，
本来这个操作前端也可以进行，但是微信特意用红字注明提示了，
出于安全考虑，只能由后端来做

正常请求回来的话，就会看到用户的基本信息了

三、微信支付
微信支付有两个版本的接口，以前的微信接口都需要配置wx.config，最新版的微信支付V3接口不需要配置，直接使用就可以了
首先调用后端接口，获取以下微信订单信息

然后用这些参数，直接调取微信支付接口

  function onBridgeReady() {
       WeixinJSBridge.invoke(
           'getBrandWCPayRequest', {
               "appId": "{见第一步}",
               "timeStamp": {后端返回},
               "nonceStr": {后端返回},
               "package": {后端返回},
               "signType": "MD5",
               "paySign": {后端返回},
           },
           function (res) {
               console.log(res.err_code + "  " + res.err_desc + "  " + res.err_msg);
               if (res.err_msg == "get_brand_wcpay_request:ok") {
                   alertFn("充值成功");
               } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                   alertFn("用户取消支付");

               } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                   alertFn("支付失败");
               }
           }
       );
   }

需要注意的是，微信支付接口并不能直接在微信web开发者工具中模拟，会提示{ "errMsg": "没有此SDK或暂不支持此SDK模拟" }
此时就需要用到微信web开发者工具的移动调试功能，Android手机按照下图所示方法连接上手机后，在手机中打开微信页面，电脑上就可以实时模拟出效果，并且可以查看network和console，打断点调试，不过这功能似乎不太稳定，有时候network和console里面会显示一片空白。相比Android，IOS调试的功能就弱化很多，能看到页面html，看不到展示的效果，能看到network，打不了断点，所以微信开发，还是建议用Android进行调试。

附上官方demo:
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

四、微信红包提现
跟微信支付类似，其实官网文档上的大部分步骤都是在后端进行，前端只用各种调接口就行了

function withdraw() {
       $.ajax({
           type: "POST",
           url: "{后台接口}",
           data: {
               "userId": {用户id},
               "account": {用户uuid},
               "openid": {用户unionid},
               "drawFee": {订单金额},
               "actName": "{活动名称}",
               "wishing": "{祝福语}"
           },
           dataType: "json",
           success: function (res) {
               alert("请求成功");
           },
           error: function () {
               alert("请求失败");
           }
       });
   }

附上官方demo:
https://pay.weixin.qq.com/wiki/doc/api/tools/cash_coupon.php?chapter=13_5

五、微信分享
除了微信授权登录和微信支付之外，其他的微信接口，都需要先配置config

config中最重要的一个参数就是signature，需要先获得token，然后用token换取ticket，再按照规定的方式组合成签名，

具体方法详见 https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html 附录1
同理，token操作还是由后端进行，前端只需要传个url给后端，获取签名，再用签名来配置就行

这个签名经常一言不合就报错，官方文档也给出了排查方案

第6条说，url需要encode，但是实际操作的过程中，发现并不需要，加上反而会报错，可能是因为向后台get签名的时候，自动encode了
配置好之后，就可以直接调用分享接口了

内容很简单，需要注意的是，这里调用接口，只是修改的微信右上角菜单里面自带的分享功能的文案，并不是直接调用就可以触发分享操作
分享的触发还是只能点右上角的菜单

六、微信图片
微信提供了选择图片，上传图片、预览图片、下载图片4个接口，跟上面的分享一样，config配置好之后，就可以直接调用，这里以修改头像为例，来谈一下具体逻辑

// 微信-修改头像
var images = {
   localId: [],
   serverId: []
};
vm.chooseImage = function () {
   wx.chooseImage({
       success: function (res) {
           images.localId = res.localIds;
           wx.uploadImage({
               localId: images.localId[0],
               success: function (res) {
                   vm.media(res.serverId);  //将微信服务器id传给后台
               },
               fail: function (res) {
                   alert(JSON.stringify(res));
               }
           });
       }
   });
};

//将微信服务器id传给后台
vm.media = function (mediaId) {
   otherService.media({
       mediaId: mediaId
   }).then(function (res) {
       if (res.data.code == 0) {
           console.log(res);
           vm.changeAvatar(res.data.data.url);
       } else {
           alert(res.data.message);
       }
   });
};

//上传头像
vm.changeAvatar = function (img) {
   userService.put({
       img: img
   }).then(function (res) {
       if (res.data.code == 0) {
           vm.user.img = img;
           vm.errorMsg = "修改成功";
           commonUtil.clearErrorMsg(vm);
       } else {
           vm.errorMsg = "修改失败";
           commonUtil.clearErrorMsg(vm);
       }
   });
};

用户点击按钮后，调用选择图片接口，手机底部会弹出模态框，拍照或者从手机相册选择，这个页面是自带的，不用自己写
选中图片之后，微信会返回一个图片localId，然后调用图片上传接口，将本地图片上传至微信服务器，微信返回serverId，
这个Id并不能直接使用，需要将id传给后端，后端用这个id去微信服务器下载图片，并返回图片url，前端再用这个url去调用图片上传接口，
就可以实现修改头像功能。

七、官方demo
http://203.195.235.76/jssdk/

PS:上面的代码分别来自两个不同的项目，所以风格不一致，不要在意细节~

微信JSSDK前端应用教程

你可能感兴趣的:(微信JSSDK前端应用教程)