HaaS UI小程式解決方案基礎教學之三： JSAPI頁面導航

名詞解釋

AliOS Things： 阿裡雲智能IoT團隊自研的物聯網作業系統

HaaS：全稱是Hardware as a Service，阿裡雲智能IoT團隊基于AliOS Things系統推出的硬體即服務

HaaS UI：全稱是Hardware as a Service User Interface，是源自AliOS Things作業系統上的一套應用&圖形解決方案，支援C/C++和 JS兩種開發語言

JSAPI: 全稱是JavaScritp Application Programming Interface,即JS應用程式程式設計接口，實作JS前端和系統層各個子產品的接口調用，類似android系統的JNI

1、JavaScript簡介

JavaScript（簡稱“JS”）是一種基于對象和事件驅動并具有相對安全性的進階程式設計語言。雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非浏覽器環境中。在物聯網領域，利用JavaScript來開發前端頁面，也逐漸成為了一種趨勢。

2.、HaaS UI JSAPI簡介

HaaS UI JSAPI為JavaScript提供了調用底層系統能力的接口，例如資料存儲、網絡管理、檔案操作等。HaaS UI已經内置了一些基本的JSAPI，本文将介紹HaaS UI中一些内置JSAPI的功能以及用法。

3、HaaS UI内置JSAPI清單

HaaS UI目前内置了一些基本的JSAPI供開發者使用，這些JSAPI提供與應用生命周期、頁面導航、資料存儲、包管理、網絡請求等強關聯的接口，接口宿主為架構提供的基礎類($falcon,App,Page等)。

接口宿主	JSAPI	調用方法	接口功能
$falcon	navTo	$falcon.navTo(target:String, options:Object)	應用、頁面管理
closeApp	$falcon.closeApp()
closePageByName	$falcon.closePageByName(pageName:String)
closePageById	$falcon.closePageById(pageId:String)
getPage	$falcon.getPage(component:Component)
App	finish	$falcon.$app.finish()
Page	setRootComponent	this.setRootComponent(component:Component) // this指針屬于繼承$falcon.Page的類
	this.finish()

4、HaaS UI JSAPI使用示例

下面将以頁面跳轉為例，介紹如何去使用JSAPI。以Vue工程為例，我們開發了兩個頁面，一個頁面是index頁面，另一個頁面是page頁面，我們要實作這兩個頁面之間的跳轉。

4.1、 index頁面開發

首先需要開發index頁面，模闆和

<div class="wrapper">
    <text class="index">This is index!</text>
    <text class="button">click to page</text>
  </div>
</template>
 
<style scoped>
.wrapper {
  justify-content: center;
  align-items: center;
  background-color: #f8f8ff;
}
.index {
  text-align: center;
  margin-top: 20px;
  font-size: 50px;
  color: #41b883;
}
.button {
  margin-right: 20px;
  padding: 10px;
  background-color: #888;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
</style>           

index頁面效果

4.2、 page頁面開發

然後需要開發page頁面，模闆和

<div class="wrapper">
    <text class="page">This is page!</text>
    <text class="button">click to index</text>
  </div>
</template>
 
<style scoped>
.wrapper {
  justify-content: center;
  align-items: center;
  background-color: background-color: #0000ff;
}
.page {
  text-align: center;
  margin-top: 20px;
  font-size: 50px;
  color: #41b883;
}
.button {
  margin-right: 20px;
  padding: 10px;
  background-color: #888;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
</style>           

page頁面效果

4.3 index頁面跳轉page頁面

我們想要實作從index頁面點選跳轉到page頁面的功能，隻需要調用JSAPI中的navTo接口即可。在index頁面，我們隻需要在

export default {
  name: "index",
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    jump() {
      $falcon.navTo("page", { from: "index" });
    },
    finishApp() {
      this.$app.finish();
    },
    finishPage() {
      this.$page.finish();
    },
  },
};
</script>           

index頁面

<div class="wrapper">
    <text class="index">This is index!</text>
    <text class="button" @click="jump">click to page</text>
  </div>
</template>           

4.3 page頁面跳轉index頁面

同理，要實作從page頁面點選跳轉到index頁面的功能，隻需要調在index頁面的

export default {
  name: "index",
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    jump() {
      $falcon.navTo("index", { from: "page" });
    },
    finishApp() {
      this.$app.finish();
    },
    finishPage() {
      this.$page.finish();
    },
  },
};
</script>

           

同樣，需要在page頁面的模闆中将jump函數綁定到相應的button上：

<div class="wrapper">
    <text class="page">This is page!</text>
    <text class="button" @click="jump">click to index</text>
  </div>
</template>           

4.4 頁面跳轉效果展示

從index頁面點選跳轉按鈕可以跳到page頁面，同樣，從page頁面點選跳轉按鈕可以跳回index頁面。

5. 開發者技術支援

如需更多技術支援，可加入釘釘開發者群，或者關注微信公衆号