1. 程式人生 > >全網稀缺的快應用開源專案-熊寶兒歌故事QuickApp

全網稀缺的快應用開源專案-熊寶兒歌故事QuickApp

熊寶兒歌故事QuickApp

熊寶兒歌故事基於快應用技術開發,且小程式版已經上線歡迎大家體驗,由於快應用推出時間不久,網路上關於快應用的資料少之又少,本人也因公司需求進行開發,一路上踩坑無數,並整合友盟統計,完全遵循正式專案,今想把自己的一些經驗分享出來,讓大家少走彎路,如有錯誤和意見歡迎大家提出,共同進步。

banner.png

首頁

音樂/視訊

資訊流

以下所有 API 均由產品公司自身提供,本人皆從網路獲取。獲取與共享之行為或有侵犯產品權益的嫌疑。若被告知需停止共享與使用,本人會及時刪除此頁面與整個專案。請您暸解相關情況,並遵守產品協議。

為了方便大家學習和測試,且保證原公司利益,本專案採用easy-mock模擬後臺資料。

專案介紹

熊寶兒歌故事基於快應用技術開發,分音樂、視訊、育兒資訊流三大模組,音樂模組相對複雜,包含套完整的音樂播放器邏輯,且快應用坑較多,所以實現起來難度加大,其他模組均為資訊流方式呈現,包含常用的上拉重新整理,下拉載入邏輯。

目錄結構


├── sign                      rpk包簽名模組
│   └── debug                 除錯環境
│       ├── certificate.pem   證書檔案
│       └── private.pem       私鑰檔案
├── src
│   ├── api                   請求介面
│   ├── common                公用的資源和元件檔案
│   ├── components            元件檔案
│   ├── pages                  頁面目錄
│   |   └── index.ux          頁面檔案,可自定義頁面名稱
│   ├── app.ux              APP檔案,可引入公共指令碼,暴露公共資料和方法等
│   └── manifest.json         專案配置檔案,配置應用圖示、頁面路由等
└── package.json              定義專案需要的各種模組及配置資訊
複製程式碼

專案安裝

    git clone [email protected]:lishuaixingNewBee/babySongQuickapp.git
    npm install
    開啟兩個終端視窗分別執行:
    npm run watch
    npm run server
    如果開發者在後續操作中遇到報錯Cannot find module '.../node_modules/hap-tools/webpack.config.js',請執行一次
    hap update —force
複製程式碼

編譯打包

特別注意:如果是需要釋出到應用市場是安卓應用一樣需要簽名檔案
npm run build
編譯後的工程目錄在/build
生成的應用路徑為/dist/.rpk
複製程式碼

增加release簽名

1、建立私鑰:
通過openssl命令等工具生成簽名檔案private.pem、certificate.pem,如:
openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem
(金鑰長度,1024覺得不夠安全的話可以用2048,但是代價也相應增大)
在工程的sign目錄下建立release目錄,將私鑰檔案private.pem和證書檔案certificate.pem拷貝進去

