微信公众号sdk

微信公众号开发
能享用微信公众号的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使用,

配置阶段

// 引入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('支付失败');
    }
});