全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp
开发本产品时快应用推出时间不久,网络上关于快应用的资料少之又少,本人也因公司需求进行开发,一路上摸索过来,并集成统计,完全遵循正式项目,今想把自己的一些经验分享出来,让大家少走弯路,如有错误和意见欢迎大家提出,共同进步。
以下所有 API 均由产品公司自身提供,本人皆从网络获取。获取与共享之行为或有侵犯产品权益的嫌疑。若被告知需停止共享与使用,本人会及时删除此页面与整个项目。请您了解相关情况,并遵守产品协议。
为了方便大家学习和测试,且保证原公司利益,本项目采用easy-mock模拟后台数据。
线上开源地址:https://github.com/lishuaixingNewBee/babySongQuickapp
项目介绍
熊宝儿歌故事基于快应用技术开发,分音乐、视频、育儿信息流三大模块,音乐模块相对复杂,包含一套完整的音乐播放器逻辑,且快应用经验较少,所以实现起来难度加大,其他模块均为信息流方式呈现,包含常用的上拉刷新,下拉加载逻辑。
目录结构
├── 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签名
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 []: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签名签发正式上线的应用,一定要保存好你的签名文件。
开发中常见的问题
一些基本问题,组件传参啥的我就不仔细讲了,大家去看文档就好了。
关于样式组件问题
快应用默认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}}">解决。
关于框架API
父子组件prop传参数,如果属性名称使用驼峰定义,如:prop2Object,那么在外部传递数据时请使用-连接,如:prop2-object。
slider 组件只有滑动结束后end才有回调,进行中没有回调,改变value值也会触发change事件,无法判断change是人为滑动触发,还是改变数据触发的。
没有提供获取音频播放状态的接口。
组件没有onDestroy钩子,用if不会被触发。
无selectionchange选中文本改变和光标移动时触发(1030会加上)。
有没有类似touchstart和touchend的事件(1030会加上)。
this.$forceUpdate()相当于vue的this.$forceUpdate(),实例重新渲染(快应用解决一些页面渲染问题的未知bug)。
重新封装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
往期技术分享
网页与快应用之间构造可靠通信通道
一个前端攻城狮的快应用开发之路
快应用的用法和常见问题解答
快应用开发漫谈-部署与调试
快应用开发新手入门指南
快应用list组件的那些事儿
快应用底部导航栏的原生实现
全网最细致的快应用问题解决之道
快速入门快应用——quickapp构建与发布
快应用开发过程中遇到的问题及解决方法
写在最后
在去年的开发者大赛征文中,我们通过多个社区联合活动收集了很多优质文章,有入坑指南、开源项目、开发模板、常见问题总结等多个方面,这些内容为很多开发者提供了参考,感谢大家的支持和参与,今年的我们的征文活动还在继续,感兴趣的开发者可以点阅读原文查看详情哦!
快应用生态平台
赋能开发者
拓展场景未来
快来关注我们吧
全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp相关推荐
- vc6.0 debug 比 release 快??_全网稀缺的快应用开源项目熊宝儿歌故事QuickApp
开发本产品时快应用推出时间不久,网络上关于快应用的资料少之又少,本人也因公司需求进行开发,一路上摸索过来,并集成统计,完全遵循正式项目,今想把自己的一些经验分享出来,让大家少走弯路,如有错误和意见欢迎 ...
- GitHub 5W 星:一行命令下载全网视频的两个开源项目
大家好,我是你们的 猫哥,那个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 前言 相信大多数人都有想下载某个网站上的视频的想法. 比如 B站.优酷.YouTube.腾讯视频等网站上的优质视频. 但是大多数视 ...
- 2.4K Star!450 个重磅前端开源项目合集推荐
大家好,我是你们的 猫哥,还是那个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 不知不觉,公众号:前端GitHub 和 GitHub 上的仓库 FrontEndGitHub 都已经更新并运营超过半年了呀, 前 ...
- 推荐 7 个 Vue2、Vue3 源码解密分析的开源项目
大家好,我是你们的 猫哥,那个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 1. 为什么要学习源码 ? 阅读优秀的代码的目的是让我们能够写出优秀的代码. 不给自己设限,不要让你周围人的技术上限成为你的上限.其 ...
- 第八十八期:4000万程序员最爱开源项目和编程语言排名出炉!
今天,全球最大开发者社区GitHub重磅发布2019年度报告,透露了一个数据:GitHub目前在全球已有超过4000万开发者用户,其中80%来自美国之外的地区. 作者:小芹.亮亮 全球最大开发者社区G ...
- 直接拿来用!GitHub 上那些值得你 Star 的开源项目!
"开源"作为 2018 年度热词之一,在这一年里围绕其发生了颇多"大事",开源贡献者也语法活跃.本文分领域盘点了过去一年的开源项目 Top 榜,看看有没有你也在 ...
- 重磅!GitHub年度报告:4000万程序员最爱开源项目和编程语言排名出炉!
点击上方的终端研发部,右上角选择"设为星标" 每日早9点半,技术文章准时送上 公众号后台回复"学习",获取作者独家秘制精品资料 往期文章 来源:github ...
- 盘点 9 月份 yyds 的开源项目
本文盘点 8 月份 GitHub 上 Star 数攀升最快的开源项目,他们分别是: 1. GitHub 排名第一的开源项目 2. 代码安全指南 3. 原神自动钓鱼 AI 4. 图解 React 源码 ...
- .NET平台开源项目速览(14)最快的对象映射组件Tiny Mapper
好久没有写文章,工作甚忙,但每日还是关注.NET领域的开源项目.五一休息,放松了一下之后,今天就给大家介绍一个轻量级的对象映射工具Tiny Mapper:号称是.NET平台最快的对象映射组件.那就一起 ...
最新文章
- Spark Worker启动源码
- 软考上午题难点5分钟攻克系列(十)
- Tomcat6下使用jBPM-4出现 java.lang.LinkageError。javax/el/ExpressionFactory解决办法
- 分类模型的性能评估——以SAS Logistic回归为例(3): Lift和Gain
- Python第五、六种数据类型——Set(集合) and Dictionary(字典)
- Trial accounts of SAP Cloud Platform do not provide an Identity Authentication tenant
- opencv----(1) mat最好用,和IplImage,cvmat 比较
- 【BZOJ】2395: [Balkan 2011]Timeismoney
- “dedeCMS 提示信息!”跳转页,如何修改文字?
- xtrabackup部分备份数据库 Partial Backups
- 【SQL】找出行数与自增标识值不相等的表(即有缺行)
- linux离线安装mysql8
- python工资高还是java-Python和Java哪个工资高
- CreateProcess()无法启动应用?
- Fuji-ImageJ分割中央凹无血管区
- java类加载器不同导致SPI 报错 not a subtype
- 病理与病理生理学【3】
- 只知道努力工作的人,失去了赚钱的机会,过去是适者生存,现在是强者生存,沉思你将来会怎样?
- Docker修改镜像源为阿里云
- 治愈系英语笔记-2-一般、否定疑问句,现表将来