第一次交互式交互建议阅读webView与vue交互
注：原生app向js注入app对象，前端可通过app 调用原生方法；例如设置title文本 app.setTilte("抢红包")
1、web页面加载时需要app的参数时：
采用url路径传参：例如：?chainName=ggband&age=28
2、title标题文本：
@一个页面不需要改变title时：
1） 普通web项目配置<title>标签
2）vue项目在切换router时设置document.title = to.meta.title;
exp: main.js
router.afterEach(function (to, from) {
app.setDefaultTitleBar();
if(to.meta.title){
document.title = to.meta.title;
}
});
@一个页面需要改变title时：
调用原生setTitle(str);其中str就是标题文本
exp: methods
app.setTitle("Love");
3、subtitle 副标题：
1) 设置副标题文本：setSubtitle(str);其中str就是副标题文本
exp: methods
app.setSubtitle("点我啊");
2）subtitle点击事件：原生app调用web的onSubtitleClick()方法，由前端自行响应onSubtitleClick()
exp:
<script>
export default {
mounted() {
window.onSubtitleClick= this.onSubtitleClick
},
methods: {
onSubtitleClick(){
alert("你点击副标题了:");
}
}
}
</script>
4、设置标题栏背景颜色：setTitleBarBgColor(color);其中color为"#ff0000"格式的字符串
exp: methods
app.setTitleBarBgColor("#ff0000");
5、设置标题栏透明度：setTitleBarAlpha(alpha);其中alpha取值范围（0--255）注：0为全透明，255为不透明
app.setTitleBarAlpha(0);//设置全透明
6、状态栏文字和标题栏文字及icon色系：目前兼容两种色系：黑色系和白色系
1）黑色系：setLightMode()
2）白色系：setDartMode()
7、隐藏标题栏：hideTitlebar();隐藏titleBar后前端可自行指定标题栏
8、关闭当前页面：finishPage(),前端自定义标题栏可能会用到
9、置顶（沉侵式）web页面内容延伸到状态栏：setImmersivel()
10、share分享
1) 分享链接 shareUrl(params,callback);
其中params包含：
title标题; url链接; content内容; iconUrl图片链接
callback（status）:分享回调函数 status = 0:成功; status = 1:失败;status = -1:用户取消分享
exp:
<template>
<p><button @click="shareUrl()">分享Url</button></p>
</template> <script> export default { mounted() { window.shareCallback = this.shareCallback }, methods: { shareCallback(status){ alert("shareCallback:"+status); }, shareUrl(){ //分享链接 shareUrl(params,callback); //title标题; url链接; content内容; iconUrl图片链接 var params ={}; params.title="你在看视频" params.url="url" params.content="content" params.iconUrl="iconUrl" app.shareUrl(JSON.stringify(params),"shareCallback"); }
}
} </script>
2) 分享图片
shareImage(data，callback)；
@其中data以http开头时：app视作图片在网络环境
@其中data不为http开头时：app视作图片时base64格式；（web要分享页面部分内容时可采用此方式）
callback（status）:分享回调函数 status = 0:成功; status = 1:失败;status = -1:用户取消分享
注：web前端可用html2canvas插件 可将页面部分内容转化成base64
exp:
// 引入html2canvas
//npm install html2canvas
<template>
<!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
<div class="image_tofile" ref="imageTofile">
<!-- 这里放需要截图的元素,自定义组件元素也可以 -->
<!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="htmlUrl">
<button @click="toImage">截图</button>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
htmlUrl: ''
}
},
mounted() {
window.shareCallback = this.shareCallback;
app.setLightMode();//設置黑色系文字
app.setTitleBarAlpha(0);//設置標題欄全透明
app.setImmersivel();//置顶
},
components: {
html2canvas
},
methods: {
shareCallback(status){
alert("shareCallback:"+status);
},
toImage() {
html2canvas(this.$refs.imageTofile, {
backgroundColor: null
}).then((canvas) => {
let url = canvas.toDataURL('image/png');
this.htmlUrl = url;
app.shareImage(url,"shareCallback")
})
}
}
}
</script>
11、跳转到app的某一页面
1）客户端为Android时:
@navTo(cls);不带参数
exp:
<template> <p><button @click="navToUserCenter()">android:跳转个人中心</button></p> </template> <script> export default { methods: { navToUserCenter(){ app.navTo("com.starteos.st.compon.user.UserInfoActivity"）; } }
} </script>
@navTo(cls，params);带参数
exp:
<template> <p><button @click="navToCouponTab2()">android:跳转加息卷选中第二个tab</button></p> </template> <script> export default { methods: { navToCouponTab2(){ //分享链接 shareUrl(params,callback); //title标题; url链接; content内容; iconUrl图片链接 var params = {"tab":"1"}; app.navTo("com.starteos.st.compon.coupon.CouponActivity",JSON.stringify(params)); } } } </script>
cls:组件路径 如加息卷页面：com.starteos.st.compon.coupon.CouponActivity
其中params：
页面参数；采用{key:value}的格式，键和值都采用String;如选中加息卷页面的第二个tab时：需要传入参数{"tab":"1"}；
多参数时：{"tab":"1","id":"12"}
2）客户端为Ios时:
12、默认标题栏 白色背景、黑色文字setDefaultTitleBar
exp:每次切换路由设置默认标题栏，在main.js加入
router.afterEach(function (to, from) { app.setDefaultTitleBar(); if(to.meta.title){ document.title = to.meta.title; } });
