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)
			});

这样也可以返回参数

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

### 实现 UniApp 中 WebView H5 页面交互的方法 在 Vue.jsuni-app 开发环境中,为了实现混合模式下原生 App Webview 加载的 H5 页面间的交互,开发者可以利用 `web-view` 组件以及特定 API 来完成数据传递方法调用的功能[^1]。 #### 使用 web-view 组件加载外部 URL 并其互动 当希望在一个页面中嵌入并显示来自网络或其他本地资源的内容时,可以通过 `<web-view>` 标签指定要访问的目标地址。对于想要同该视图内部 JavaScript 进行沟通的情况,则需借助于平台提供的接口函数来进行操作[^3]。 ```html <template> <view class="container"> <!-- 定义一个用于呈现远程HTML文档的空间 --> <web-view :src="url"></web-view> <!-- 添加按钮触发向WebView发送消息的动作 --> <button @click="sendMessageToWebView">Send Message</button> </view> </template> <script> export default { data() { return { url: 'https://example.com', // 设置目标网址 }; }, methods: { sendMessageToWebView() { const message = JSON.stringify({ action: "greet", payload: "Hello from UniApp!" }); // 调用API将字符串形式的消息传送给WebView中的JavaScript环境执行 plus.webview.currentWebview().evalJS(`handleMessage(${message})`); } } } </script> ``` 此代码片段展示了如何创建一个带有 `web-view` 插槽的应用界面,并定义了一个点击事件处理器用来构建一条信息并通过 `plus.webview.currentWebview().evalJS()` 发送到所关联的 HTML 文档里去处理[^2]。 #### 接收来自 WebView 的回调通知 为了让宿主应用程序能够响应由网页发起的操作请求,在实际项目里通常还需要设置监听器等待可能到来的通知或命令。这一步骤同样依赖于相应框架所提供的工具集来达成目的: ```javascript // 假设这是位于WebView内的脚本部分 function sendEventBack(eventType, eventData) { window.plus.android.invoke({ className: "io.dcloud.feature.uniapp.UniViewJsBridge", methodName: "sendData" }, eventType + ':' + encodeURIComponent(JSON.stringify(eventData))); } document.addEventListener('DOMContentLoaded', function () { console.log("Page loaded"); }, false); ``` 上述例子说明了怎样从被包含的网站端发出信号给承载它的容器——即这里的 UniApp 应用程序;而后者则可通过注册全局侦听机制捕获这些异步到达的信息流。
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值