html与原生交互,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