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

熊寶兒歌故事QuickApp

熊寶兒歌故事基於快應用技術開發，且小程序版已經上線歡迎你們體驗，因爲快應用推出時間不久，網絡上關於快應用的資料少之又少，本人也因公司需求進行開發，一路上踩坑無數，並集成友盟統計，徹底遵循正式項目，今想把本身的一些經驗分享出來，讓你們少走彎路，若有錯誤和意見歡迎你們提出，共同進步。

• 線上開源地址 https://github.com/lishuaixin... 點個贊吧！
• 快應用開發文檔

如下全部 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 git@github.com: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簽名

一、建立私鑰：
經過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 []:Val.china@foxmail.com  #郵箱
 
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 type="{{index}}">解決
```

1. 關於框架API

   - 父子組件prop傳參數，若是屬性名稱使用駝峯定義，如：prop2Object，那麼在外部傳遞數據時請使用-鏈接，如：prop2-object
    - slider 組件只有滑動結束後end纔有回調，進行中沒有回調，改變value值也會觸發change事件，沒法判斷change是人爲滑動觸發，仍是改變數據觸發的
    - 沒有提供獲取音頻播放狀態的接口。
    - 組件沒有onDestroy鉤子，用if不會被觸發。
    - 無selectionchange 選中文本改變和光標移動時觸發(聽說1030會加上)。
    - 有沒有相似 touchstart  和 touchend的事件(肯定1030會加上)。

3. 從新封裝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

-  求小夥伴一塊兒維護項目