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

這樣也可以返回參數

這就是目前我做到的交互的一部分,之後還有新的內容,之後再補充添加
拜拜~~