还在因为小程序嵌入页面配置api发愁吗？看完这篇文章七步搞定

第一步：在对应项目中 npm i -S weixin-js-sdk 下载完成后 在html中引入链接：

npm i -S weixin-js-sdk

如果只是调用小程序跳转页面 完成第一步就可调用

第二步：在小程序后台（开发管理中开发设置）配置request合法域名（web-view页面地址：https：开头）和业务域名

第三步：在小程序后台设置中 关注对应的公众号

第四步：登录对应的公众号后台在基本设置中 打开开发者模式 获取小程序ID和密匙并且配置后端的IP白名单

第五步：公众号设置-功能设置配置js接口安全域名（这里的安全域名地址要和web-view的request合法域名相同）

第六步：后端通过公众号ID和密匙来获取小程序签名 需要前端传入当前页面url

    location.href.split("#")[0] //前端获取当前页面URL

后端获取小程序签名参考文章： https://blog.csdn.net/qq_37284798/article/details/100139531

/**
	 * 获取jssdk
	 * @param url
	 * @return
	 * @throws Exception
	 */
	@RequestMapping(value = "/getWechatJSSDK",method={RequestMethod.POST,RequestMethod.GET})
	public @ResponseBody Object getWechatJSSDK(String url) throws Exception {
		Map<String, String> map =  new HashMap<>();
        String access_token = "";
        //拼接地址获取token
        String tokenStr  = HttpRequestUtil.sendGet("https://api.weixin.qq.com/cgi-bin/token","grant_type=client_credential&appid="+miniProAppId+"&secret="+miniProAppSecret);
        JSONObject token = JSON.parseObject(tokenStr);
        access_token = token.getString("access_token");
        //获取jsapi
        String jsapiStr  = HttpRequestUtil.sendGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket","access_token="+access_token+"&type=jsapi");
        JSONObject jsapi = JSON.parseObject(jsapiStr);      
        String jsapi_ticket = jsapi.getString("ticket"); 
        /*****************获取签名signature********************/
        //生成随机字符串  noncestr
        String nonceStr = UUID.randomUUID().toString();
        //时间戳 timestamp，精确到秒 
        String timestamp = Long.toString(System.currentTimeMillis() / 1000);
        //url
        //String Url = url;
        String Stitching = "jsapi_ticket="+jsapi_ticket+"&noncestr="+nonceStr+"&timestamp="+timestamp+"&url="+url;
        System.out.println("Stitching："+Stitching);
        //SHA1 加密
        java.security.MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");        
        digest.update(Stitching.getBytes());
        byte messageDigest[] = digest.digest();
        StringBuffer hexStr = new StringBuffer();
        // 字节数组转换为 十六进制 数
        for (int i = 0; i < messageDigest.length; i++) {
            String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
            if (shaHex.length() < 2) {
                hexStr.append(0);
            }
            hexStr.append(shaHex);
        }
        map.put("appid", miniProAppId);
        map.put("timestamp", timestamp);
        map.put("nonceStr", nonceStr);
        map.put("signature", hexStr.toString());
        return AppUtil.returnObject(map,Const.SUCCESSCODE);
	}

成功后得到的参数

得到的参数依次对应 config配置参数，

第七步：配置微信小程序jsJdk 此处使用的微信扫码功能

 //小程序扫码
    sanQrCode(e) {
      let that = this;
      // console.log("获取路由", encodeURIComponent(location.href.split("#")[0]));
      wx.config({
        debug: false,// false不展示提示信息，true 每个API调用时会提示调用信息
        appId: e.appid,//公众号appID
        timestamp: Number(e.timestamp),//生成签名时间戳
        nonceStr: e.nonceStr,//小程序签名
        signature: e.signature,//小程序签名生成的随机字符串
        jsApiList: ["scanQRCode", "checkJsApi"],//需要使用的API
      });

      wx.ready(function() {//小程序回调（如果进入页面就需要调用API需要将调用方法写入回调中）
        //小程序回调
        wx.checkJsApi({//校验使用的API在当前环境是否可用
          //校验
          jsApiList: ["scanQRCode"],//需要校验的API
          success: function(res) {
            wx.scanQRCode({//调用的API  此处为扫码
              //二维码
              needResult: 1,//参数1返回小程序处理  0直接返回结果  
              success(res) {//扫码调用成功执行
                console.log("查看扫码调用成功", res.resultStr);
                if (res.resultStr) {
                  that.geiOpen(res.resultStr);
                }
              },
              fail(res) {
                console.log("失败", res.errMsg); // 扫描失败的错误信息
              },
            });
          },
        });
      });
    },

注意事项！！

**如果在其他页面使用小程序API，有的API（列如：getLocation 获取用户定位）需要在当前页面再次配置config

配置完成后在小程序开发者工具中会显示配置失败（疑似未检测到当前环境），需要使用手机预览来测试功能。**

> debug弹出这个时就是配置成功了