微信公众号测试号管理中前后端配置及前端代码

2024-09-30 前端 0

1在公众号界面配置前端服务

Js接口安全域名这里填写前端服务的ip和端口号（这里ip加端口号就行---很多网上都说前台需要内网穿透--其实不需要）

如果需要使用获取用户信息需要在如下位置配置

2前台向后台请求数据进行js-sdk权限校验

代码解释:

以下是获取前端路径---解析出来为（例如http://192.168.173.51:81/）

特别需要注意的http://192.168.173.51:81/ 后边这个斜杠一定要带上---不带的话微信会一直校验不通过

特别需要注意的 以下这句代码往后台传输的时候一定不需要encodeURLComponent

设置编码 --或者可以编码--但是后台需要解码

const currenturl = location.href.split('#')[0]

另外建议测试js-sdk时先配置一个上传文件的chooseImage--因为这个测试比较明显

3选择图片的方法

export const chooseImageApi = () => {  return new Promise((resolve, reject) => {    wxconfig()    wxjssdk.ready(() => {      console.log('微信验证')      wxjssdk.chooseImage({        count: 1, // 默认9        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有        success: function (res) {          console.log(res)          resolve(res)          // var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片        },        cancel: function (): void {          console.log('用户取消了')          // throw new Error('Function not implemented.')          // throw new Error('Function not implemented.')        },      })    }),      wxjssdk.error((res) => {        console.log('config fail:', res)        //config fail，抛出失败原因        console.log('-------------失败------------')        reject(res)      })  })

4配置代码

//获取签名--添加微信配置

export const wxconfig = async () => {  // const currenturl = encodeURIComponent(location.href.split('#')[0])  const currenturl = location.href.split('#')[0]  alert(currenturl)  const response = await getSignatureApi({ url: currenturl })  //将值装进微信的配置  wxjssdk.config({    debug: true,    appId: appId,    timestamp: response.data.timestamp,    nonceStr: response.data.nonceStr,    signature: response.data.signature,    jsApiList: [      // 'checkJsApi', //判断当前客户端版本是否支持指定JS接口      'chooseImage',      // 'updateAppMessageShareData', //分享接口      // // 'chooseImageApi', //扫一扫接口      // 'chooseWXPay', //微信支付    ],  })}

// 选择图片方法

export const chooseImageApi = () => {  return new Promise((resolve, reject) => {    wxconfig()    wxjssdk.ready(() => {      console.log('微信验证')      wxjssdk.chooseImage({        count: 1, // 默认9        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有        success: function (res) {          console.log(res)          resolve(res)          // var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片        },        cancel: function (): void {          console.log('用户取消了')          // throw new Error('Function not implemented.')          // throw new Error('Function not implemented.')        },      })    }),      wxjssdk.error((res) => {        console.log('config fail:', res)        //config fail，抛出失败原因        console.log('-------------失败------------')        reject(res)      })  })}

特别需要注意的 我本地出现的问题：

可能是电脑连接的公司网---换成手机热点的公共网络