來開發一個wanandroid快應用吧

wanandroid快應用截圖

不過快應用的語法類似於小程式，都是基於前段js來開發的。想學習小程式的可以參考微信小程式開發<一> 微信小程式開發<二> 這個時代，作為程式設計師，我什麼要學習小程式

先吐槽下

1.因為快應用剛出來，網上沒有教程(至少我今天在寫這個應用的時候，網上除了demo還是demo，而且demo是官網的demo) 2.官網雖然有文件，但是文件還不完善，很多地方都不知道怎麼解決，寫這個應用真的是靠自己慢慢摸索寫出來的，本來還有幾個功能，因為實在找不出解決方法放棄了（待慢慢研究）。。。

注：前幾步跟官方文件教程基本一致，可跳過。

一、環境搭建

1.安裝nodejs

nodejs可以在官網下載快應用文件說是不要使用8.0.*版本，推薦v6.11.3 LTS 一開始以為是8以上不能用，查了下我電腦的是8.2.0，本來打算退回去的，嘗試之後發現沒有報錯可以正常使用。

2.安裝hap-toolkit

npm install -g hap-toolkit

複製程式碼

這一步如果卡住了(我就是這樣)，可以ctrl+c終止，然後輸入以下命令設定淘寶映象，之後再安裝

npm config set registry https://registry.npm.taobao.org

複製程式碼

安裝完成輸入命令

hap -V

複製程式碼

正確輸出版本資訊說明安裝成功。

二、初始化專案

1.執行以下命令初始化專案

hap init <你的專案名稱>

複製程式碼

命令執行後會在當前目錄下生成名為你的專案名稱的資料夾，作為專案根目錄，目錄結構如下：

├── node_modules
├── sign                      rpk包簽名模組
│   └── debug                 除錯環境
│       ├── certificate.pem   證書檔案
│       └── private.pem       私鑰檔案
├── src
│   ├── Common                公用的資原始檔和元件檔案
│   │   └── logo.png          manifest.json中配置的icon
│   ├── Demo                  頁面目錄
│   |   └── index.ux          頁面檔案，檔名不必與父資料夾相同
│   ├── app.ux                APP檔案（用於包括公用資源）
│   └── manifest.json         專案配置檔案（如：應用描述、介面申明、頁面路由等）
└── package.json              定義專案需要的各種模組及配置資訊，npm install根據這個配置檔案，自動下載所需的執行和開發環境

複製程式碼

2.編譯專案

先安裝依賴，在專案根目錄執行以下命令

npm install

複製程式碼

待安裝完成，使用以下命令編譯打包生成rpk包

npm run build

複製程式碼

編譯打包成功後，專案根目錄下會生成資料夾：build、dist

build：臨時產出，包含編譯後的頁面js，圖片等
dist：最終產出，包含rpk檔案。其實是將build目錄下的資源打包壓縮為一個檔案，字尾名為rpk，這個rpk檔案就是專案編譯後的最終產出

使用以下命令可自動重新編譯，

npm run watch

複製程式碼

注意：（我每次都遇到這個問題）

如果報錯遇到Cannot find module .../webpack.config.js，請重新執行一次hap update --force。這是由於高版本的npm在npm install時，會校驗並刪除了node_modules下部分資料夾，導致報錯。而hap update --force會重新複製hap-tools資料夾到node_modules中

三、除錯

1.安裝偵錯程式

偵錯程式是一個android應用，直接下載安裝

安裝完開啟如圖所示，此時按鈕都不能點選，還需要再安裝平臺預覽版兩個應用安裝完就可以安裝快應用了

2.安裝執行rpk包

有兩種方式：

HTTP請求：開發者啟動HTTP伺服器，開啟偵錯程式，點選掃碼安裝配置HTTP伺服器地址，下載rpk包，並喚起平臺執行rpk包
本地安裝：開發者將rpk包拷貝到手機檔案系統，開啟偵錯程式，點選本地安裝選擇rpk包，並喚起平臺執行rpk包

推薦第一種方式，除錯比較方便。

http請求方式：執行命令：

// 預設埠12306
npm run server

// 自定義埠,比如8080
npm run server -- --port 8080

複製程式碼

執行成功會顯示二維碼，可用偵錯程式掃描二維碼安裝，或點選偵錯程式右上角設定http伺服器地址再點選線上更新。

