【征文】全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp

李帅醒

熊宝儿歌故事QuickApp

熊宝儿歌故事基于快应用技术开发，且小程序版已经上线欢迎大家体验，由于快应用推出时间不久，网络上关于快应用的资料少之又少，本人也因公司需求进行开发，一路上踩坑无数，并集成友盟统计，完全遵循正式项目，今想把自己的一些经验分享出来，让大家少走弯路，如有错误和意见欢迎大家提出，共同进步。

• 线上开源地址 https://github.com/lishuaixingNewBee/babySongQuickapp 点个赞吧！
• 快应用开发文档

以下所有 API 均由产品公司自身提供，本人皆从网络获取。获取与共享之行为或有侵犯产品权益的嫌疑。若被告知需停止共享与使用，本人会及时删除此页面与整个项目。请您暸解相关情况，并遵守产品协议。

为了方便大家学习和测试，且保证原公司利益，本项目采用easy-mock模拟后台数据。

项目介绍

熊宝儿歌故事基于快应用技术开发，分音乐、视频、育儿信息流三大模块，音乐模块相对复杂，包含套完整的音乐播放器逻辑，且快应用坑较多，所以实现起来难度加大，其他模块均为信息流方式呈现，包含常用的上拉刷新，下拉加载逻辑。

目录结构

1. ├── sign rpk包签名模块
2. │ └── debug 调试环境
3. │ ├── certificate.pem 证书文件
4. │ └── private.pem 私钥文件
5. ├── src
6. │ ├── api 请求接口
7. │ ├── common 公用的资源和组件文件
8. │ ├── components 组件文件
9. │ ├── pages 页面目录
10. │ | └── index.ux 页面文件，可自定义页面名称
11. │ ├── app.ux APP文件，可引入公共脚本，暴露公共数据和方法等
12. │ └── manifest.json 项目配置文件，配置应用图标、页面路由等
13. └── package.json 定义项目需要的各种模块及配置信息

复制代码

项目安装

1. git clone [email]git@github.com[/email]:lishuaixingNewBee/babySongQuickapp.git
2. npm install
3. 打开两个终端窗口分别执行：
4. npm run watch
5. npm run server
6. 如果开发者在后续操作中遇到报错Cannot find module '.../node_modules/hap-tools/webpack.config.js'，请运行一次
7. hap update —force

复制代码

编译打包

1. 特别注意：如果是需要发布到应用市场是安卓应用一样需要签名文件
2. npm run build
3. 编译后的工程目录在/build
4. 生成的应用路径为/dist/.rpk

复制代码

增加release签名

