Taro 小程序扫二维码跳转到指定页面

小程序扫码登录，需要在微信小程序开发管理->开发设置->扫普通链接二维码打开小程序 去添加对应的链接，然后根据链接动态动态生成二维码，然后使用微信扫码的即可跳转到小程序指定页面，具体添加链接方式，请自行百度

这里主要介绍两个东西
1.Taro小程序下根据链接动态生成二维码
2.扫码跳转到小程序后参数处理和页面跳转的逻辑

1.在页面中生存二维码

• 先添加taro-code库

npm install --save taro-code
or
yarn add taro-code

• 引入taro-code中的二维码组件，在需要得地方去渲染页面，qrUrl为二维码信息

import { QRCode } from 'taro-code'
<QRCode
  style={{ marginTop: '10px' }}
  text={qrUrl}
  size={150}
  showMenuByLongpress
/>

2.扫码跳转到小程序
我这里是配置的外部链接是直接跳转到首页，到了首页后根据传的参数去判断跳转到其他页面

• 首页加载出来后拿到options.q里包含的信息，其实这个就是我们前面传入的链接url

  componentDidMount() {
    // this.setState({
    //   optionsq: 'www.baidu.com/saasqrcode/?type=employeeaudit&target_id=694803'
    // })
    const options = getCurrentInstance().router?.params || {}
    if (options.q && options.q != "undefined") {
      this.setState({
        optionsq: options.q
      })
    }
  }

• 在页面出现的时候去处理链接和解析参数

componentDidShow() {
  this.handleOtherLink()
}

handleOtherLink = async () => {
  let { optionsq } = this.state
  if (optionsq) {
    // 判断登录
    const token = getGlobalData('token')
    if (!token) {
      /// 第一次跳登录，第二次则不再跳登录 忽略信息
      if (this.state.loaded) {
        this.setState({
          optionsq: ''
        })
        return
      }
      /// 去登录页 并且可以返回
      this.setState({ loaded: true })
      Taro.navigateTo({
        url: '/pages/loginByPhoneNo/index?back=1'
      })
      return
    }
    console.log("扫码链接：" + optionsq)
    // 这里假设optionsq = 'www.baidu.com/saasqrcode/?type=employeeaudit&target_id=694803'
    // type类型为employeeaudit：员工审核
    // 下面就根据type类型和target_id处理业务 调用接口判断当前用户是否有员工审核权限，有就直接跳转员工审核，没有就跳转到没有权限页面
    const qrUrl = decodeURIComponent(optionsq)
    console.log(qrUrl)
    //此处就是我们要获取的参数 json，通过方法解析
    let jsonUrl = getUrlParams(qrUrl)
    let type = jsonUrl?.type || ''
    let depot_id = jsonUrl?.target_id || ''

    if (type === 'employeeaudit') {
      let res = await qrcodeSwitchDepot({ depot_id }).catch(err => {
        this.setState({
          optionsq: ''
        })
        Taro.showToast({
          title: err.data.message,
          icon: 'none',
          mask: true
        })
      })
      let data = res?.data?.data
      if (data) {
        let { is_manage, manager_name, manager_mobile } = data
        ///1.是管理员跳转到管理员页面
        if (is_manage === 1) {
          let userInfo = await getStorageUserInfo(false)

          if (!userInfo) {
            userInfo = await getStorageUserInfo(true).catch(err => null)
          }
          let name = userInfo?.station_info?.contact_name || ''
          Taro.navigateTo({
            url: `/pages/minePackage/staffManager/index?name=${name}`
          })
        } else {
          // 2.没权限 去没有权限页面
          Taro.navigateTo({
            url: `/pages/minePackage/staffCheckNoPermission/index?name=${manager_name}&mobile=${manager_mobile}`
          })
        }
      }
      this.setState({
        optionsq: ''
      })
    }
  }
}

export const getUrlParams = (url) => {
  let params:any = {}
  if (url.indexOf("#") != -1) {
      const str = url.split("#")[1]
      const strs = str.split("&")
      for (let i = 0; i < strs.length; i++) {
          params[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1])
      }
  } else if (url.indexOf("?") != -1) {
      const str = url.split("?")[1]
      const strs = str.split("&")
      for (let i = 0; i < strs.length; i++) {
          params[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1])
      }
  }
  return params
}

这里解释一下为什么不把处理链接的逻辑放在componentDidMount中，主要原因是这里考虑第一次扫码进入如果没有登录，那么这个时候会去跳转登录页，登录完成回来后首页就不会重新刷新，那么处理链接的逻辑只会调用一次，这样扫码传过来的数据就丢失了，我这里放在componentDidShow去处理链接，确保下次进到页面还可以处理链接参数，如果链接处理好了，就直接清空存储的optionsq的数据，那么切换页面再进来，也不会再处理扫码链接了
需要注意的是，每次扫二维码页面都会重新加载，也就是每次扫码，首页都是重新加载一遍，componentDidMount每次扫码都会执行一次