此時配合命令

npm run watch

複製程式碼

即可邊開發邊預覽效果

關於日誌檢視，官方文件介紹是使用Android Studio的Android Monitor輸出來檢視日誌。這裡提供另一種方法，執行以下命令

adb logcat -s JsConsole
// JsConsole是過濾資訊，因為在as看到快應用日誌輸出都有JsConsole這個標記，所以直接使用這個檢視快應用日誌，就不會被手機其他日誌干擾

複製程式碼

這樣就可以愉快地開發應用了，因為這些命令都是不能中斷（以為中斷就看不了資訊了或除錯不了了），所以需要開啟多個終端，這裡推薦用vscode+hap extension外掛開發，直接可邊開發邊檢視，不用切換螢幕等等，如圖：

四、開始開發

一開始看demo程式碼，以為是跟vue差不多，開發起來應該挺簡單的，開發過程才慢慢發現，其他它並不是真正的html+css，很多html、css程式碼都不支援，似乎它只是模擬而已，因為會把它轉為原生元件，暫時就沒能全部支援，所以開發過程還是挺難受的，動不動就報錯沒有這個屬性沒有那個屬性。

這裡通過wanandroid開發api來開發wanandroid應用

1.修改manifest.json配置資訊

{
  "package": "cn.codebear.wanandroid", //應用包名
  "name": "wanandroid", //應用名稱
  "versionName": "1.0.0", //版本名稱
  "versionCode": "1", //版本號
  "minPlatformVersion": "101", //支援的最小平臺版本號
  "icon": "/Common/Image/logo.png", //應用logo
  "features": [ //介面列表
    { "name": "system.prompt" },
    { "name": "system.router" },
    { "name": "system.shortcut" },
    { "name": "system.fetch" },
    { "name": "system.webview" },
    { "name": "system.storage" }
  ],
  "permissions": [
    { "origin": "*" }
  ],
  "config": { //系統配置資訊
    "logLevel": "debug"
  },
  "router": { //路由資訊
    "entry": "Wanandroid",
    "pages": {
      "Wanandroid": {
        "component": "index"
      },
      "Webview": {
        "component": "index"
      }
    }
  },
  "display": { //UI顯示相關配置
    "titleBar": true,
    "titleBarBackgroundColor": "#24b9ff",
    "titleBarTextColor": "#ffffff",
    "titleBarText": "首頁",
    "pages": {
    }
  }
}

複製程式碼

具體如何配置，官方文件寫的挺詳細，這裡就不多說了。

2.刪除程式碼

把專案初始化時給的demo程式碼都刪掉。

3.建立wanandroid頁面

在src目錄下新建一個Wanandroid目錄，目錄下新建一個index.ux檔案，命名不一定要index。這個作為應用的主頁面。程式碼如下

<template>
    <div class="wanandroid-page">
      <div class="flexible-tabs">
        <tabs onchange="changeTabactive" index="{{currentIndex}}">
          <tab-content class="flexible-tab-content">
            <div class="tab-content-section">
              <home></home>
            </div>
            <div class="tab-content-section">
              <classify></classify>
            </div>
          </tab-content>
        </tabs>
        <div class="flexible-tabbar">
          <div for="{{(index, item) in tabItems}}" class="tab-item" onclick="clickTabBar(index)">
            <image class="tab-icon" src="{{item.icon[currentIndex === index ? 1 : 0]}}"></image>
            <text class="{{currentIndex === index ? 'active' : 'tab-text'}}">{{item.text}}</text>
          </div>
        </div>
      </div>
    </div>
  </template>

  <import name="home" src="../Home/index"></import>
  <import name="classify" src="../Classify/index"></import>

    <script>
    import router from '@system.router'

    export default {
      data() {
        return {
          currentIndex: 0,
          tabItems: [
            {
              text: '首頁',
              icon: ['../Common/Image/icon_home.png', '../Common/Image/icon_home_select.png']
            },
            {
              text: '體系',
              icon: ['../Common/Image/icon_classify.png', '../Common/Image/icon_classify_select.png']
            }
          ]
        }
      },
      changeTabactive (evt) {
        this.changeCurrent(evt.index)
      },
      clickTabBar (index) {
        this.changeCurrent(index)
      },
      changeCurrent(index) {
        this.$page.setTitleBar({ text: this.tabItems[index].text })
        this.currentIndex = index
      }
    }
  </script>