Country Name (2 letter code) [XX]:CN   #國家程式碼(中國)
State or Province Name (full name) []:BeiJing   #省(北京)
Locality Name (eg, city) [Default City]:BeiJing   #市(北京)
Organization Name (eg, company) [Default Company Ltd]:tact  #公司名稱
Organizational Unit Name (eg, section) []:   #可不填
Common Name (eg, your name or your server's hostname) []: #可不填
Email Address []:[email protected]  #郵箱
 
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:   #可不填
An optional company name []:   #可不填
在工程的sign目錄下建立release目錄,將私鑰檔案private.pem和證書檔案crtificate.pem拷貝進去
複製程式碼

釋出程式包

釋出程式包前需要增加release簽名,然後在工程的根目錄下執行
npm run release
生成的應用路徑為/dist/.signed.rpk
如果需要臨時使用debug簽名,可以使用
npm run release -- --debug
注意: debug簽名由於是公開的,安全性無法保證,一定不要使用debug簽名簽發正式上線的應用,一定要儲存好你的簽名檔案。
複製程式碼

開發中常見問題

如一些基本問題,元件傳參啥的我就不仔細講了,大家去看文件就好了。我主要說一些坑吧。

  1. 關於樣式元件問題
    - 快應用預設flex佈局,所以咱們之前float,position啥的都不好使。
    - background-image 不支援網路路徑
    - 不支援 box-shadow屬性(很多樣式都不支援),想實現的話用背景圖去實現
    - 不支援 webfont,據說後期會加上。
    - svg的圖片在華為應用平臺有相容問題。
    - 華為應用平臺對動畫有相容性問題,下一版才會解決
    - tabs內不能再巢狀tabs,如有此類需求,請參考教程第一部分div元件模擬選項卡
    - 要實現z-index的圖層效果請使用stack
    - swiper不支援 滑動方向改變
    - list-item元件dom結構不一致時,一定要給type="***"不同命名來區別,否則也會閃退,且元件的if改為show否則,會改變dom結構。
    暫時採用<list-item type="{{index}}">解決
    複製程式碼
  2. 關於框架API
 - 父子元件prop傳引數,如果屬性名稱使用駝峰定義,如:prop2Object,那麼在外部傳遞資料時請使用-連線,如:prop2-object
 - slider 元件只有滑動結束後end才有回撥,進行中沒有回撥,改變value值也會觸發change事件,無法判斷change是人為滑動觸發,還是改變資料觸發的
 - 沒有提供獲取音訊播放狀態的介面。
 - 元件沒有onDestroy鉤子,用if不會被觸發。
 - 無selectionchange 選中文字改變和游標移動時觸發(據說1030會加上)。
 - 有沒有類似 touchstart  和 touchend的事件(確定1030會加上)。
 - this.$forceUpdate()相當於vue的this.$nextTick()
複製程式碼
  1. 重新封裝fetch介面
import nativeFetch from '@system.fetch';
import prompt from '@system.prompt';
const BASE_URL = `https://xxxxxx`;
class http {
  static async request(method, Aurl, data) {
    let url = Aurl;
    const strRegex = '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]';
    var reg = new RegExp(strRegex);
    if (!reg.test(url)) {
      url = BASE_URL + url;
    }
    console.warn(`請求地址:${url}`);
    const res = await this.fetch(method, url, data)
    if (this.isSuccess(res)) {
      return JSON.parse(res.data);
    } else {
      console.warn('請求錯誤');
      throw this.requestException(res);
    }
  }
  static fetch(method, url, data) {
    return new Promise((resolve, reject) => {
      nativeFetch.fetch({
        method,
        url,
        data,
        success: resolve,
        fail: reject
      })
    })
  }
  static isSuccess(res) {
    const quickappCode = res.code;
    // 快應用請求錯誤
    if (quickappCode !== 200) {
      return false;
    }
    const quickappData = JSON.parse(res.data)
    return !(quickappData && quickappData.status !== 0);
  }
  /*異常*/
  static requestException(res) {
    const error = {};
    error.statusCode = res.code;
    const quickappData = res.data;
    if (quickappData) {
      const serverData = JSON.parse(res.data)
      if (serverData) {
        error.serverCode = serverData.status;
        error.message = serverData.msg;
        error.serverData = serverData.data;
      }
    }
    return error;
  }
  static get(url, data) {
    return this.request('GET', url, data);
  }

  static put(url, data) {
    return this.request('PUT', url, data);
  }

  static post(url, data) {
    return this.request('POST', url, data);
  }

  static patch(url, data) {
    return this.request('PATCH', url, data);
  }

  static delete(url, data) {
    return this.request('DELETE', url, data);
  }
}
// 全域性註冊
// export default base
const injectRef = Object.getPrototypeOf(global) || global
injectRef.$http = http
複製程式碼

○ 更新記錄

2018.11.23

    -  求小夥伴一起維護專案
複製程式碼

<<<<<<< HEAD