Micro-channel public number sdk

No. develop micro-channel public
can enjoy a number of micro-channel public API, for example, share with friends, circle of friends to share prohibit function menu, select a picture, get the address, and payment

Function of the micro-channel implementation, there are two
one is wx.xx
one is WeixinJSBridge.call ()

WeixinJSBridge is a very old way, in a global variable micro-letter web page in order to use and does not require the introduction of js plugins, now no, but there will be a lot of data to check, I looked useless, but there are two that can be used

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

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

In addition to the above two, the other functions to be used for the following wording
but also preconditions have

No need through the public after certification, certified to == == development of micro-channel public number in the background of the interface privileges == == saw features are already available, did not get the letter does not deserve to call micro API
List == == JS interface security domain name server needs to have domain names in public configured number in the background
The need to introduce wx js plugin called professional wxsdkfile
js file in the development of micro-channel public number documentation download, current version is 1.4
if using a vue, Weixin-js-sdk

Configuration phase

// 引入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的链接的最下面就能看到

Sharing

// 微信文档有两个分享
// 一个是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(){ ... }
    });
});

Select Image
This is the perfect canvas to solve the compatibility and 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)
        }
    })
}

Get the current latitude and longitude of
the map with the use of Tencent, View the next

Payment
required businesses to apply for the opening of micro-channel payment
and then configure the white list, viewing the configuration.

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

Micro-channel public number sdk

Guess you like