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

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)

      })

  })

}

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

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

报错

config:fail,invalid url domain

以上步骤都走完前端就算完成了---哈哈哈--心累····

5后台配置

然后后台去微信获取access_token和票据jsapi_ticket  --保证这些都需要正确--然后根据官方api生成签名

signature

然后把这写数据返回给前台

以上步骤完成了，就没什麽问题了------加油·····

}