vue H5页面跳转微信小程序以及生成二维码跳转小程序_vue跳转小程序

研究了两种H5跳转小程序的方法，同时携带参数

1. 手机浏览器打开H5页面，点击按钮拉起微信小程序

2. H5页面上生成小程序二维码，手机微信扫码跳转目标小程序

为了开发方便，以上两种均借助了微信小程序云函数来实现

#事前准备

在vue工程的index.html中加入

<script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>

1. 实现手机浏览器打开H5页面，点击按钮拉起微信小程序

先准备云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')
 
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
 
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
 
  let urlScheme = getUrlScheme(event)
  return urlScheme
}
 
async function getUrlScheme(event) {
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: '/pages/index/index', // 需要跳转的小程序页面
      query: `param1=${event.p1}&param2=${event.p2}`,
    },
    // 一分钟有效期
    isExpire: true,
    expireTime: parseInt(Date.now() / 1000 + 60),
  })
}

再编写前端代码

<template>
  <div class="block">
    <div class="input-filed">
      <el-input v-model="value1" placeholder="abcde">
        <template #prepend>value1</template>
      </el-input>
      <el-input v-model="value2" placeholder="abcde">
        <template #prepend>value2</template>
      </el-input>
    </div>
    <div>
      <el-button type="primary" @click="jump">跳转</el-button>
    </div>
  </div>
</template>
 
<script setup>
 
import { onMounted, ref } from 'vue'
 
const value1= ref('abcde')
const value2= ref('123')
let wxCloud = null
 
onMounted(async () => {
  console.log('onMounted')
  await cloudInit()
})
 
const cloudInit = async () => {
  wxCloud = new cloud.Cloud({
    identityless: true,
    resourceAppid: '小程序APPID',
    resourceEnv: '云函数环境id',
  })
  await wxCloud.init()
}
 
 
 
const jump = async () => {
  const res = await wxCloud.callFunction({
    name: '填上面云函数名字',
    data: {
      p1: '1',
      p2: '2',
    },
  })
  console.warn(res)
  // 跳转，拉起小程序
  location.href = res.result.openlink
}
 
</script>
 
<style scoped>
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.block > * {
  margin-top: 10px;
}
.input-filed {
  width: 250px;
}
</style>

编译代码，并部署到静态网站上

手机访问网站，点击按钮即可跳转到小程序，在小程序页面的onLoad函数中就可获取options中传递的参数

2. H5页面上生成小程序二维码，手机微信扫码跳转目标小程序

先准备云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')
 
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
 
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  try {
    const result = await cloud.openapi.wxacode.getUnlimited({
      scene: `param1=${event.p1}&param2=${event.p2}`, //长度32位限制
      page: 'pages/index/index',
    })
    return result
  } catch (err) {
    return err
  }
 
}

再编写前端代码

<template>
  <div class="block">
    <div class="input-filed">
      <el-input v-model="value1" placeholder="abcde">
        <template #prepend>value1</template>
      </el-input>
      <el-input v-model="value2" placeholder="abcde">
        <template #prepend>value2</template>
      </el-input>
    </div>
    <div>
      <el-button type="primary" @click="createQRcode"
        >创建二维码</el-button
      >
    </div>
    <div>
      <img id="QR-img" :src="qrSrc" alt="no image" />
    </div>
  </div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue'
 
const qrSrc = ref('')
const value1= ref('abcde')
const value2= ref('123')
let wxcloud = null
 
onMounted(async () => {
  console.log('onMounted')
  await cloudInit()
})
 
const cloudInit = async () => {
  wxcloud = new cloud.Cloud({
    identityless: true,
    resourceAppid: 'xxx',
    resourceEnv: 'xxx', 
  })
  await wxcloud.init()
}
 
const createQRcode = async () => {
  console.log('createQRcode')
  const res = await c.callFunction({
    name: 'wxacode',
    data: {
      param1: '1',
      param2: '2',
    },
  })
  if (res.result && res.result.errCode === 0) {
    showQRCode(res.result.buffer, res.result.contentType)
  }
}
 
function showQRCode(arrayBuffer, contentType) {
  var uInt8Array = new Uint8Array(arrayBuffer)
  var i = uInt8Array.length
  var binaryString = new Array(i)
  while (i--) {
    binaryString[i] = String.fromCharCode(uInt8Array[i])
  }
  var data = binaryString.join('')
 
  var base64 = window.btoa(data)
  var url = ''
  if (contentType.endsWith('png')) url = 'data:image/png;base64,' + base64
  else if (contentType.endsWith('jpeg'))
    url = 'data:image/jpeg;base64,' + base64
 
  qrSrc.value = url
}
 
 
</script>
 
<style scoped>
#QR-img {
  width: 200px;
  height: auto;
}
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.block > * {
  margin-top: 10px;
}
.input-filed {
  width: 250px;
}
</style>

在本地运行即可

点击按钮生成二维码，扫码直接跳转，在小程序页面的onLoad函数中就可获取options中传递的参数