场景
有个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">{
{