微信公众号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使用，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('支付失败');
	}
});