微信外H5跳转小程序——＜JumpApp/＞组件（vue项目）

场景
有个H5（vue项目），需要实现点击商品item跳转到小程序，微信内和微信外都要支持，这里我们只介绍一下H5在微信外的跳转。

如图所示，红框内是一个商品，就是点击这里，要跳转小程序：

配置微信小程序云开发（云函数）
1、开通云开发

然后选择免费额度

2、云开发权限设置

找到权限设置，把这里的「未登录用户访问权限」点开

3、新建云函数openMiniapp

这里我们先只需要建个名为openMiniapp的云函数放在这里就行，它的代码后面再写。

4、修改云函数权限

添加一下这部分配置，注意这里的名称要和云函数的名称一致：

云函数代码
1、编写云函数代码
如果是原生小程序，当配置完云开发+云函数之后，小程序项目目录应该就多出一个云函数的目录（可能叫cloudbase，但是因为我这里是用的uniapp，这个目录是自定义的，我设置为wxcloudfunctions）：

附：
uniapp配置云函数教程1
uniapp配置云函数教程2

云函数的代码：

package.json：

{
   
  "name": "GENERAL",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
   
    "wx-server-sdk": "~2.3.2"
  }
}
复制代码

index.js：

const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
   
	const {
    path = '', queryData = {
   }, } = event // 我从H5那边传进来的参数，可以从event里获取到

	// 获取queryStr
	let queryStrArr = []
	for (let key in queryData) {
   
		const str = `${
   key}=${
   queryData[key]}` // name=tom
		queryStrArr.push(str)
	}
	const queryStr = queryStrArr.join('&')

	console.log('path', path)
	console.log('queryStr', queryStr)

	return cloud.openapi.urlscheme.generate({
   
		jumpWxa: {
   
			path: path ? ('/' + path) : '', // 打开小程序时访问路径，为空则会进入主页
			query: queryStr, // 可以使用 event 传入的数据制作特定参数，无需求则为空
		},
		isExpire: true, //是否到期失效，如果为true需要填写到期时间，默认false
		expire_time: Math.round(new Date().getTime() / 1000) + 3600
		//我们设置为当前时间3600秒后，也就是1小时后失效
		//无需求可以去掉这两个参数（isExpire，expire_time）
	})
}

复制代码

2、部署云函数
右键，选择创建并部署。

这样云函数的部署就完成了。

H5部分
1、<JumpApp/>
我的想法是写一个通用组件<JumpApp/>，不包含任何样式，内容通过<slot/>传进来，这样后面不管什么样的跳转都可以使用它了。

我可以这样：

<!-- 商品 -->
<view v-for="item in goodsList ?? []" :key="item.id" class="item_wrap">
  <JumpApp
    :ghid="jumpAppGhCode"
    :appid="jumpAppAppid"
    :envid="jumpAppEnvid"
    :ready="doctorInfo?.doctorCode"
    :path="`pages/product/details/details`"
    :queryData="{
   
      dCode: doctorInfo?.developerCode ?? '',
      skuCode: item.chnlGoodsId,
    }"
  >
    <view class="service_package_item">
      <image class="service_package_item_icon" :src="item.goodsImg?.split(',')[0] ?? ''"></image>
      <view class="service_package_item_content">
        <view class="service_package_item_content_title_wrap">
          <view class="service_package_item_content_title">{
   {
    item.goodsName }}</view>
          <view class="service_package_item_content_price">{
   {
    item.goodsFeeStr }}元</view>
        </view>
        <view class="service_package_item_content_desc">{
   {