複製程式碼

使用了tabs元件，本來是tab和tab-content配合使用的，發現用tab，點選一直會出現卡頓的現象，就改為tab用div實現。這個頁面比較簡單，就是一個底部tabs按鈕和一個content顯示內容，分別為home元件和classify元件。

4.home元件

home元件顯示首頁內容，包括頂部的banner和底部的文章列表。整個頁面用list包裹，使其可以上下滑動，比較喜歡的一點是可以很方便設定header和footer。 list的item從上往下分別為banner、標題、文章列表、footer(載入更多提示)

banner使用官方的容器元件swiper來輪播展示，程式碼如下

<list-item type="banner">
    <swiper class="banner" autoplay="true" interval="4000">
        <stack class="banner" for="{{bannerlist}}">
            <image class="banner-image" src="{{$item.imagePath}}" onclick="openArticle($item.url, '', $item.title)"></image>
            <text class="banner-title">{{$item.title}}</text>
        </stack>
    </swiper>
</list-item>

複製程式碼

文章使用for遍歷顯示


        <!-- 文章 -->
        <block for="articleList">
          <list-item type="article" class="article-item" onclick="openArticle($item.link, $item.projectLink, $item.title)">
            <div>
              <text class="tag" show="{{$item.fresh}}">新</text>
              <text class="text-title">{{$item.title}}</text>
            </div>
            <div class="article-tip">
                <text class="tip">分類: {{$item.superChapterName}}/{{$item.chapterName}}</text>
            </div>
            <div class="article-tip">
              <text class="tip">作者: {{$item.author}}</text>
              <text class="time">{{$item.niceDate}}</text>
            </div>
          </list-item>
        </block>

複製程式碼

底部載入更多

 <!-- 載入更多，type屬性自定義命名為loadMore -->
        <list-item type="loadMore" class="load-more">
          <progress type="circular" show="{{hasMoreData}}"></progress>
          <text show="{{hasMoreData}}">載入更多</text>
          <text show="{{!hasMoreData}}">沒有更多了~</text>
        </list-item>

複製程式碼

關於list的用法，直接檢視官方文件即可，很詳細list教程

swiper的用法，直接使用，裡面使用for迴圈顯示圖片等，設定autoplay為true，即可實現自動播放，這裡貌似有一個坑，需要設定swiper的高度，否則高度似乎是0，不會隨著裡面的圖片大小變化的，也可能是我寫程式碼姿勢不對。。。說到這裡，要說一下text元件，在有些地方要給它設定一個合適的高度，不然會上下被裁剪。。。

5.classify元件

這個元件顯示的是類別和對應的文章列表，其實就是三個list，具體看程式碼，挺簡單的。

6.webview頁面

還有一個頁面就是顯示webview，因為wanandroid沒有介面返回文章內容，只有文章連結，所以需要用webview開啟，直接使用官方提供的web元件，使用非常簡單

<web src="{{ url }}" id="web"></web>

複製程式碼

記得在manifest.json中宣告介面{ "name": "system.webview" }，否則會提示缺乏許可權。

7.關於網路請求

在manifest.json中宣告介面{"name": "system.fetch"} 程式碼中使用，這裡給出獲取banner的程式碼，其他可在專案中檢視

<script>
  import fetch from '@system.fetch'
  ...
  getBanner() {
      fetch.fetch({
        url:"http://www.wanandroid.com/banner/json",
        success:function(data){
          this.bannerlist = JSON.parse(data.data).data;
        }.bind(this),
        fail: function(data, code) {
          console.log("handling fail, code=" + code);
        }
      })
    }
   ...

複製程式碼

今天就自己摸索著寫了這麼多程式碼。專案地址：github.com/CB-ysx/wana…

五、總結

開發這個應用，感覺還是挺方便的，挺快的（無論是啟動還是開發），但是目前文件還不夠完善，網上教程也幾乎沒有，自己摸索還是挺累的，很多元件都還不怎麼會用，比如refresh都還不知道如何關閉重新整理狀態。總而言之，對於學前端的人（雖然我是android開發仔）來說，學習成本不會很高，有空就學學新東西，反正學的是自己的，技多不壓身。

作者：Codebearsh 連結：https://www.jianshu.com/p/aca382e40b17 來源：簡書著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。