熊寶兒歌故事QuickApp
熊寶兒歌故事基於快應用技術開發,且小程序版已經上線歡迎大家體驗,由於快應用推出時間不久,網絡上關於快應用的資料少之又少,本人也因公司需求進行開發,一路上踩坑無數,並集成友盟統計,完全遵循正式項目,今想把自己的一些經驗分享出來,讓大家少走彎路,如有錯誤和意見歡迎大家提出,共同進步。
以下所有 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簽名簽發正式上線的應用,一定要保存好你的簽名文件。
開發中常見問題
如一些基本問題,組件傳參啥的我就不仔細講了,大家去看文檔就好了。我主要說一些坑吧。
-
關於樣式組件問題
- 快應用默認flex佈局,所以咱們之前float,position啥的都不好使。 - background-image 不支持網絡路徑 - 不支持 box-shadow屬性(很多樣式都不支持),想實現的話用背景圖去實現 - 不支持 webfont,據說後期會加上。 - svg的圖片在華爲應用平臺有兼容問題。 - 華爲應用平臺對動畫有兼容性問題,下一版纔會解決 - tabs內不能再嵌套tabs,如有此類需求,請參考教程第一部分div組件模擬選項卡 - 要實現z-index的圖層效果請使用stack - swiper不支持 滑動方向改變
暫時採用<list-item type="{{index}}">解決
```
-
關於框架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
- 求小夥伴一起維護項目
<<<<<<< HEAD