短信链接跳转小程序实现流程

点击短信发送的短链接到浏览器会重定向到映射的长链接地址，h5页面 HTML 和 DOM 树加载完成后（DOMContentLoaded事件）获取地址栏中URL Scheme，使用location.href跳转至小程序。

1. 短信链接跳转至小程序

使用的是微信官方文档提供的 URL Scheme 实现，获取 URL Scheme | 微信开放文档。

需要后端生成跳转短链接。【注：只能生成已发布的小程序的 URL Scheme】

数据库保存了短链接和长连接的关系。

2. h5中转页

官网文档描述：

所以需要开发一个h5页面，开发时遇到的问题是：

不同品牌机型，有的可以自动弹出跳转微信小程序的弹窗提醒，有的不能。

解决方法：

添加了touchstart监听事件，用户触摸屏幕触发这一事件，调用跳转小程序的方法。

3. 小程序

遇到的问题：

不同短信链接点击跳转至小程序，第一个链接跳转可正常，不关闭浏览器及小程序，再次点击第二个链接进行跳转时未获取到h5地址栏的参数。

是因为使用的是uni.getLaunchOptionsSync()获取的参数，这个方法是用于获取冷启动参数。

改为uni.getEnterOptionsSync()获取热启动参数就可以了，冷启动和热启动的含义可以看下官方文档。

4. 小程序配置多环境

可以先看下官网文档，package.json | uni-app官网。

在根目录下的package.json文件中进行配置

{
    "uni-app": {
        "scripts": {
            "dev": {
                "title":"小程序-开发环境",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "VUE_APP_BASE_URL": "https://xxx.com"
                 },
                "define": {
                    "DEV-WEIXIN": true
                }
            },
			"test": {
			    "title":"小程序-测试环境",
			    "env": {
			        "UNI_PLATFORM": "mp-weixin",
			        "VUE_APP_BASE_URL": "https://xxx.com"
			     },
			    "define": {
			        "TEST-WEIXIN": true
			    }
			},
			"pro": {
			    "title":"小程序-生产环境",
			    "env": {
			        "UNI_PLATFORM": "mp-weixin",
			        "VUE_APP_BASE_URL": "https://xxx.com"
			     },
			    "define": {
			        "PROD-WEIXIN": true
			    }
			}
        }    
    }
}

项目使用的是vue3，获取不到process，需要在vite.config.js中配置一下

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
 
export default defineConfig(() => {
  return {
    plugins: [uni()],
    define: {
      'process.env': process.env
    },
  };
});

配置完再打印process.env就可以获取到配置的VUE_APP_BASE_URL了。

配置完后运行和发行都可以选择对应的环境了。