526互联

小程序二维码配置+前端生成带参二维码+数据加密解密+地址逆解析

发布时间 2023-07-17 10:55:32作者: 零零七啊

这是一个关于用户回访调查的小程序，技术栈vue3+uniapp。遇到的知识点如下：

1.微信公众平台认证的小程序账号只对应一个小程序，一个邮箱只能绑定一个小程序，如果企业之前有认证过微信公众号的，可以复用微信公众号的资料认证小程序，这样就不需要另外收认证费。(复用公众号资料认证小程序流程：https://blog.csdn.net/dxnn520/article/details/129182588)

2.小程序生成普通二维码，开发者/体验者扫码体验。前端：配置二维码规则，后端：二维码规则中有个校验文本需要放置再服务器域名下。（如果配置之后扫码没反应，那可能是有哪些权限没有开通，我这个后端有开通了某些权限，具体生效是不是与后端开通某些权限有没有关系，我不晓得，我觉得大概率那个时候是因为自己没有点选项生成体验码，所以才无法体验）

 3.前端：生成带参数的二维码

3.1在src/utils下放置qrcode源码（如果有需要我可以发你，小白不晓得咋放置文件夹在随笔中）

 3.2需要用到的页面中导入

html

<view>
 <canvas type="2d" id="myQrcode" class="codeStyle" />
</view>

js

引入
import drawQrcode from '../../utils/weapp.qrcode.esm.js'
二维码生成函数
const qrcode = (obj) => {
  const query = wx.createSelectorQuery()
  query.select('#myQrcode')
    .fields({
      node: true,
      size: true
    })
    .exec((res) => {
      var canvas = res[0].node

      // 调用方法drawQrcode生成二维码
      drawQrcode({
        canvas: canvas,
        canvasId: 'myQrcode',
        width: 260,
        padding: 30,
        background: '#ffffff',
        foreground: '#000000',
        text: `http://www.xxx.com/code?id=zhuziyi&obj=${obj}`//二维码内容，此处内容是我上面配置的一个小程序二维码路径及所需要携带的参数
      })
      // 获取临时路径
      uni.canvasToTempFilePath({
        canvasId: 'myQrcode',
        canvas: canvas,
        x: 0,
        y: 0,
        width: 260,
        height: 260,
        destWidth: 260,
        destHeight: 260,
        success(res) {
          console.log('二维码临时路径：', res.tempFilePath)
        

        },
        fail(res) {
          console.error(res)
        }
      })
    })
}
qrcode（）//调用

 4.携带参数加密解密

利用的是crypto-js，参考的一篇掘金上的文档

下载
npm run crypto-js

src/utils/encrypt.js　　

import CryptoJS from "crypto-js";
// 设置密钥和密钥偏移量
// 十六位十六进制数作为密钥
const SECRET_KEY = CryptoJS.enc.Utf8.parse("1234123412341234");
// 十六位十六进制数作为密钥偏移量
const SECRET_IV = CryptoJS.enc.Utf8.parse("1234123412341234");
/**
 * 加密方法
 * @param data
 * @returns {string}
 */
export function encrypt(data) {
    if (typeof data === "object") {
      try {
        // eslint-disable-next-line no-param-reassign
        data = JSON.stringify(data);
      } catch (error) {
        console.log("encrypt error:", error);
      }
    }
    const dataHex = CryptoJS.enc.Utf8.parse(data);
    const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
      iv: SECRET_IV,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.ciphertext.toString();
  }
  
/**
 * 解密方法
 * @param data
 * @returns {string}
 */
export function decrypt(data) {
    const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
    const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
      iv: SECRET_IV,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    });
    const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  }

　　

使用：
加密： const encryptText = encrypt(数据);//数据加密
解密： const decryptText=decrypt(数据)//解密

5.位置服务

位置服务（LBS）是基于用户的位置来提供服务的技术，通过要配合第三方的服务来实现，如腾讯地图、高德地图、百度地图等，在本项目采用的是腾讯的位置服务https://lbs.qq.com/

申请使用腾讯位置服务需要按如下步骤操作：

  1. 注册账号

  2. 创建应用

  3. 生成 key

  4. 小程序管理后台添加合法域名

5.1在使用位置服务的时候需要提供用户的位置（经纬度），关于用户的位置小程序提供了 API ，在使用获取位置的 API 时需要先在 app.json / manifest.json中进行声明，

{
  "requiredPrivateInfos": [
    "getLocation",
    "chooseLocation"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
   }
}

调用 wx.getLocation() 获取用户当前位置，该 API 支持返回 Promise：

{
  async getLocation() {
    // 调用 API
    const {latitude, longitude} = await wx.getLocation()
    console.log(latitude, longitude)
  }
}

5.2接下来可以到项目中使用腾讯位置服务提供的功能了：

5.2.1导入位置服务微信小程序https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip，它是官方封装好的一个 .js 文件

// utils/qqmap.js
// 导入腾讯位置服务 SDK
import QQMapWX from '../libs/qqmap-wx-jssdk'
// 实例化位置服务（使用个人申请的 key）
export default new QQMapWX({
  key: '填写自已的 KEY',
})

5.2.2调用 SDK 提供的方法 reverseGeocoder 实现逆解析https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder的功能，逆地址解析是指根据经纬度来获取具体的地址信息。

import map from '../../utils/qqmap'
const fn=async()=>{
  const {latitude, longitude}=await uni.getLocation()
  console.log(latitude, longitude,1111);
  map.reverseGeocoder({
    location:[latitude, longitude].join(','),
    success:(res)=>{
      console.log(res,99999);
    }
  })
}

注意：如果页面显示如下错误：

 修改如下：