Vue-jsBridge

Vue单页框架与Native交互控制器。	

Notes:
所有api调用时传入的参数值都必须使用字符串（特别说明的除外）

• Version 1.0.0
  1. 增加 v-linkurl方法
  2. 增加 checkInsideApp方法
  3. 增加 openNewPage方法
  4. 增加 showLoadingDialog展示加载对话框
  5. 增加 hideLoadingDialog隐藏加载对话框
  6. 增加 showLoadingView展示加载对话框
  7. 增加 hideLoadingView隐藏加载对话框
• Version 1.1.0

  1. 增加 showToast 方法

  2. 增加 showAlert 方法

  3. 增加 gotoLoginPage 方法

  4. 增加 addIconMenu 方法

  5. 增加 addWordMenu 方法

  6. 增加 addShareMenu 方法

  7. 增加 deleteMenu 方法

• API
  • <v-linkurl>
  • <checkInsideApp>
  • <openNewPage>
  • <showLoadingView>
  • <hideLoadingView>
  • <showLoadingDialog>
  • <hideLoadingDialog>
  • <showToast>
  • <showAlert>
  • <gotoLoginPage>
  • <addIconMenu>
  • <addWordMenu>
  • <addShareMenu>
  • <deleteMenu>

调用方式

npm install vue-jsbridge

Vue调用方式

var vueBridge = require('vue-jsbridge');

Vue.use(vueBridge);

API

<v-linkurl>

重写vuejs的v-link方法，业务端无需判断环境，直接使用，使用方法和v-link差不多，不过v-linkurl加了一个必传参数

例如：

v-link的用法：

v-linkurl的用法：

其中 title是必传参数 它是作为Native头部的标题栏用， name和url必传其一，name是跳转的hash, url是跳转的url

有url的时候 优先url作为跳转

// v-linkurl 页面间的跳转方法.
// request:示例



<a v-linkurl="{name: 'home', query: {},title: '首页',url: 'http://xxxx'}">首页</a>

<checkInsideApp>

checkInsideApp 判断是否在APP内 全站方法，返回 true 和 false

要求是在所有的H5头部都加上该判断.

//////////
//
// checkInsideApp
//
// request:示例
//
//////////

<header v-if="checkInsideApp">title</header>

console.log(this.checkInsideApp);

<openNewPage>

openNewPage打开新页面,和v-linkurl差不多，考虑到有的地方是@click时间，所以加了这个方法。

//////////
//
// openNewPage打开新页面
//
// request:示例
// {
//       "name": 'home', // hash
//       "title": '首页', // 页面标题
//       "query": {},
//       "url": 'http://xxx'
// }
//
//////////

this.openNewPage({
	name: 'home',
	query: {w:1},
	title: '首页'
})

<showLoadingView>

showLoadingView 加载loadling页面 不在APP内时 返回 true,在APP内会调出APP的loadingView

//////////
//
// showLoadingView打开loading
//
// request:示例
// 
//
//////////

this.showLoadingView();

<hideLoadingView>

hideLoadingView 隐藏loadingView 不在APP返回false

//////////
//
// showLoadingView隐藏loading
//
//
//////////

this.hideLoadingView();

<showLoadingDialog>

showLoadingDialog 加载loadling页面 不在APP内时 返回 true,在APP内会调出APP的loadingView

//////////
//
// showLoadingDialog打开loadingDialog
//
// request:示例
// 
//
//////////

this.showLoadingDialog();

<hideLoadingView>

hideLoadingView 隐藏loadingView 不在APP返回false

//////////
//
// showLoadingDialog隐藏loadingDialog
//
//
//////////

this.showLoadingDialog();

<showToast>

showToast显示toast提示

需要引入css vue-jsbridge.css

//////////
//
// showToast 显示toast提示
//
// request:示例
// {
//         "msg":msg
// }
//
//////////

this.showToast({
	"msg": "showToast"
});

<showAlert>

showAlert 弹出alert提示

需要引入css vue-jsbridge.css

//////////
//
// showAlert 弹出alert提示
//
// title : "title",
// content : "msg",
// button1 : "buttion1Title",
// button1action: function(){},//action支持传scheme或者方法
// button2 : "buttion2Title",
// button2action : function(){},
//
//////////

this.showAlert({
	"title": "提示"
	"msg": "showToast"
});

<gotoLoginPage>

gotoLoginPage 跳转到登录页

//////////
//
// gotoLoginPage 
//
//
//////////

this.gotoLoginPage({
	success: function() {
		// 跳转成功后回调
		...
	}
});

<addIconMenu>

addIconMenu 添加icon menu

//////////
//
// addIconMenu 向头部添加icon Menu.
//
// request:示例
// {
//    iconUrl: "http://....img",
//		rule: {value: ("0" left), ("1", right)},
//		listener: {
//			onSuccess: function(data) {
// 			},
//			onFail: function(data) {
// 			}
// 		}
// }
// 
//////////

this.addIconMenu({
	iconUrl: "http://....img",
	rule: "1"
});

<addWordMenu>

addWordMenu 添加文字 menu

//////////
//
// addWordMenu 向头部添加文字 Menu.
//
// request:示例
// {
//    word: "常见问题",
//		rule: {value: ("0" left), ("1", right)},
//		listener: {
//			onSuccess: function(data) {
// 			},
//			onFail: function(data) {
// 			}
// 		}
// }
// 
//////////

this.addWordMenu({
	word: "常见问题",
	rule: "1",
	listener: {
		onSuccess: function() {
			this.openNewPage({...})
		}
	}
	
});

<addWordMenu>

addShareMenu 添加分享 menu

//////////
//
// addShareMenu 添加分享menu.
//
// request:示例
// {
//    title : '' // 分享标题.
// 		content: '' // 分享内容描述.
//		link: ''  // 分享链接地址.
//		imgLink: // 分享标题图片.
// }
// 
//////////

this.addShareMenu({
	title: '分享',
	content: 'testtestetsteststtetstststetststtettstststetstststt',
	link: window.location.href,
	imgLink: ''
})

<deleteMenu>

deleteMenu 删除 menu

在执行addMenu的时候 先要执行 deleteMenu，这可能是Native 的一个bug.

/////////
//
// 删除左边或者右边的所有的menu
// 
// request {
// 	rule: {value: ("0" left), ("1", right)}
// }
/////////

var _this = this;
_this.deleteMenu({
	rule: "1"
});
_this.addShareMenu({
	title: '分享',
	content: 'testtestetsteststtetstststetststtettstststetstststt',
	link: window.location.href,
	imgLink: ''
});