一码多端，实现微信小程序，QQ小程序，支付宝小程序等

最新推荐文章于 2024-03-08 17:49:52 发布

Henry_楠

最新推荐文章于 2024-03-08 17:49:52 发布

阅读量2.3k

点赞数 1

分类专栏：小程序杂类

本文链接：https://blog.csdn.net/haonan_z/article/details/117290017

版权

小程序同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

杂类

5 篇文章 0 订阅

订阅专栏

最近公司在原有微信小程序上增加了QQ小程序端，所以需要实现一码多端，即QQ扫进QQ小程序，微信扫进微信小程序页面，由于以前做支付宝小程序的时候就有过实现，现在整理一下，以下以我做过的三个端小程序来总结

思路

首先要了解二维码：二维码其实就是一个字符串，当它是链接的时候，就相当于我们去访问了这个链接，那么我们要实现的就是在各端的小程序里面如何访问一个链接可以打开小程序

一、生成普通二维码

一码多端一般都是用普通二维码来做的，即用链接来生成普通二维码，二维码里面包含这个链接，而扫码就是访问此链接

如果不需要动态生成二维码，可以用草料二维码生成器来生成
如果需要动态生成可以参考：https://segmentfault.com/a/1190000019946032

例如我用这个链接：https://all-iplay.uu.cc/platform-api/api/page-forward/timeElchee?inviteCode=111 来生成二维码

二、微信端小程序

先说最常见的微信端，微信端打开小程序的有两种方法：

普通二维码
生成小程序URL Scheme

1. 微信-普通二维码

普通二维码需要到“微信公众平台-开发-开发管理-开发设置-扫普通链接二维码打开小程序”下去配置二维码规则相关文档

配置完成后，即可用微信扫用二维码路径生成的普通二维码，即可进入对应的小程序页面，因为微信会把二维码的链接当成参数q传入对应小程序页面，所有有参数的话，需要在对应的小程序页面路径中的onLoad生命周期函数中去处理参数，才能获取到

//小程序页面host.js
import Util from '@/utils/Util'

onLoad(options) {
  option = Util.analyseQrcodeQ(option) //解析普通二维码进入的
}

//Util.js
/**
 * 解析普通二维码q
 * option.q = http%3A%2F%2Fiplay.com%2Fhost_boot%3Fid%3D202005130202
 * query
 * */
static analyseQrcodeQ(option) {
  if(option.q){
    const url = decodeURIComponent(option.q)
    const param = url.split('?')[1]||''
    const arr = param.split('&')
    const query = {}
    for(let value of arr){
      const map = value.split('=')
      query[map[0]]=map[1]
    }
    return query
  }else{
    return option
  }
}

每需要一个新的落地页就需要到对应页面下面去处理一下页面入参，当然还有一种做法：
做一个小程序中转页，把要跳转的路径也变成参数传入，
例如：
小程序的中转页面：pages/qr_code_transfer
对应的二维码地址规则：https://all-iplay.uu.cc/platform-api/api/page-forward/transfer
要跳转的小程序页面是：pages/interests/interests
生成的小程序二维码路径就是 https://all-iplay.uu.cc/platform-api/api/page-forward/transfer?pageUrl=/pages/interests/interests&inviteCode=517795

//小程序页面qr_code_transfer.js
import Util from '@/utils/Util'

onLoad(options) {
  options = Util.analyseQrcodeQ(options) //解析普通二维码进入的
  const pageUrl = options.pageUrl;
  delete options.pageUrl
  let params = []
  for (let key in options) {
    params.push(`${key}=${options[key]}`)
  }
  const param = params.join('&')
  const url = `${pageUrl}?${param}`
  wx.redirectTo({
    url
  })
}

优势：不需要服务端对第三方的调用，规则灵活
劣势：落地页都要去处理参数

2. 微信-URL Scheme

微信小程序提供了URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序
可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」两种方式生成
相关文档

如果你生成二维码的参数是不经常变的，那可以直接通过工具去生成
还是拿上面的例子举例：
小程序页面：pages/interests/interests
参数是 inviteCode=517795
这里可以选择长期有效
生成的短链是：weixin://dl/business/?t=imTfaFSkZya