微信小程序里面嵌套的h5使用微信sdk配置踩坑

微信小程序里面的h5使用微信的sdk接口和在公众号使用没有区别，都需要通过微信的权限认证才能使用

使用前配置

• 需要用到服务号的appid,并在公众号后台配置js安全域名
• （踩坑）js安全域名不需要http或者https,否者权限认证会不生效。。在权限认证时会报invalid url domain错误。

权限签名认证

在进入页面后或者在使用到微信接口的页面进行权限认证，通过调用后台接口获取appid,时间戳，和微信签名，然后调用wx.config进行接口初始化，后面要使用到的接口一定要通过jsApiList配置后才能正常使用。初始化后会调用wx.ready函数，调用接口的时候一定要在初始化完成之后，否者会报错。
封装权限认证函数

import {wxValidateConfig} from '../server/getDataUrl'
export const wxConfig = async function() {
  let url
  const env = window.navigator.userAgent
  let isWxUa = env.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'
  // 判断是否是微信内置浏览器
  if(!isWxUa) return 
  url = window.sessionStorage.getItem('wxConfigSignUrl')
  // 小程序web-view环境需要用最初进入路由的第一个页面的url去签名
    // if (/miniProgram/.test(env)) {
    //   url = window.sessionStorage.getItem('wxConfigSignUrl')
    // }else {
    //   url = window.location.href.split('#')[0]
    // }
    const {data:res} = await wxValidateConfig(url)
    if(res.code == 200) {
          // 微信sdk权限验证
          window.wx.config({
              // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: res.data.appid, // 必填，公众号的唯一标识
              timestamp: res.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.noncestr, // 必填，生成签名的随机串
              signature: res.data.signatrue,// 必填，签名
              jsApiList: ['chooseImage','uploadImage','getLocalImgData','startRecord','stopRecord','onVoiceRecordEnd','playVoice','uploadVoice'] // 必填，需要使用的JS接口列表
            }),
          window.wx.ready(function() {
            
          }),
          window.wx.error(function(res) {
              console.log(res);
              console.log('验证失败');
          })
       }
}

（踩坑）通过url请求后台接口换取签名的时候，一定要用项目第一次进入的页面路径（小程序的web-view嵌套的h5页面是这样的），路径是web-view组件的src路径，否则权限认证的时候会报invalid signature签名错误，具体错误信息请参考常见错误及解决方法

配置成功后就可以正常调用微信的接口了。。。

微信图片上传的问题

通过调用微信的wx.chooseImage()接口可以调起手机的相机相册，选择成功后会返回一个图片的本地id,可以通过img的src属性正常预览图片，然后通过wx.uploadImage接口上传到微信服务器，上传成功后会返回一个服务器id，图片只能在微信服务器短期保存。要保存在自己服务器的话还需要调用微信官方的获取图片素材的接口，把图片从微信服务器下载下来，保存在本地服务器。

图片上传需要页面与微信服务器的交互，微信服务器与本地服务器的交互

微信录音接口

在微信小程序的web-view组件中调用手机的录音权限时，在权限认证成功后还是会报签名错误，不知道啥原因。。。。。（踩坑）

注意：微信小程序的web-view组件只有调用一部分微信的sdk接口的权限，并不是所有接口都能调用，详细请查看小程序web-view组件