uni h5与原生交互的方式

原生ios 安卓与h5交互的方式

在我使用uni-app开发app的时候

在原生的框架里嵌入了h5的页面
这个时候 就出现新的问题 就是原生页面跳转h5, h5跳转原生界面等一些问题,我在这里做了整理
这种跳转是我们在使用原生的导航栏, 但是页面是h5 所以就需要不用的跳转方式
1, 首先 引入在common文件夹里引入写好的js文件
`import Vue from ‘vue’

;(function(global, factory) {
typeof exports === ‘object’ && typeof module !== ‘undefined’ ? module.exports = factory() : typeof define ===
‘function’ && define.amd ? define(factory) : global.Virsical = factory()
}(this, (function() {
‘use strict’;
var Virsical;
Virsical = new Object;

var _platform_other = 0;
var _platform_android = 1;
var _platform_ios = 2;

function getPlatform() {
	var u = navigator.userAgent;
	if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) { //android终端
		return _platform_android;
	} else if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
		return _platform_ios;
	}
}

var browser = {
    versions: function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {         //移动终端浏览器版本信息
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}


//跳转页面
Virsical.navigateTo = function(res) {
	try{
		// PC浏览器
		if(!browser.versions.webApp && browser.versions.ios){
			var param = ''
			if(res.params){
				param = '' + '?' + res.params
			}
			uni.navigateTo({
				url: '/' + res.url + param,
			})
		}
		if (getPlatform() == _platform_ios) {
			window.webkit.messageHandlers.navigateTo.postMessage(res)
		}
		if (getPlatform() == _platform_android) {
			window.JsMethodApi.postMessage(JSON.stringify(res));
		}
		
	}catch(e){
		//TODO handle the exception
	}
}

//返回上个页面
Virsical.navigateBack = function(res) {
	try{
		if (getPlatform() == _platform_ios) {
			window.webkit.messageHandlers.navigateBack.postMessage(res)
		}
		if (getPlatform() == _platform_android) {
			window.JsMethodApi.navigateBack(JSON.stringify(res));
		}
	}catch(e){
		//TODO handle the exception
	}
	
}

//关闭当前页面，返回上一页面或多级页面
Virsical.reLaunch = function(res) {
	try{
		if (getPlatform() == _platform_ios) {
			window.webkit.messageHandlers.reLaunch.postMessage(res)
		}
		if (getPlatform() == _platform_android) {
			window.xxx.postMessage(JSON.stringify(res));
		}
	}catch(e){
		//TODO handle the exception
	}
}

//关闭当前页面，返回上一页面或多级页面
Virsical.setNavButton = function(res) {
	if (getPlatform() == _platform_ios) {
		window.webkit.messageHandlers.setNavButton.postMessage(res)
	}
	if (getPlatform() == _platform_android) {
		window.xxx.postMessage(JSON.stringify(res));
	}
}

//支付
Virsical.requestPayment = function(res) {
	if (getPlatform() == _platform_ios) {
		window.webkit.messageHandlers.requestPayment.postMessage(res)
	}
	if (getPlatform() == _platform_android) {
		window.xxx.postMessage(JSON.stringify(res));
	}
}

return Virsical;

})));
`
这是引入的js文件
同时 在main.js中引入

//与原生数据交互
import Native from '@/common/nactive.js'
Vue.prototype.$Native = Native;

我在js文件里封装了不同的跳转方式

	//跳转页面
	Virsical.navigateTo = function(res) {
		try{
			// PC浏览器
			if(!browser.versions.webApp && browser.versions.ios){
				var param = ''
				if(res.params){
					param = '' + '?' + res.params
				}
				uni.navigateTo({
					url: '/' + res.url + param,
				})
			}
			if (getPlatform() == _platform_ios) {
				window.webkit.messageHandlers.navigateTo.postMessage(res)
			}
			if (getPlatform() == _platform_android) {
				window.JsMethodApi.postMessage(JSON.stringify(res));
			}
			
		}catch(e){
			//TODO handle the exception
		}
	}

(1) navigateTo // 跳转到下一个页面 同时传递参数
上面代码是判断我从pc浏览器进入 或者是ios 和
安卓的判断 这样我们的跳转就不用写uni的方法 直接写自己封装好的,方便我们的代码速度
例如:

			// uni.navigateTo({
			// uni跳转
				// 	url:'/pages/links/help/user_login'
				// })
				//封装好的跳转
				this.$Native.navigateTo({
					url:'pages/links/help/user_login'
				})

(2) 跳转传参的方式

在原生那边可以
写好固定的接受参数的方式 如params 接受()
params可以是 里 必须是JSON转换成的字符串 (原生那边只接受字符串)

this.$Native.navigateTo({
				url:'pages/links/help/user_login'
				params: JSON.stringify(paramsList)
			});

这是一种方式
或者是=用拼接地址的方式传参

this.$Native.navigateTo({
		url: 'pages/user-center/complain/details',
		params: '&id=' + item.id,
		title:'投诉详情'
})

这样原生也可以接收到
title 是我们自己的导航栏文字 也需要传给原生

而导航栏上的返回箭头 是使用原生的 这样
跳转页面会有动画的过度效果

**navigateBack **
(1) 点击h5上的返回按钮 返回上个h5 页面
这个返回方法和跳转有点不同

this.$Native.navigateBack({
	delta: 1,
	reload: true
	})

delta 表示我返回几个页面 1 上一个 2 上两个 以此类对
reload 返回后重新刷新页面 (原生刷新)
传递reload参数 他们接受后刷新

**(2) 有时 我们返回有时需要传递参数 **
我们也是用同样的办法

			var params = {
				id: item.id,
				amount: item.amount
			};
			this.$Native.navigateBack({
				delta: 1,
				reload: true,
				params: JSON.stringify(params)
			});

这样也可以返回参数

这就是目前我做到的交互的一部分,之后还有新的内容,之后再补充添加
拜拜~~

本文地址：https://blog.csdn.net/S_m_r/article/details/112803856