uniapp——ios 跳转小程序完整流程

一. 准备

1. 苹果开发者账号(创建app)

2. 微信开放平台账号 (创建移动应用)

3. 微信公众平台账号(创建小程序)

4. uni-app 创建项目

5. Dcloud 开发者账号且实名认证

二. 实现

1. uniapp 配置

打开manifest.json,app模块配置添加勾选share(分享)—>微信分享

appid 填写微信开放平台申请移动应用的appid

Universal Links 点击自动生成

第一步需Dcloud开发者账号申请创建并实名认证,然后去新建云服务空间

名字自定义 创建好之后,开通前端网页托管

回到uniapp 选择云空间 下一步,配置域名

 选择自定义域名 然后点击去配置,添加域名

这里需要真是域名,然后需要后端或运维人员配合完成域名验证

 添加成功后

 返回uniapp ,完成 。UniversalLinks生成成功

 也可以打开源码视图,找到ios打包配置。自定义UniversalLinks

 

 2. 微信开放平台配置

打开在微信开放平台创建的app,找到开发信息,ios平台配置

苹果开放平台中创建app的bundle ID 和 刚刚在uniapp中设置的UniversalLinks

 bundle ID可在Identifiers中点开详情查看

到这里配置就完成了!

三. 代码实现

回到代码,在需要跳转小程序页面onLoad()获取本地微信分享服务对象

可参考官方文档:https://www.html5plus.org/doc/zh_cn/share.html#plus.share.ShareService.launchMiniProgram

onLoad() {
			// #ifdef APP-PLUS  
			let that = this
			plus.share.getServices(function(res) {
				var sweixin = null;
				for (var i = 0; i < res.length; i++) {
					var t = res[i];
					console.log("t", t)
					if (t.id == 'weixin') {
						sweixin = t;
					}
				}			
				if (sweixin) {
					that.sweixin = sweixin
				}
			}, function(res) {
				console.log(JSON.stringify(res));
			});
			//#endif
		},

 跳转小程序时调用launchMiniProgram  API

//#ifdef APP-PLUS  
				let sweixin = this.sweixin;
				if (sweixin) {
					sweixin.launchMiniProgram({
						id: '小程序appid',
						path: `跳转小程序后打开页面路径,可拼接参数`,
						type: 0 //微信小程序版本类型 0-正式版; 1-测试版; 2-体验版。
					});
				}
				//#endif 

 微信小程序可在app.js中onLaunch和onShow获取到app传过来的参数

微信小程序返回app使用button  open-type="launchApp" 可直接返回.

<button class="btn" open-type="launchApp" app-parameter="weixin">返回APP</button>

app-parameter可携带参数,在uniapp 中App.vue使用 plus.runtime.arguments接收参数

可参考:https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.arguments

四. 体验

配置模块权限,要制作自定义调试基座,打包好后,选择运行基座—>自定义调试基座,然后运行真机调试

END

### 实现 UniApp 框架下的 H5 页面向小程序传递参数 在 UniApp 开发环境中,实现从 H5 页面跳转小程序并携带参数的过程涉及多个步骤。为了确保跨平台兼容性和数据安全传输,在 H5 中需引入特定 JavaScript SDK 并配置相应接口权限。 #### 准备工作 首先需要确认项目已接入微信公众平台开放能力,并完成应用注册获取 AppID 和其他必要凭证信息。接着按照官方文档指引设置服务器域名白名单等基础环境准备事项[^2]。 #### 引入 WeChat JS-SDK 为使网页能够调用微信内浏览器提供的原生功能,必须加载 `jweixin` 库文件: ```html <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> ``` 随后初始化 SDK 配置项以便后续操作使用: ```javascript wx.config({ debug: false, // 生产环境下应设为false appId: 'YOUR_APP_ID', // 必填,公众号唯一标识 timestamp: '', // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表 }); ``` 注意上述代码中的 `appId`, `timestamp`, `nonceStr` 及 `signature` 字段均需由服务端动态计算得出以保障安全性。 #### 构建 URL Scheme 方式唤起小程序 对于希望直接打开指定路径的小程序实例而言,可通过构造特有格式链接来达成目的。具体形式如下所示: ``` http(s)://domain/path?params... ``` 转换成适用于微信生态的标准写法即成为: ``` wechat:\/\/discover\/open?uri=pages%2Findex%2Findex&query=key=value ``` 实际编码时推荐采用编程方式拼接字符串而非手动书写以免出错。下面给出一段基于 Vue 组件的方法示现实例: ```vue methods:{ openMiniProgram(){ const url = encodeURIComponent('pages/index/index?key=value'); window.location.href=`weixin://dl/business/?t=${url}`; } } ``` 此方法简单易懂但存在局限性——仅限于 iOS 设备支持;安卓则依赖 WebView 内核版本差异可能无法正常解析该协议头。因此建议优先考虑 API 接口方案。 #### 使用 wx.miniProgram.navigateTo() 方法 当目标终端处于微信客户端内部浏览场景下,可借助内置对象访问更便捷高效的途径。此时只需保证当前上下文中已经成功注入了 `wx` 命名空间即可执行以下命令: ```javascript if (typeof(wx) !== undefined && typeof(wx.miniProgram)!==undefined){ wx.miniProgram.navigateTo({url:'pages/index/index?key=value'}); }else{ console.log("not in wechat browser"); } ``` 这种方式不仅简化了逻辑判断过程还提高了用户体验流畅度。不过值得注意的是只有位于微信体系内的 Webview 才能识别此类指令集。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mickey_于浩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值