ios系统跳转页面uniapp uniapp h5跳转app

转载

mob64ca13f48509 2024-03-14 14:56:52

文章标签 ios系统跳转页面uniapp 微信浏览器开发微信 App ios 文章分类 iOS 移动开发

这篇博客我们用一个真实的简单例子来说明一下如何从微信内部浏览器跳转至移动应用。但本篇博客只是H5端的应用，只能跳转到App的首页，跳转到具体页面需要安卓和ios的开发人员自身配置，我们就暂时不说这一部分啦😄

注意：一定要看懂官方文档！！！！！！！！！！！！！！！多看几遍，看懂了有问题了再看博客

开发背景：uniapp + H5 + 微信公众平台和开放平台的配置已经完成（这部分的配置直接按照官网给的步骤来）
第一步，引入文件：

微信官网上给的文件地址进入。粘贴，在本地新建一个文件，复制到自己的本地文件中。再自己在本地引入这个文件，

let link = require('../../static/link.js')

这里的引入，本地的话需要稍微修改一下，详见我的这篇文章！很简单

import wx from 'weixin-js-sdk'

cpm install weixin-js-sdk --save

let sha1 = require('js-sha1')

第二步，注册微信开放标签

// 获得nonceStr
getNum(){
	var chars = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
	var nums="";
	for(var i=0;i<32;i++){
		var id = parseInt(Math.random()*35);
		nums+=chars[id];
	}
	this.nums = nums
}
***

 这个是写在method里

***
-----------------------------------------------------------------

mounted() {
	this.getNum()
	//得到日期随机数 timestamp
	let timestamp = Math.round(new Date() / 1000)
	this.time = timestamp.toString()


	//获得 jsapi_ticket
	axios.get('/prefix/cgi-bin/token?grant_type=client_credential&appid=wxcdbe7983be8fb746&secret=a61fc54202debafefd04e37d7399b39e').then(res => {
		localStorage.setItem('tokent', res.data.access_token)
	    axios.get('/prefix/cgi-bin/ticket/getticket?access_token='+localStorage.getItem('tokent')+'&type=jsapi').then(ret => {
			localStorage.setItem('ticket', ret.data.ticket)
	    })
	})
## 这里的axios需要引入 ，需要用的话自行引入。
## 这里请求的两个接口都做好了服务器代理，代理的具体做法网上有很多，在配置中加一段代码即可
## 需要注意的是：我建议使用localStorage来存储token


	let dataBeforeSign = {
	  "noncestr": this.nums,
	  "jsapi_ticket": localStorage.getItem('ticket'),
	  "timestamp": this.time,
	  "url": url
	}
	let arr = [];
	for (var key in dataBeforeSign) {
		arr.push(key)
	}
	arr.sort();
	let str = '';
	for (var i in arr) {
		str += arr[i] + "=" + dataBeforeSign[arr[i]] + "&"
	}
	let stringA = str.substr(0, str.length - 1)
	this.signature = sha1(stringA)

## 这里一段是得到签名，签名需要使用sha1,官网上有说明
	wx.config({
	　　　　debug: true,
	　　　　appId: 'wxcdbe7983be8fb746', 
	　　　　timestamp: this.time, 
	　　　　nonceStr: this.nums, 
	　　　　signature: this.signature,
		   jsApiList: ['wx-open-launch-app'],
	　　　　openTagList: ['wx-open-launch-app'] 
	　　});
//　debug: true  这里的debug，当我们在微信浏览器中打开含有打开App标签按钮的地方时，页面会自动弹出弹框：如果弹出的是：config:OK，🎉你，说明微信标签的注册是成功的！
//得到签名时传入的内容和注册时要一致哦😯 可以自行弹框检查一下😍
## 注册标签！！！！！不同的功能需要的标签是不同的，打开App就是需要我写的这个。注意 jsApiList: ['wx-open-launch-app'],这个我自己试了这样写没问题的。但其实jsApiList的列表里好像并没有我需要的，详细的列表官网上都有说过的。
		wx.ready(function (res) {
		  console.log(res)
		});
		wx.error(function (res) {
		  console.log(res)
		});
		var btn = document.getElementById('launch-btn');
		btn.addEventListener('launch', function (e) {
	   	 	console.log('success');
	 	 });
	  	btn.addEventListener('error', function (e) {
	    	console.log('fail', e.detail);
	    	alert(e.detail.errMsg)
	  });
}

## 这里是我们用来测试的部分，这里是可以check出前面哪里有问题的地方。

wx.ready(function (res) {
 console.log(res)
});
wx.error(function (res) {
 console.log(res)
});
这里是可以判断wx是否注册成功的地方，如果微信sdk成功引入了 就不会走error报错

var btn = document.getElementById('launch-btn');
	btn.addEventListener('launch', function (e) {
  	 	console.log('success');
  	 	alert('success')
	 });
 	btn.addEventListener('error', function (e) {
   	console.log('fail', e.detail);
   	alert(e.detail.errMsg)
 });
这里是监听微信标签点击事件的，当打开App按钮成功显示，并可以点击时，上述的监听事件会执行，如果执行的是'success'的部分，恭喜🎉你！打开App的操作已经完成啦！！！   如果执行的部分是error的地方，那么就需要按照弹出的内容判断出了问题的地方啦！详情参见微信官方文档的说明啦！！我在下面贴一部分报错原因 

做好这一部分的代码，并不难，但需要我们仔细仔细再仔细啦！😄

------------------------------------------------------------------------

第三步加入微信标签

<view class="bar-content-button">
	<wx-open-launch-app
	 id="launch-btn"
	 appid="wxc8d81336736a6d43"
	 extinfo=""
	>
	
	<script type="text/wxtag-template">
		<style>.btn { margin-bottom:4rpx;line-height: 34rpx; font-size: 34rpx; color:rgba(255,255,255,1); background:rgba(33,186,189,1); border: none; outline: none;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;}</style>
		<button id="btn1" class="btn">打开App</button>
		</script>
	</wx-open-launch-app>
</view>







-----------------

完成✅ 给大家看一下完成结果吧！

ios系统跳转页面uniapp uniapp h5跳转app_ios系统跳转页面uniapp