webView和js交互規範

第一次交互式交互建議閱讀webView與vue交互

注：原生app向js注入app對象，前端可經過app 調用原生方法；例如設置title文本 app.setTilte("搶紅包")

一、web頁面加載時須要app的參數時：
採用url路徑傳參：例如：?chainName=ggband&age=28

二、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");

三、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>

四、設置標題欄背景顏色：setTitleBarBgColor(color);其中color爲"#ff0000"格式的字符串

exp: methods

 app.setTitleBarBgColor("#ff0000");

五、設置標題欄透明度：setTitleBarAlpha(alpha);其中alpha取值範圍（0--255）注：0爲全透明，255爲不透明

  app.setTitleBarAlpha(0);//設置全透明

六、狀態欄文字和標題欄文字及icon色系：目前兼容兩種色系：黑色系和白色系
1）黑色系：setLightMode()
2）白色系：setDartMode()

七、隱藏標題欄：hideTitlebar();隱藏titleBar後前端可自行指定標題欄

八、關閉當前頁面：finishPage(),前端自定義標題欄可能會用到

九、置頂（沉侵式）web頁面內容延伸到狀態欄：setImmersivel()

十、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>

 

 

十一、跳轉到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時:

十二、默認標題欄 白色背景、黑色文字setDefaultTitleBar

exp:每次切換路由設置默認標題欄，在main.js加入

router.afterEach(function (to, from) {
 app.setDefaultTitleBar(); if(to.meta.title){
      document.title = to.meta.title;
  }
});