wanandroid-快應(yīng)用(quickapp)
wanandroid快應(yīng)用截圖
先吐槽下
1.因?yàn)榭鞈?yīng)用剛出來(lái)，網(wǎng)上沒(méi)有教程(至少我今天在寫(xiě)這個(gè)應(yīng)用的時(shí)候枪狂，網(wǎng)上除了demo還是demo坛吁，而且demo是官網(wǎng)的demo)
2.官網(wǎng)雖然有文檔寇损，但是文檔還不完善，很多地方都不知道怎么解決驹暑，寫(xiě)這個(gè)應(yīng)用真的是靠自己慢慢摸索寫(xiě)出來(lái)的玫恳，本來(lái)還有幾個(gè)功能，因?yàn)閷?shí)在找不出解決方法放棄了（待慢慢研究）优俘。京办。。
注：前幾步跟官方文檔教程基本一致帆焕，可跳過(guò)惭婿。
一、環(huán)境搭建
1.安裝nodejs
nodejs可以在官網(wǎng)下載
快應(yīng)用文檔說(shuō)是不要使用8.0.*版本叶雹，推薦v6.11.3 LTS
一開(kāi)始以為是8以上不能用财饥，查了下我電腦的是8.2.0，本來(lái)打算退回去的折晦，嘗試之后發(fā)現(xiàn)沒(méi)有報(bào)錯(cuò)可以正常使用钥星。
2.安裝hap-toolkit
npm install -g hap-toolkit
這一步如果卡住了(我就是這樣)，可以ctrl+c終止满着，然后輸入以下命令設(shè)置淘寶鏡像谦炒，之后再安裝
npm config set registry https://registry.npm.taobao.org
安裝完成輸入命令
hap -V
正確輸出版本信息說(shuō)明安裝成功。
二风喇、初始化項(xiàng)目
1.執(zhí)行以下命令初始化項(xiàng)目
hap init <你的項(xiàng)目名稱(chēng)>
命令執(zhí)行后會(huì)在當(dāng)前目錄下生成名為 你的項(xiàng)目名稱(chēng) 的文件夾宁改，作為項(xiàng)目根目錄，目錄結(jié)構(gòu)如下：
├── node_modules
├── sign rpk包簽名模塊
│ └── debug 調(diào)試環(huán)境
│ ├── certificate.pem 證書(shū)文件
│ └── private.pem 私鑰文件
├── src
│ ├── Common 公用的資源文件和組件文件
│ │ └── logo.png manifest.json中配置的icon
│ ├── Demo 頁(yè)面目錄
│ | └── index.ux 頁(yè)面文件魂莫，文件名不必與父文件夾相同
│ ├── app.ux APP文件（用于包括公用資源）
│ └── manifest.json 項(xiàng)目配置文件（如：應(yīng)用描述透且、接口申明、頁(yè)面路由等）
└── package.json 定義項(xiàng)目需要的各種模塊及配置信息，npm install根據(jù)這個(gè)配置文件秽誊，自動(dòng)下載所需的運(yùn)行和開(kāi)發(fā)環(huán)境
2.編譯項(xiàng)目
先安裝依賴(lài)鲸沮，在項(xiàng)目根目錄執(zhí)行以下命令
npm install
待安裝完成，使用以下命令編譯打包生成rpk包
npm run build
編譯打包成功后锅论，項(xiàng)目根目錄下會(huì)生成文件夾：build讼溺、dist
- build：臨時(shí)產(chǎn)出，包含編譯后的頁(yè)面js最易，圖片等
- dist：最終產(chǎn)出怒坯，包含rpk文件。其實(shí)是將build目錄下的資源打包壓縮為一個(gè)文件藻懒，后綴名為rpk剔猿，這個(gè)rpk文件就是項(xiàng)目編譯后的最終產(chǎn)出
使用以下命令可自動(dòng)重新編譯，
npm run watch
注意：（我每次都遇到這個(gè)問(wèn)題）
如果報(bào)錯(cuò)遇到Cannot find module '.../webpack.config.js'嬉荆，請(qǐng)重新執(zhí)行一次hap update --force归敬。這是由于高版本的npm在npm install時(shí)，會(huì)校驗(yàn)并刪除了node_modules下部分文件夾鄙早，導(dǎo)致報(bào)錯(cuò)汪茧。而hap update --force會(huì)重新復(fù)制hap-tools文件夾到node_modules中
三、調(diào)試
1.安裝調(diào)試器
調(diào)試器是一個(gè)android應(yīng)用限番，直接下載安裝
安裝完打開(kāi)如圖所示舱污，此時(shí)按鈕都不能點(diǎn)擊，還需要再安裝平臺(tái)預(yù)覽版
兩個(gè)應(yīng)用安裝完就可以安裝快應(yīng)用了
2.安裝運(yùn)行rpk包
有兩種方式：
- HTTP請(qǐng)求：開(kāi)發(fā)者啟動(dòng)HTTP服務(wù)器弥虐，打開(kāi)調(diào)試器扩灯，點(diǎn)擊掃碼安裝配置HTTP服務(wù)器地址，下載rpk包霜瘪，并喚起平臺(tái)運(yùn)行rpk包
- 本地安裝：開(kāi)發(fā)者將rpk包拷貝到手機(jī)文件系統(tǒng)驴剔，打開(kāi)調(diào)試器，點(diǎn)擊本地安裝選擇rpk包粥庄，并喚起平臺(tái)運(yùn)行rpk包
推薦第一種方式，調(diào)試比較方便豺妓。
http請(qǐng)求方式：
執(zhí)行命令：
// 默認(rèn)端口12306
npm run server
// 自定義端口,比如8080
npm run server -- --port 8080
執(zhí)行成功會(huì)顯示二維碼惜互，可用調(diào)試器掃描二維碼安裝，或點(diǎn)擊調(diào)試器右上角設(shè)置http服務(wù)器地址再點(diǎn)擊在線(xiàn)更新琳拭。
此時(shí)配合命令
npm run watch
即可邊開(kāi)發(fā)邊預(yù)覽效果
關(guān)于日志查看训堆，官方文檔介紹是使用Android Studio的Android Monitor輸出來(lái)查看日志。這里提供另一種方法白嘁，執(zhí)行以下命令
adb logcat -s JsConsole
// JsConsole是過(guò)濾信息坑鱼，因?yàn)樵赼s看到快應(yīng)用日志輸出都有JsConsole這個(gè)標(biāo)記，所以直接使用這個(gè)查看快應(yīng)用日志，就不會(huì)被手機(jī)其他日志干擾
這樣就可以愉快地開(kāi)發(fā)應(yīng)用了鲁沥，因?yàn)檫@些命令都是不能中斷（以為中斷就看不了信息了或調(diào)試不了了）呼股，所以需要打開(kāi)多個(gè)終端，這里推薦用vscode+hap extension插件開(kāi)發(fā)画恰，直接可邊開(kāi)發(fā)邊查看彭谁，不用切換屏幕等等，如圖：
四允扇、開(kāi)始開(kāi)發(fā)
一開(kāi)始看demo代碼缠局，以為是跟vue差不多，開(kāi)發(fā)起來(lái)應(yīng)該挺簡(jiǎn)單的考润，開(kāi)發(fā)過(guò)程才慢慢發(fā)現(xiàn)狭园，其他它并不是真正的html+css，很多html糊治、css代碼都不支持唱矛，似乎它只是模擬而已，因?yàn)闀?huì)把它轉(zhuǎn)為原生組件俊戳，暫時(shí)就沒(méi)能全部支持揖赴，所以開(kāi)發(fā)過(guò)程還是挺難受的，動(dòng)不動(dòng)就報(bào)錯(cuò)沒(méi)有這個(gè)屬性沒(méi)有那個(gè)屬性抑胎。
這里通過(guò)wanandroid開(kāi)發(fā)api來(lái)開(kāi)發(fā)wanandroid應(yīng)用
1.修改manifest.json配置信息
{
"package": "cn.codebear.wanandroid", //應(yīng)用包名
"name": "wanandroid", //應(yīng)用名稱(chēng)
"versionName": "1.0.0", //版本名稱(chēng)
"versionCode": "1", //版本號(hào)
"minPlatformVersion": "101", //支持的最小平臺(tái)版本號(hào)
"icon": "/Common/Image/logo.png", //應(yīng)用logo
"features": [ //接口列表
{ "name": "system.prompt" },
{ "name": "system.router" },
{ "name": "system.shortcut" },
{ "name": "system.fetch" },
{ "name": "system.webview" },
{ "name": "system.storage" }
],
"permissions": [
{ "origin": "*" }
],
"config": { //系統(tǒng)配置信息
"logLevel": "debug"
},
"router": { //路由信息
"entry": "Wanandroid",
"pages": {
"Wanandroid": {
"component": "index"
},
"Webview": {
"component": "index"
}
}
},
"display": { //UI顯示相關(guān)配置
"titleBar": true,
"titleBarBackgroundColor": "#24b9ff",
"titleBarTextColor": "#ffffff",
"titleBarText": "首頁(yè)",
"pages": {
}
}
}
具體如何配置燥滑，官方文檔寫(xiě)的挺詳細(xì)，這里就不多說(shuō)了阿逃。
2.刪除代碼
把項(xiàng)目初始化時(shí)給的demo代碼都刪掉铭拧。
3.創(chuàng)建wanandroid頁(yè)面
在src目錄下新建一個(gè)Wanandroid目錄，目錄下新建一個(gè)index.ux文件恃锉，命名不一定要index搀菩。這個(gè)作為應(yīng)用的主頁(yè)面。
代碼如下
<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: '首頁(yè)',
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組件破托，本來(lái)是tab和tab-content配合使用的肪跋，發(fā)現(xiàn)用tab，點(diǎn)擊一直會(huì)出現(xiàn)卡頓的現(xiàn)象土砂，就改為tab用div實(shí)現(xiàn)州既。這個(gè)頁(yè)面比較簡(jiǎn)單，就是一個(gè)底部tabs按鈕和一個(gè)content顯示內(nèi)容萝映，分別為home組件和classify組件吴叶。
4.home組件
home組件顯示首頁(yè)內(nèi)容，包括頂部的banner和底部的文章列表序臂。
整個(gè)頁(yè)面用list包裹蚌卤，使其可以上下滑動(dòng)，比較喜歡的一點(diǎn)是可以很方便設(shè)置header和footer。
list的item從上往下分別為banner逊彭、標(biāo)題咸灿、文章列表、footer(加載更多提示)
banner使用官方的容器組件swiper來(lái)輪播展示诫龙，代碼如下
<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">分類(lèi): {{$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}}">沒(méi)有更多了~</text>
</list-item>
關(guān)于list的用法，直接查看官方文檔即可签赃，很詳細(xì)list教程
swiper的用法谷异，直接使用，里面使用for循環(huán)顯示圖片等锦聊，設(shè)置autoplay為true歹嘹，即可實(shí)現(xiàn)自動(dòng)播放，這里貌似有一個(gè)坑孔庭，需要設(shè)置swiper的高度尺上，否則高度似乎是0，不會(huì)隨著里面的圖片大小變化的圆到，也可能是我寫(xiě)代碼姿勢(shì)不對(duì)怎抛。。芽淡。說(shuō)到這里马绝，要說(shuō)一下text組件，在有些地方要給它設(shè)置一個(gè)合適的高度挣菲，不然會(huì)上下被裁剪富稻。。白胀。
5.classify組件
這個(gè)組件顯示的是類(lèi)別和對(duì)應(yīng)的文章列表椭赋，其實(shí)就是三個(gè)list，具體看代碼或杠，挺簡(jiǎn)單的哪怔。
6.webview頁(yè)面
還有一個(gè)頁(yè)面就是顯示webview，因?yàn)閣anandroid沒(méi)有接口返回文章內(nèi)容向抢，只有文章鏈接认境，所以需要用webview打開(kāi)，直接使用官方提供的web組件笋额，使用非常簡(jiǎn)單
<web src="{{ url }}" id="web"></web>
記得在manifest.json中聲明接口{ "name": "system.webview" }，否則會(huì)提示缺乏權(quán)限篷扩。
7.關(guān)于網(wǎng)絡(luò)請(qǐng)求
在manifest.json中聲明接口{"name": "system.fetch"}
代碼中使用兄猩，這里給出獲取banner的代碼，其他可在項(xiàng)目中查看
<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);
}
})
}
...
今天就自己摸索著寫(xiě)了這么多代碼。
項(xiàng)目地址：https://github.com/CB-ysx/wanandroid-quickapp
五枢冤、總結(jié)
開(kāi)發(fā)這個(gè)應(yīng)用鸠姨，感覺(jué)還是挺方便的，挺快的（無(wú)論是啟動(dòng)還是開(kāi)發(fā)）淹真，但是目前文檔還不夠完善讶迁，網(wǎng)上教程也幾乎沒(méi)有，自己摸索還是挺累的核蘸，很多組件都還不怎么會(huì)用巍糯，比如refresh都還不知道如何關(guān)閉刷新?tīng)顟B(tài)。
總而言之客扎，對(duì)于學(xué)前端的人（雖然我是android開(kāi)發(fā)仔）來(lái)說(shuō)祟峦，學(xué)習(xí)成本不會(huì)很高，有空就學(xué)學(xué)新東西徙鱼，反正學(xué)的是自己的宅楞，技多不壓身。
