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

本文主要是介绍vue H5页面跳转微信小程序以及生成二维码跳转小程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

研究了两种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中传递的参数

这篇关于vue H5页面跳转微信小程序以及生成二维码跳转小程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！