微信公众号：以选择图片为例来描述如何使用JS-SDK

引入

如果是普通的H5，直接使用script标签引入即可，如在index.html页面加入下列代码：

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

而如果是比如uniapp开发的H5项目，由于有干扰内容，可以选择使用npm的包管理方式：

import wx from 'weixin-js-sdk';

配置

也就是使用wx.config来配置需要的权限。

为了让wx.config通过，需要一些参数，项目 WeChat-offiaccount 提供了本地调试的例子和相关说明，你可以直接使用测试号而无需申请公众号（现在个人好像已经无法申请了）。

这里如果有不清楚的可以在这里或者issues给我们留言~

选择图片

正常来说，wx.config配置好了以后，直接通过wx.chooseImage即可：

wx.ready(function () {
    wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res1) {
            // todo
        }
    });
});

上面回调参数res1，比如你选择了一张图片，那么图片临时地址就是：

res1.localIds[0]

如果你把这个设置成image标签的src，那么很可能会显示不出来，怎么办？

变成base64

我们需要使用getLocalImgData来把这个地址变成base64，就像这样：

wx.getLocalImgData({
    localId: res1.localIds[0],
    success: function (res2) {
        // todo
    }
});

兼容写法

其中，res2.localData就是图片的base64，当然，这只是针对苹果手机的，如果是安卓手机，就不一样了。所以兼容的获取方法是：

let imgbase64;
if (/^data:image/.test(res2.localData)) {
    imgbase64 = res2.localData;
} else {
    imgbase64 = 'data:image/jpeg;base64,' + res2.localData;
}