小程序嵌套h5(h5引用微信api)

1.index.html引入

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"><\/script>

2.在公众号!!!里 前端配置js接口安全域名 后台地址需要配置白名单
3.可以全局使用window.wx

//先配置
config(){
        const {configValue} =this.state
        window.wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
              appId: configValue.appId, // 必填,公众号的唯一标识公众号公众号公众号
              timestamp: configValue.timestamp, // 必填,生成签名的时间戳
              nonceStr: configValue.noncestr, // 必填,生成签名的随机串
              signature: configValue.signature, // 必填,签名,见附录1n
              jsApiList: ['chooseImage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });
        window.wx.ready(()=> {
              console.log("配置成功")
              this.chooseImage()
            });
        window.wx.error((res)=> {
            
              console.log("配置失败",res)
            })
      }

    //微信摄像头
    chooseImage=()=>{
        window.wx.chooseImage({
            count: 1, //默认9
            sizeType: ['compressed','original'], //可以指定是原图还是压缩图,默认二者都有
            sourceType: ['camera','album'], //从相册选择
            success:  req=> {
                console.log('img',req.localIds[0].toString())
                //转64
                window.wx.getLocalImgData({
                    localId: req.localIds[0].toString(),
                    success: res=> {
                        const localData = res.localData;
                        let imageBase64 = '';
                        if (localData.indexOf('data:image') == 0) {
                            //苹果的直接赋值,默认生成'data:image/jpeg;base64,'的头部拼接
                            imageBase64 = localData;
                        } else {
                            //安卓的坑!在拼接前需要对localData进行换行符的全局替换
                            imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
                        }
                        this.setState({
                            loading: true,
                            englishEnd: false,
                        })
                        this.uploadImage(this.base64ToBlob(imageBase64))
                    }
                });
                // imgToBase64(res)
            }
        })
    }

    //转formdata格式
    base64ToBlob=(dataurl)=> {
        let arr = dataurl.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }
    
    //上传
    uploadImage = (file) => {
        const formData = new FormData()
        formData.append('file', file)
        //再调后台接口上传就行
    }
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值