1. 1、创建私钥：
2. 通过openssl命令等工具生成签名文件private.pem、certificate.pem，如：
3. openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem
4. (密钥长度，1024觉得不够安全的话可以用2048，但是代价也相应增大)
5. 在工程的sign目录下创建release目录，将私钥文件private.pem和证书文件certificate.pem拷贝进去
7. Country Name (2 letter code) [XX]:CN #国家代码（中国）
8. State or Province Name (full name) []:BeiJing #省（北京）
9. Locality Name (eg, city) [Default City]:BeiJing #市（北京）
10. Organization Name (eg, company) [Default Company Ltd]:tact #公司名称
11. Organizational Unit Name (eg, section) []: #可不填
12. Common Name (eg, your name or your server's hostname) []: #可不填
13. Email Address []:Val.china@foxmail.com #邮箱
15. Please enter the following 'extra' attributes
16. to be sent with your certificate request
17. A challenge password []: #可不填
18. An optional company name []: #可不填
19. 在工程的sign目录下创建release目录，将私钥文件private.pem和证书文件crtificate.pem拷贝进去

复制代码

发布程序包

1. 发布程序包前需要增加release签名，然后在工程的根目录下运行
2. npm run release
3. 生成的应用路径为/dist/.signed.rpk
4. 如果需要临时使用debug签名，可以使用
5. npm run release -- --debug
6. 注意: debug签名由于是公开的，安全性无法保证，一定不要使用debug签名签发正式上线的应用,一定要保存好你的签名文件。

复制代码

开发中常见问题 如一些基本问题，组件传参啥的我就不仔细讲了，大家去看文档就好了。我主要说一些坑吧。

• 关于样式组件问题
  1. - 快应用默认flex布局，所以咱们之前float,position啥的都不好使。
  2. - background-image 不支持网络路径
  3. - 不支持 box-shadow属性(很多样式都不支持)，想实现的话用背景图去实现
  4. - 不支持 webfont,据说后期会加上。
  5. - svg的图片在华为应用平台有兼容问题。
  6. - 华为应用平台对动画有兼容性问题，下一版才会解决
  7. - tabs内不能再嵌套tabs，如有此类需求，请参考教程第一部分div组件模拟选项卡
  8. - 要实现z-index的图层效果请使用stack
  9. - swiper不支持 滑动方向改变
  10. - list-item组件dom结构不一致时,一定要给type="***"不同命名来区别，否则也会闪退，且组件的if改为show否则，会改变dom结构。
  11. 暂时采用<list-item type="{{index}}">解决

  复制代码
• 关于框架API
  1. <blockquote> - 父子组件prop传参数，如果属性名称使用驼峰定义，如：prop2Object，那么在外部传递数据时请使用-连接，如：prop2-object

  复制代码
• 重新封装fetch接口
  1. import nativeFetch from '@system.fetch';
  2. import prompt from '@system.prompt';
  3. const BASE_URL = `https://xxxxxx`;
  4. class http {
  5. static async request(method, Aurl, data) {
  6. let url = Aurl;
  7. const strRegex = '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]';
  8. var reg = new RegExp(strRegex);
  9. if (!reg.test(url)) {
  10. url = BASE_URL + url;
  11. }
  12. console.warn(`请求地址:${url}`);
  13. const res = await this.fetch(method, url, data)
  14. if (this.isSuccess(res)) {
  15. return JSON.parse(res.data);
  16. } else {
  17. console.warn('请求错误');
  18. throw this.requestException(res);
  19. }
  20. }
  21. static fetch(method, url, data) {
  22. return new Promise((resolve, reject) => {
  23. nativeFetch.fetch({
  24. method,
  25. url,
  26. data,
  27. success: resolve,
  28. fail: reject
  29. })
  30. })
  31. }
  32. static isSuccess(res) {
  33. const quickappCode = res.code;
  34. // 快应用请求错误
  35. if (quickappCode !== 200) {
  36. return false;
  37. }
  38. const quickappData = JSON.parse(res.data)
  39. return !(quickappData && quickappData.status !== 0);
  40. }
  41. /*异常*/
  42. static requestException(res) {
  43. const error = {};
  44. error.statusCode = res.code;
  45. const quickappData = res.data;
  46. if (quickappData) {
  47. const serverData = JSON.parse(res.data)
  48. if (serverData) {
  49. error.serverCode = serverData.status;
  50. error.message = serverData.msg;
  51. error.serverData = serverData.data;
  52. }
  53. }
  54. return error;
  55. }
  56. static get(url, data) {
  57. return this.request('GET', url, data);
  58. }
  60. static put(url, data) {
  61. return this.request('PUT', url, data);
  62. }
  64. static post(url, data) {
  65. return this.request('POST', url, data);
  66. }
  68. static patch(url, data) {
  69. return this.request('PATCH', url, data);
  70. }
  72. static delete(url, data) {
  73. return this.request('DELETE', url, data);
  74. }
  75. }
  76. // 全局注册
  77. // export default base
  78. const injectRef = Object.getPrototypeOf(global) || global
  79. injectRef.$http = http

  复制代码

○ 更新记录2018.11.23 - 求小伙伴一起维护项目

大橙子

可以参考参考

大橙子

感谢分享！！！

左耳毛毛

感谢分享，666 。 精致项目作品。 git已收藏。

轻粒子统计

做得很用心， 不管是从版面设计还是干货内容，忍不住手动点赞，并同时欢迎也接一下我们轻粒子快应用统计平台，轻粒子快应用统计平台是专门为快应用数据统计分析开发的一款产品，更专注于快应用这个领域，有许多特色的统计维度是我们所独有的，如“图标分析、厂商分析、入口分析”等，后面还有更多特色功能将推出，敬请期待…… 轻粒子快应用统计平台官网链接：http://www.qinglizi.cn/

左耳毛毛

轻粒子统计 发表于 2018-11-26 11:56 做得很用心， 不管是从版面设计还是干货内容，忍不住手动点赞，并同时欢迎也接 ...

你们的界面排版也很好啊，支持支持，赞赞赞，我们的项目完成后就准备接你们的