微信公众号sdk

Posted 2021-03-22 一个年轻淫

微信公众号开发
能享用微信公众号的API，比如分享给好友，分享到朋友圈，禁止菜单功能，选择图片，获取地址，以及支付

微信的功能有两种执行方式
一种是 wx.xx
一种是 WeixinJSBridge.call()

WeixinJSBridge是很老的方式，在微信网页才能使用的全局变量，不需要引入js插件，现在都不用了，但是去查资料会有很多，看了没用的，但是有两个是可以用的

// 禁止菜单功能
WeixinJSBridge.call('hideOptionMenu');

// 关闭当前页面
WeixinJSBridge.call('closeWindow');

除了上面的这两个，其他的功能都要用下面的写法
而且需要前提条件有

1. 公众号需要通过认证，认证之后才能在微信公众号后台的==开发==的==接口权限==里看到功能都是已获得，未获得就不配调用微信的API
2. 需要有服务器域名，域名配置在公众号后台的==JS接口安全域名==名单里
3. 需要引入wx的js插件，专业叫wxsdk文件
   js文件在微信公众号开发文档里下载，现在的版本是1.4
   如果是vue使用，weixin-js-sdk

配置阶段

// 引入js之后需要配置
// 除了jsApiList这个数组，其他的值都来自后端，就是跟后端拿值就行
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});
// 跟config写在一起就行，如果config配置成功，就会执行这个
wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
// 跟config写在一起就行，如果config配置出错，就会执行这个
wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

// jsApiList需要传参需要的功能
// 内容在下载js的链接的最下面就能看到

分享功能

// 微信文档有两个分享
// 一个是onMenuShareTimeline 和 onMenuShareAppMessage （即将废弃）
// 一个是updateAppMessageShareData 和 updateTimelineShareData
// 用哪个，用废弃的那个，新的只能在苹果手机使用，废弃的苹果手机和安卓都没问题

// 先配置
jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage"]

// ready是配置完成后会自动执行的
// 不是所有的方法都需要写在ready里的
// 但这两个需要
wx.ready(function(){
    wx.onMenuShareTimeline({
    title: '参数传标题',
    imgUrl: '参数传图片',
        success: function(){ ... }
    });
    wx.onMenuShareAppMessage({
    title: '参数传标题',
    imgUrl: '参数传图片',
    desc: '参数传副标题',
        success: function(){ ... }
    });
});

选择图片
这个是完美了解决了画布的兼容和BUG

// 需要用到的配置
jsApiList: ["chooseImage","getLocalImgData"]

// 当用户点击上传图片的按钮后
function ImgUpload(){
   // 打开微信相册的功能
   wx.chooseImage({
       count: 1, // 默认9,如果选多个是返回的数组
       sizeType: ['compressed'], // 可以指定是原图'original'还是压缩图，默认二者都有，这里屏蔽了原图
       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机'camera'，默认二者都有，这里屏蔽了相机
       success: function (res) {
            //这意味着只有ios8以上的手机才能用这个本地图片接口，而以下的版本如果使用JSSDK1.2.0版本会导致无法获取图片数据，或者使用1.1.0又无法预览图片的尴尬场面,另外用了1.2.0版本后uploadImage会出现file not exists的错误
            var localIds = res.localIds;  //这是数组
            getImgData(localIds[0]);  //但是这个程序只要一张图片，所以取值arr[0]
        }
    })
}

function getImgData(localIds){
    // 选择图片后用微信的功能转成base64
    wx.getLocalImgData({
        localId:localIds,
        success: function (res){
            //base64
            var localData = res.localData;  
            /*判断ios是不是用的 wkwebview 内核*/
            if (window.__wxjs_is_wkwebview){
                localData = localData.replace('data:image/jgp', 'data:image/jpeg');
            }else{
                if (localData.indexOf('data:image') != 0) {
                    //判断是否有这样的头部
                    localData = "data:image/jpeg;base64," + localData;
                }
            }
            // 这个值就可以直接传给后端了
            console.log(localData)
        }
    })
}

获取当前经纬度
这个配合腾讯地图使用，查看下一篇

支付
需要商家向微信申请开通支付
然后配置白名单，查看配置方式

WeixinJSBridge.invoke('getBrandWCPayRequest',{
     "appId":appId,     //公众号名称,由商户传入
     "timeStamp":timeStamp,         //时间戳,自1970年以来的秒数
     "nonceStr":nonceStr, //随机串
     "package":package,
     "signType":signType,         //微信签名方式：
     "paySign":paySign //微信签名
  },function(res){
    methods.hideLoading();
    if(res.err_msg == "get_brand_wcpay_request:ok" ) {
        console.log('支付成功');
    }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
        console.log('支付取消');
    }else if(res.err_msg == "getBrandWCPayRequest:fail_nopermission"){
        console.log('当前版本不支持，请检查升级或到微信中支付！');
     }else if(res.err_msg == "get_brand_wcpay_request:fail_nopermission"){
        console.log('当前版本不支持，请检查升级或到微信中支付！');
     }else if(res.err_msg == "get_brand_wcpay_request:fail"){
        console.log('支付失败');
    }
});