webView和js交互规范

第一次交互式交互建议阅读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;
  }
});