uniApp H5使用JSSDK对接微信公众号问题

news2024/9/24 18:28:05

问题1

uni-app开发微信应用引用JSSDK后 wx.agentConfig is not a function (或 wx.config is not a function)

原因：
因为uni-app自动集成了微信的 jweixin.js ，
所以通过
在浏览器打开然后保存下来js 文件
然后在项目中通过 import 引入就可以了

// const jWeixin = require('jweixin-module');
import jWeixin from './weixin/index.js'
console.log('-------jWeixin----', jWeixin)
import wxx from './jwxwork-1.0.0.js'

通过这种方式引入的jwxwork-1.0.0.js 会有下面这个报错
cannot read title of undefined

只要将文件中第一个 this 换成 windows 就可以了

问题2

config:fail,invalid signature
见名知意，这个就是signature前面错误

import lombok.extern.slf4j.Slf4j;
import java.security.MessageDigest;
import java.util.Formatter;

/**
 * 签名工具类
 *
 * @className: SignatureUtil
 * @author: rosszhang
 * @date: 2024/1/19 17:42
 */
@Slf4j
public class SignatureUtil {

    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash) {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }

    public static String signature(String sign) {
        String signature = "";
        try {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(sign.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
        } catch (Exception e) {
            log.error("签名获取失败：{}", e.getMessage(), e);
        }
        return signature;
    }

    public static String buildMessage(String jsapiTicket, String nonceStr, String timestamp, String url) {
        return "jsapi_ticket=" + jsapiTicket +
                "&noncestr=" + nonceStr +
                "&timestamp=" + timestamp +
                "&url=" + url;
    }
}

用法：

String signStr = SignatureUtil.buildMessage(jsapiTicket,nonceStr,timestamp,requestUrl);
String signature = SignatureUtil.signature(signStr);

问题3

config:fail,invalid url domain

这个问题就是域名的问题

在<公众号设置>–<基本设置>–中添加本地ip映射的域名
~~注：问题4解决办法也适用~~

问题4

scanQRCode:fail, the permission value is offline verifying

原因：
1、确认config的jsApiList参数包含了这个JSAPI
2、确认公众号白名单/js接口安全域名
3、确认后台是否成功返回签名
4、我们一般测试的时候都是用的127.0.0.1/localhost/IP地址，此时生成的的签名，在访问的时候都会提示invalid url domain.
5、公众号设置的JS接口安全域名域名不匹配，
解决：
在<公众号设置>–<基本设置>–<JS接口安全域名>中添加本地ip映射的域名；
其次我们可以把127.0.0.1/localhost/IP做一个映射（这是在win系统下）；
修改 host 配置，进行公众号配置的安全域名与本机地址IP映射；
计算机host文件作用

hosts就相当于本地的一个dns缓存，不用访问远程的DNS解析服务器，加快了网站打开速度。这样当我们输入域名计算机就能很快解析出IP，而不用请求网络上的DNS服务器。例如：访问www.baidu.com
,计算机请求远程DNS域名解析服务器，查找到百度真实Ip为202.108.22.5进行访问。

文件位置 C:\Windows\System32\drivers\etc，直接复制打开
在这里插入图片描述
在host文件下添加下面两个

回到微信开发者工具，在地址栏将http://localhost:8080替换为配置的域名，如：http://ross.zhang.com:8080/#/pages/public/login
注意：此处有可能会报错：Invalid Host header；
此时我们只需要在UNIAPP的h5部分添加

"h5" : {
    // 添加这个就可以 
    "devServer" : {
      "disableHostCheck":true
    },
    "title" : "智慧商城",
    "template" : "main.html",
    "router" : {
        "base" : "./"
    } 
},

此时我们就可以正常访问了，除了config:fail,invalid url domain这个问题。因为我用的是一个自己随便写的域名地址，所以这个问题就过不去啦。大家可以在改hosts的时候,直接使用JS接口安全域名，或者下面的子域名。这样就完美的解决调试的问题了。
验证结果：

<template>
  <view>
    <button class="confirm-btn" open-type="toWxLogin" withCredentials="true" lang="zh_CN"
      @click="toWxLogin">当前位置</button>
  </view>
</template>

H5页面我们放了一个按钮,然后调用this.$wechat.getLocation()获取位置地址

toWxLogin() {
    console.log('-------toWxLogin---------')
    this.$wechat.getLocation()
        // 选择图片
        // this.$wechat.chooseImage()
        // 分享
    // this.$wechat.updateAppMessageShareData({
    //   title: '我的分享测试', // 分享标题
    //   desc: '分享的内容', // 分享描述
    //   link: 'https://mall.ross.com/h5/index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    //   imgUrl: '', // 分享图标
    //   success: function() {
    //     toast("分享成功")
    //   }
    // })
        // 二维码
    // this.$wechat.scanQRCode()
  }