扫码跳转小程序讲解(公用js入口)

// 进入小程序参数集中处理
function switchOptionsType(options) {
  let obj = {}
  // 小程序二维码进入
  if (options.scene) {
    obj = parseMinicode(options)
  }
  // 普通二维码
  else if (options.q) {
    obj = parseQRcode(options)
  }
  // 跳转进入
  else if (!options.scene && !options.q) {
    obj = parseNormal(options)
  }
  navigateToPage(obj)
}


function parseMinicode(options) {
  // decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
  let scene = decodeURIComponent(options.scene);
  // 下面根据逻辑自行处理
  let dataarr = scene.split("_");
  switch (dataarr[0]) {
    case 'G':
      break;
    case 'S':
      break;
  }
}

function parseQRcode(options) {
  let qrUrl = decodeURIComponent(options.q)
  // 不包含type字段不做处理
  if (qrUrl.indexOf('type=') == -1) {
    // API.showToast("未获取信息!")
    return
  } else {
    let obj = parseUrlToObj(qrUrl)
    switch (obj.type) {
      case 'user':
        return {
          path: '/pages/page/home/home',
          data: options
        }
        break;
    }
  }
}
// 小程序跳转小程序
function parseNormal(options){
  switch (options.type){
    case 'user':
      return {
        path: '/pages/page/user/user',
        data: options
      }
      break; 
   }
}

function navigateToPage(obj){
  if(obj && obj.path){
    wx.reLaunch({
      url: obj.path + '?' + handleObject(obj.data)
    })
  }else{
    API.showToast('数据出错拉~~')
  }
}
  // 处理url传参 
function parseUrlToObj(qrUrl){
  let data = qrUrl.split("?")[1],
    arr = data.split("&"),
    obj = {};
  arr.forEach(el => {
    obj[el.split("=")[0]] = el.split("=")[1]
  })
  return obj
}

//  obj转url参数
function handleObject(obj) {
  try {
    let arr = []
    for (let key in obj) {
      if (key == 'q') {
        arr.push(key + "=" + encodeURIComponent(obj[key]))
        continue
      }
      arr.push(key + "=" + obj[key])
    }
    return arr.join("&")
  } catch (e) {
    return ""
  }
}

module.exports = {
  switchOptionsType
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的生成商品扫码跳转小程序查真伪的代,供您参考: 前端代: ```html <!-- 生成二维码 --> <canvas id="qrcode"></canvas> <!-- 扫码跳转 --> <button @click="scanQRCode">扫码查真伪</button> ``` ```javascript import QRCode from 'qrcode'; // 导入生成二维码的库 import wx from 'weixin-js-sdk'; // 导入微信JS-SDK export default { data() { return { product: { id: 1234, name: '商品名称', description: '商品描述', // ...其他商品信息 }, qrcodeUrl: '', }; }, methods: { async generateQRCode() { try { // 生成二维码 const qrcodeUrl = await QRCode.toDataURL(JSON.stringify(this.product)); this.qrcodeUrl = qrcodeUrl; } catch (error) { console.error(error); } }, async scanQRCode() { try { const res = await wx.scanQRCode({ needResult: 1, }); const result = res.resultStr; // 跳转到商品详情页并传递商品信息 wx.navigateTo({ url: `/pages/product-detail?id=${this.product.id}&name=${this.product.name}&result=${result}`, }); } catch (error) { console.error(error); } }, }, mounted() { this.generateQRCode(); }, }; ``` 后端代: ```javascript const express = require('express'); const app = express(); // 查询商品信息的接口 app.get('/api/product/:id', (req, res) => { const id = req.params.id; // TODO: 根据 ID 查询商品信息 const product = { id: id, name: '商品名称', description: '商品描述', // ...其他商品信息 }; res.json(product); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 以上代中,前端通过调用 QRCode 库生成商品信息的二维码,用户扫描二维码后将扫描结果传递给后端,后端根据 ID 查询商品信息并返回给前端,前端再跳转到商品详情页并传递商品信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值