快應用釋出快兩週啦。這兩天有空，就搗鼓了一個快應用。整體感覺來說，互動很流暢，基本功能和元件都有。上手也很快。希望官網推廣能做好。好了，話不多說，先上 gitHub (傳送門)
gankQuick-快應用（妹子篇）
p 個 s: 環境搭建之類的 跟官網上面寫的基本一樣。照著做就行了。
- 注意：部分機子可能會出現手機上可以正常訪問，瀏覽器上出現白屏，不要懷疑你的配置是不是有問題。有問題是那個機子可能設配不了
我們還是來搞個專案吧。
一、建個專案，並且跑起來
到你喜歡的目錄下執行
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根據這個配置檔案，自動下載所需的執行和開發環境
複製程式碼在專案根目錄下，執行如下命令安裝模組到 node_modules 目錄
npm install
複製程式碼執行命令（如果你按照官網，已經執行過這句了。那這裡就跳過）
hap update --force
複製程式碼執行命令
npm run server
複製程式碼再開一個 DOS 視窗，執行命令
npm run watch
複製程式碼手機上開啟，開啟 快應用偵錯程式,掃碼安裝。安裝成功是這樣的 ↓
回到快應用偵錯程式，點選 開始除錯 按鈕,手機和瀏覽器都會開始執行專案
二、專案配置
官網寫得很詳細，這裡就不做贅述了。
這裡貼出我的配置。也可以跟著我的來寫。
1、修改 manifest.json 的 配置（預設的不夠用，另外，還有包名，應用名，版本號等等需要修改或新增）
{
"package": "com.htSelf.gankQuick",
"name": "gankQuick",
"versionName": "1.0.0",
"versionCode": "1",
"minPlatformVersion": "101",
"icon": "/Common/meizi.png",
// features >>> 介面列表，這裡是這個專案需要用到的快應用內建的介面。
// 一定要先在features裡宣告，才可以使用
"features": [
{ "name": "system.prompt" },
{ "name": "system.router" },
{ "name": "system.fetch" },
{ "name": "system.shortcut" },
{ "name": "system.prompt" },
{ "name": "system.webview" }
],
"permissions": [{ "origin": "*" }],
// config >>> 系統配置資訊
"config": {
"logLevel": "debug"
},
// router >>> 路由資訊
"router": {
"entry": "Home",
"pages": {
"Home": {
"component": "index"
}
}
},
// display >>> UI顯示相關配置
"display": {
"titleBarBackgroundColor": "#f2f2f2",
"titleBarTextColor": "#333333",
"menu": true,
"pages": {
"Home": {
"titleBarText": "首頁",
"menu": false
}
}
}
}
複製程式碼上面的配置中：配置了 router 路由。很簡單，就只有一個路由 Home。
2、整理專案程式碼
- 刪除 Demo 資料夾
- 建立 Home 資料夾
- 在 Home 資料夾下，建立 index.ux 檔案
- 開始編碼
<template>
<div id="Meizi">
<list class="list" @scrollbottom="loadMore">
<block for="{{meiziInfo.list}}">
<list-item type="imgItem" class="img-item">
<image @click="shouModel($item.url)" class="img" src="{{$item.url}}" />
</list-item>
</block>
<list-item type="loadMore" class="load-more">
<progress type="circular"></progress>
<text>{{meiziInfo.hasMore?'載入更多':'已經沒有更多妹子啦~'}}</text>
</list-item>
</list>
</div>
</template>
<style lang="less" scoped>
#Meizi {
font-size: 16px;
padding: 20px 0;
.list {
columns: 2;
}
.img-item {
margin: 0 10px 20px;
height: 400px;
}
.img {
width: 100%;
height: 100%;
}
.load-more {
display: flex;
justify-content: center;
padding-top: 20px;
}
.mask {
position: fixed;
height: 100%;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
.big-img {
width: 100%;
}
}
}
</style>
<script>
export default {
data: {
pageSize: 10,
page: 1,
// 妹子列表
meiziInfo: {
list: [],
hasMore: true
}
},
getMeiziList() {
this.$app.$def.fetch.fetch({
url: `http://gank.io/api/data/福利/${this.pageSize}/${this.page}`,
success: data => {
const results = JSON.parse(data.data).results
if (results.length <= 0) {
this.meiziInfo.hasMore = false
} else {
this.meiziInfo.list.push(...results)
}
},
fail: (error, code) => {
console.log('handling fail, error=' + error)
console.log('handling fail, code=' + code)
}
})
},
loadMore() {
this.page++
this.getMeiziList()
},
onInit() {
this.$page.setTitleBar({ text: '妹子妹子~~' })
this.getMeiziList()
},
}
</script>
複製程式碼效果圖：
頁面用了 list 、list-item 和 block 元件。做一個列表迴圈。並且獲取資料與展示。
這裡非常感謝 gank.io 提供的 api
在生命週期來到，onInit 的時候，做了兩件事：
- 1、修改 title 為"妹子妹子~~"
- 2、獲取妹子的列表資料
在 list 上監聽 scrollbottom 事件，觸發事件的時候，獲取更多的妹子 ?，也就是 滾動載入更多資料
OK 就先寫到這裡吧。後續在接上吧
專案 github 地址(完整程式碼在此)
各位看官有問題可以提issues,點個start就更好啦œ
下期精彩預告：(其實程式碼寫好了，github 上可以看到。只是還沒寫文章.?)
- tabs
- webView
相關文章：快應用之手摸手，跟我走（2）