需求：微信小程序内部使用WebView，内嵌H5页面，使用微信小程序API

本文主要记录一下在实际开发中遇到的坑以及需要注意的事项，一步一步列出

微信小程序官方说明：developers.weixin.qq.com/doc/offiacc...

必须的：需要有公众号，并且这个公众号可以和小程序绑定

为什么需要和公众号绑定，明明是小程序开发/(ㄒoㄒ)/~，害得一开始找半天，不过微信小程序腾讯一言堂倒也能理解╮(╯▽╰)╭

方案步骤

H5配置

1、绑定域名

按照文档说明进入微信公众平台配置安全域名即可

`注意：`

 微信公众平台，扫码登录时，使用公众号登录
 这个绑定安全域名的公众号是需要和微信小程序绑定的，所以先确定是否可以绑定

2、引入JS文件

复制文档上的cdn链接引入H5项目即可我是vue项目，在根目录的index.html页面中引入

js 复制代码

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

3、通过config接口注入权限验证配置

这一步是为了验证上面引入的链接是否生效，按照官方配置即可。

我使用vue3开发，就直接在APP.vue页面中调用了

js 复制代码

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳 
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['chooseImage','getLocation'] // 必填，需要使用的JS接口列表，我在H5页面中使用了选择图片和获取当前地理位置
});

debug

arduino 复制代码

在开发的时候我们就可以开起来，当我们在H5中配置好，可以去小程序开发工具中验证,上线记得false掉

appId

是你的公众号appid，使用公众号登录的微信公众平台才可以看到

timestamp、nonceStr

go 复制代码

前端直接生成即可，目的是为了和 `signature`生成的签名匹配

最重要的 signature

signature 具体说明以及验证地址：微信 JS 接口签名校验工具 (qq.com)

lua 复制代码

其中需要的jsapi_ticket是在小程序中由后端调用接口返回的，具体查看文档
url是当前网页的URL，不包含#及其后面部分。注意：对于没有只有域名没有 path 的 URL ，浏览器会自动加上 / 作为 path，如打开 http://qq.com 则获取到的 URL 为 http://qq.com/

jsApiList

css 复制代码

写入想要在H5页面中调用的哪些微信小程序API（接口列表见附录2）
有些API需要申请开通，比如 `getLocation`这种需要先申请才能用的API也是一样，申请通过才可以使用

签名算法附录1，JS接口列表附录2

项目源码

js 复制代码

const initWxConfig = async () => {
  let obj = {
    appId: 'wxf7342xxxxxx', // 必填，公众号的唯一标识公众号公众号公众号
    timestamp: Math.floor(Date.now() / 1000), // 必填，生成签名的时间戳
    noncestr: generateRandomString(16), // 必填，生成签名的随机串 generateRandomString:生成16位随机字符串
  }
  let con = {
    jsapi_ticket: '从小程序获取到的jsapi_ticket',
    url: location.href，// 当前页面
  }
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: obj.appId,
    timestamp: obj.timestamp,
    nonceStr: obj.noncestr,
    signature: getSignature({ ...obj, ...con }), // 必填，填任意非空字符串即可
    jsApiList: ['getLocation'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  });
  wx.ready(() => {
    console.log("配置成功")

  });
  wx.error((res) => {
    console.log("配置失败", res)
  })
}

好~到这里H5页面基本配置的就差不多了，接下来可以到小程序开发工具中测试了

小程序

js 复制代码

<web-view src="https://dddata.com/VitionR?ticket={{ jsapi_ticket }}&authId={{paramsAuthIdH5}}&token={{loginToken}}"></web-view>

小程序与WebView传参受限，使用了query传参，将H5需要的数据传输

go 复制代码

https://dddata.com/xxxx: 想要打开的地址，建议进行下环境判断，到时候部署到正式就不用再修改了，问号后面跟的就是你自己的参数了
这一步会卡住比较多的时间。大多卡在签名问题，主要是签名中的`jsapi_ticket`，
这个需要和后端确认，是通过你H5里面配置的公众号appid获取到的才可以
还有就是微信公众平台公众号中是否将https://dddata.com/xxxx（也就是你的H5页面）域名添加到安全域名

如果前期准备的顺利的话会很快，我们进行下一步，在H5中调用，官方文档上也说明了各种报错的相应提示点击查看

H5中调用

上面都进行完毕，我们就可以正式在H5中使用微信小程序API了

开放能力 / web-view (qq.com)

首先可以从上面链接查看，在H5中能使用小程序的哪些能力，关于路由的API是可以不用声明的，其他的根据H5上面配置的 jsApiList 就可以使用了，API规则与小程序中一样

js 复制代码

// 跳转到小程序中的页面
wx.miniProgram.switchTab({
    url: 'pages/index/index'  // url是你在小程序中App.json中的页面路径
})

// 获取定位
wx.getLocation({
    type: 'gcj02',
    async success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
    }
})

除了配置之外，就是发布正式环境时的一些配置了，公众号的安全域名，小程序的业务域名

到这里就可以正式进入开发了，在实际开发中肯定还有其他问题，大家评论区见

H5页面使用微信小程序JSsdk，微信内嵌WebView使用微信小程序JSsdk

方案步骤

H5配置

1、绑定域名

注意：

2、引入JS文件

3、通过config接口注入权限验证配置

小程序

H5中调用

`注意：`