快應用之手摸手，跟我走（1）

HT發表於2018-03-29

快應用釋出快兩週啦。這兩天有空，就搗鼓了一個快應用。整體感覺來說，互動很流暢，基本功能和元件都有。上手也很快。希望官網推廣能做好。好了，話不多說，先上 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）

回到快應用偵錯程式，點選 開始除錯 按鈕,手機和瀏覽器都會開始執行專案

二、專案配置

官網寫得很詳細，這裡就不做贅述了。

專案配置傳送門

這裡貼出我的配置。也可以跟著我的來寫。

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>
複製程式碼

效果圖：

快應用之手摸手，跟我走（1）
(別問為什麼沒有 安卓的那三個功能鍵，因為，我的隱藏了...)

頁面用了 list 、list-item 和 block 元件。做一個列表迴圈。並且獲取資料與展示。

這裡非常感謝 gank.io 提供的 api

在生命週期來到，onInit 的時候，做了兩件事：

  • 1、修改 title 為"妹子妹子~~"
  • 2、獲取妹子的列表資料

在 list 上監聽 scrollbottom 事件，觸發事件的時候，獲取更多的妹子 ?，也就是 滾動載入更多資料

OK 就先寫到這裡吧。後續在接上吧

專案 github 地址(完整程式碼在此)

各位看官有問題可以提issues,點個start就更好啦œ

下期精彩預告：(其實程式碼寫好了，github 上可以看到。只是還沒寫文章.?)

  • tabs
  • webView

相關文章：快應用之手摸手，跟我走（2）

相關文章