手机浏览器或微信中唤起小程序

最新推荐文章于 2025-09-13 17:11:23 发布

原创

最新推荐文章于 2025-09-13 17:11:23 发布 · 5.6k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#html

明文URL Schem唤起小程序

业务需求的场景
使用文档介绍
实现过程
遇到的问题
注意事项
相关文档

业务需求的场景

需要在后台管理系统中的列表数据添加复制功能，复制成功的链接能够在手机浏览器或者微信中打开指定的小程序页面（pages/good/detail/index）

使用文档介绍

需要在手机浏览器或者微信中唤起小程序有两种方式, 小程序URL Scheme文档，开放范围：非个人主体小程序

通过加密 URL Scheme （需要后端获取加密 Scheme）
通过明文 URL Scheme （可前端直接拼接）

注意：iOS系统可以直接打开URL Scheme，Android系统需要使用 H5 页面中转

实现过程

当前项目使用的技术是 vite-vue-ts，使用明文 URL Scheme方式唤起小程序
安装项目：pnpm create vite my-project-name --template vue-ts

1.列表页复制按钮事件js，实现生成URL Scheme，并复制到剪切板

const handleClick = ()=>{
   
   
  // URL Scheme需要进入的小程序页面
  const path = 'pages/good/detail/index'
  // URL Scheme携带的参数
  const query = encodeURIComponent(`goodId=${
     
     record.goodId}&other=${
     
     record.other}`)
  // 拼接完整的 URL Scheme
  const url = encodeURIComponent(`weixin://dl/business/?appid=222222222222&path=${
     
     path}&query=${
     
     query}`)
  // 跳转到新增的H5页面的url（看下文），mpAppId公众号id，appId小程序id
  const goodUrl = `${
     
     location.origin}/good.html?scheme=${
     
     url}&mpAppId=11111111111111&appId=222222222222`
  // 调用后端的接口生成短链接，并复制到剪切板
  return myRequest(`api/short/url`, {
   
    url:goodUrl }).then((resp) => {
   
   
  	  // 拷贝到剪切板（看下文utils工具）
      copyText(resp.data)
      Message.success('复制成功')
      return resp.data
  })
}

2.需要在现有的后台管理系统项目新建一个H5页面
在vite.config.ts中配置项build > rollupOptions > input 中新增配置项 good:

export default defineConfig({
   
   
	// ... 其他配置
	build：{
   
   
		rollupOptions：{
   
   
		  // ... 其他配置
		  input: {
   
   
		     good: path.resolve(__dirname, 'good.html'), // 新建H5
		     index: path.resolve(__dirname, 'index.html'), // 原系统入口页
	      },
	      output: {
   
   
	        dir: path.resolve(__dirname, './dist'), // 打包输出问价
	      },
		}
	}
})

在vite.config.ts同级目录下新建good.html文件，并引入小程序微信开放标签JDK的js文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="icon"
      type="image/svg+xml"
      href="/logo.png"
    />
    <meta
      name="viewport"
      content=<

最低0.47元/天解锁文章