微信小程序 webview网页使用微信方法-jssdk及常见问题_微信小程序jssdk

在微信小程序的webview网页中，想要使用微信方法，需要使用微信的jssdk。

一、使用方式：

1.引入jssdk

// 注入微信jssdk
const _loadWxSdk = async () => {
  if (!window.wx) {
    return new Promise((res, rej) => {
      return Prof.requireRemote(
        {
          src: 'https://res.wx.qq.com/open/js/jweixin-1.0.0.js',
        },
        async () => {
          await _initWxBridge()
          res()
        }
      )
    })
  }
  return _initWxBridge()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.验证签名，注册要使用的方法

// 验签&注册要使用的webview方法
const _initWxBridge = async () => {
  const isIOS = /iphone os/i.test(window.navigator.userAgent.toLowerCase())
  // ios微信的坑，jssdk验签时的url不是官网文档上的动态获取当前url，而是进入页面时的初始url
  const urlLink = isIOS ? window.location.href : window.location.href.replace(/#.*/, '')
  // 该接口需要后端提供
  const result = await window.$store.dispatch('common/getSignatureV2', {
    url: urlLink,
    srvno: 'xxx',
    source: 'weixin',
  })

  window.wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: result.appId, // 必填，公众号的唯一标识
    timestamp: result.timestamp, // 必填，生成签名的时间戳
    nonceStr: result.noncestr, // 必填，生成签名的随机串
    signature: result.signature, // 必填，签名
    jsApiList: ['getLocation'], // 必填，需要使用的JS接口列表
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.使用方法

    _loadWxSdk().then(() => {
      if (window.wx) {
        wx.ready(function() { //如果需要在页面加载完成后就使用sdk方法，可以放在wx.ready方法中使用
          wx.getLocation({
            type: 'wgs84',
            success(res: any) {
              const latitude = res.latitude
			  const longitude = res.longitude
			  const speed = res.speed
			  const accuracy = res.accuracy
            },
            complete(res: any) {
              console.log('getLocation-complete-res: ', res)
            },
          })
        })
        wx.error(function(res: any) {
          console.log('wx.error-res: ', res)
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        })
      }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

二、验证方式：

1.真机验证

需要在微信开发者平台中，添加域名（ip不能添加，http不能添加），添加后即可真机测试

2.本地测试

对于不方便添加域名的地址，如本地、测试环境等ip地址或http地址，可以在微信开发者工具中进行测试，

步骤一：切换为【公众号网页调试】

步骤二：在地址栏中输入（可能会卡多请求两次稍微等等）：
https://www.weixinsxy.com/jssdk/（用这个就行）
http://demo.open.weixin.qq.com/jssdk(这个好像没用)

步骤三：在地址栏输入自己要访问的地址并回车请求
http://localhost:8080

就好了

三、常见问题

官方文档提供的错误码及解决方案

1.config:fail, invalid url domain

意思是无效的url域名，此时需要登录公众号，检查【业务域名】、【网页授权域名】、【JS接口安全域名】跟网页是否匹配。

2.getLocation:invalid signature

无效的签名，此时需要检查wx.config里面配置的参数是否正确。

另外务必检查调用后端的获取JSSDK配置信息时，需要传入的当前页面url是否正确，注意应该采用location.href.split(‘#’)[0]这种样式。

3.showOptionMenu:permission denied

无权限的意思。

注意检查公众号是否有权限，登录公众号，在【设置与开发】-【接口权限】中检查。

另外检查config的jsApiList需要包含要调用的JSSDK。

最后务必注意，invalid signature中的错误，也会触发当前问题，尤其是向后端传递的url。

4.getLocation:fail, the permission value is offline verifying

可能是config配置错。

如果页面一开始就调用JSSDK，那么需要将调用放入wx.ready。

config的jsApiList需要包含要调用的JSSDK。

最后务必注意，invalid signature中的错误，也会触发当前问题，尤其是向后端传递的url。
参考链接：
https://blog.csdn.net/woshisangsang/article/details/122681496

四、相关文档

定位getLocation：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
小程序半屏打开：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/openEmbeddedMiniProgram.html
js-sdk文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#0
web-view文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
管理平台：https://mp.weixin.qq.com/wxamp/index/index?token=81477799&lang=zh_CN
开放社区：https://developers.weixin.qq.com/community/homepage
jssdk地址：https://res.wx.qq.com/open/js/jweixin-1.0.0.js
本地测试方案（开发者工具–公众号网页调试）：https://blog.csdn.net/qq_45530512/article/details/129381813