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


版权声明:本文为yu17310133443原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。