taro开发：H5端、小程序端扫一扫功能,适配安卓、ios(附加demo)

一、使用Taro完成扫一扫功能demo:兼容H5端、微信小程序端，适配安卓、ios。

用Taro3 React开发的demo地址： https://github.com/sweet-corns/project-taro

1、拉取项目：git clone https://github.com/sweet-corns/project-taro.git

2、当前Taro版本：

# 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli3.2.5
# 使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli3.2.5
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli3.2.5

3、安装依赖：

yarn 
cnpm install 
npm install

4、启动项目：

# H5端
$ npm run dev:h5 

# 微信小程序端
$ npm run dev:weapp 

二、学习资料

1、Taro: 一个开放式跨端跨框架解决方案 https://taro.aotu.io/

2、weixin-js-sdk:微信公众号开发文档JS-SDK https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

三、微信小程序端扫一扫编写代码简要概述

1、定义loading变量、防止用户的二次点击，扫码成功失败后释放按钮。

2、Taro.scanCode 调取微信小程序扫一扫功能。

const [loading, setLoading] = useState(true)

const onScanFun = () => {
    if (loading) {
      return //防止二次点击
    }
    setLoading(true)
    if (process.env.TARO_ENV === 'weapp') {
      Taro.showLoading({
        title: '加载中',
      })
      // 小程序扫码
      Taro.scanCode({
        success: (data) => {
          if (data) {
            // 获取二维码中的参数，调后台接口
            let newObj = JSON.parse(data.result)
            console.log(newObj)
            // 扫码成功以后跳到签到成功页面、释放加载按钮
            setLoading(false)
            Taro.hideLoading()
          }
        },
        fail: (err) => {
          // 扫码签到失败后跳转到失败页面、释放加载按钮
          setLoading(false)
          Taro.hideLoading()
        }
      })
    }
  }

四、微信公众号H5端扫一扫编写代码简要概述

1、参考微信公众号开发文档、先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

微信图片_20210429170241.png

2、配置js接口安全域名的时候，需要将文件MP_verixxxxxxx.txt（点击下载）上传至填写域名或路径指向的web服务器（或虚拟主机）的目录。可以在taro项目中配置静态文件打包直接拷贝。

1）一个文件夹static，将文件MP_verixxxxxxx.txt放入

微信图片_20210429170452.png

2）在config/index.js中配置静态文件拷贝

微信图片_20210429170456.png

3、安装微信JS-SDK

npm i weixin-js-sdk

4、引入weixin-js-sdk

import wx from 'weixin-js-sdk'

5、开始编写H5版本代码

1）定义点击扫一扫绑定方法onScanFun，在这里区别是H5扫一扫还是微信小程序扫一扫，也要做好防止用户二次点击处理。

2）定义调取微信公众号H5扫一扫方法onScanCodeWxFun()。
在这里需要兼容ios调不起来扫一扫注意：
ios调不起扫一扫：把微信JSSDk js 的资源路径换成 https，可能是 iOS 系统自身安全性的原因，生产环境只能引用 https 开头的路径。

因为ios上有兼容的问题，微信公众号调取jssdk扫一扫功能，ios第一次进入页面调取失败（需刷新页面才能调取成功，Android正常）的解决方法：ios第一次进入页面调取失败的原因主要在于传入的path路径，所以ios跟安卓区别了一下 location.href.split('#')[0]，解决了问题。

3）需求你公司的后台配合，调公司沟通的接口，传给后台url 微信公众号的Appid,获取微信权限签名。

4）获得签名之后传入配置wxConfig()方法中进行,调取微信apiwx.config()

5）在微信接口调起成功的wx.ready()状态中，调取onScanCodeWxFun()调取微信扫一扫接口wx.scanQRCode扫码成功后，根据实际业务功能完成接下来的动作：访问二维码中的地址或者参数调取后台扫码成功接口。

6）最后的代码复制在下方，如果有不懂的可以拉取demo进行访问。如果遇到问题也可以私信我，乐意分享。

const [loading, setLoading] = useState(true)
//1、点击扫一扫绑定事件
const onScanFun = () => {
    if (loading) {
      return //防止二次点击
    }
    setLoading(true)
    Taro.showLoading({
      title: '加载中',
    })
    if (process.env.TARO_ENV === 'h5'{
      //调取微信公众号H5扫一扫定义方法
      onScanCodeWxFun()
    }
  }
  //2、调取微信公众号H5扫一扫定义方法
  const onScanCodeWx = () => {
    let tokenUrl = location.href;
    Taro.getSystemInfo({
      success: res => {
        // 1）注意ios调不起扫一扫：把微信JSSDk js 的资源路径换成 https，可能是 iOS 系统自身安全性的原因，生产环境只能引用 https 开头的路径。
        // 2）因为ios上有兼容的问题，微信公众号调取jssdk扫一扫功能，ios第一次进入页面调取失败（需刷新页面才能调取成功，Android正常）的解决方法：
        // 注意：ios第一次进入页面调取失败的原因主要在于传入的path路径，所以ios跟安卓区别了一下 location.href.split('#')[0]，解决了问题。
        if (res && res.system == "iOS") {
          tokenUrl = location.href.split('#')[0]
        } else {
          tokenUrl = location.href;
        }
        let params = {
          appid: '你的appid',
          tokenUrl: tokenUrl
        }
        // 3、调后台得接口，获取签名
        Taro.request({
          url: 'test/utl', //仅为示例，并非真实的接口地址
          data: params,
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)
            if (res) {
              let perData = res.data
              //4、获得签名之后传入配置中进行配置
              wxConfig(perData.appId, perData.timestamp, perData.nonceStr, perData.signature);
            }
          },
          fail: function (err) {
            console.log(err)
            Taro.hideLoading()
            setLoading(false)
          }
        })
      }
    })
  }
  const wxConfig = (_appId, _timestamp, _nonceStr, _signature) => {
    wx.config({
      debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: _appId,// 必填，公众号的唯一标识
      timestamp: _timestamp,// 必填，生成签名的时间戳
      nonceStr: _nonceStr,// 必填，生成签名的随机串
      signature: _signature,// 必填，签名，见附录1
      jsApiList: ['checkJsApi', 'scanQRCode'],
      // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    })
    wx.ready(function () {
      Taro.hideLoading()
      if (process.env.TARO_ENV === 'h5') {
        onScanCodeWxFun()
      }
    })
    wx.error(function () {
      // 扫码签到失败后跳转到失败页面、释放扫一扫按钮
      Taro.hideLoading()
      setLoading(false)
    })
  }
  const onScanCodeWxFun = () => {
    wx.scanQRCode({
      needResult: 1,
      scanType: ["qrCode", "barCode"],
      desc: 'scanQRCode desc',
      success: function (data) {
        let newObj = JSON.parse(data.resultStr)
        console.log(newObj)
        // 调取签到接口
        Taro.hideLoading()
        // 扫码签到失败后跳转到失败页面、释放扫一扫按钮
        setLoading(false)
      }, error: function (res) {
        Taro.hideLoading()
        // 扫码签到失败后跳转到失败页面、释放扫一扫按钮
        setLoading(false)
      }
    });
  }