快速入门快应用——quickapp构建与发布
本期作者:狗蛋404实验室
伴随着我司快应用审核通过、上线,此处应该有一篇快应用开发经验分享。我司开发的快应用刚好涉及到音频、视频、Feed流业务,下面分享一下我在开发中遇到的问题。
项目搭建
hap init <project_name> // 生成一个快应用项目脚手架 cd project_name npm install // 安装依赖 npm run build // 打包快应用,输出build和dist文件夹 npm run watch // 监测到变化后自动编译 npm run server // 在另起一个终端开启server
如果node版本用的是8以上的话,在运行完npm install后再运行npm run build时可能会报Cannot find module .../webpack.config.js异常,请重新执行一次hap update --force。
这是由于高版本的npm在npm install时,会校验并删除了node_modules下部分文件夹,导致报错。而hap update --force会重新复制hap-toolkit文件夹到node_modules。
项目发布
由于我们在开发环境下是用的debug签名,而正式发布到应用市场是需要正式签名。
创建私钥:
通过openssl命令等工具生成签名文件private.pem、certificate.pem,例如:
openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem
(关于密钥长度,1024觉得不够安全的话可以用2048,但是代价也相应增大)
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]:gdlb #公司名称
Organizational Unit Name (eg, section) []: #可不填
Common Name (eg, your name or your server's hostname) []: #可不填
Email Address []: #邮箱
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []: #可不填
An optional company name []: #可不填
在工程的sign目录下创建release目录,将私钥文件private.pem和证书文件certificate.pem拷贝进去。
自定义根目录配置
开发中可能需要引入js或者css文件等,为了方便通常会配置相对路径,可以设置alias(别名),来方便应用;
具体的操作是,在 src 目录下建立 config 文件夹,在其中创建 webpack.config.js 文件,毕竟都是是用webpack,就像写vue项目一样。
const path = require('path')
module.exports = {
postHook: function(webpackConf, options){ webpackConf.resolve.alias = Object.assign(webpackConf.resolve.alias || {}, { '@src': path.join(process.cwd(), 'src') })
}
}
开发中遇到的问题
布局样式
虽然之前开发过小程序,但是再到快应用还是有很多不太适应的地方。
1.首页面布局默认的就是flex,没有其他的浮动布局。
2.css习惯连写,突然不能连写很不适应。
3.不支position要实现z-index的图层效果请使用stack组件。
4.很多的css样式不支持,如bulr、box-shadow要实现只能用背景图。
5.background-image 1030 以下版本不支持网络路径。
6.华为平台对svg 和 动画有兼容性问题。
7. border-radius 如果是gif图片不生效。
8.自定义字体样式1030+才支持font-face定义字体样式。
组件
list-item
作为使用率最高的组件之一,list-item组件类型不一致时,一定要给type="***"
不同命名来区别,否则会闪退。
解决方法:
<list-item type="{{index}}">
swiper
swiper也是作为出现频率非常高组件,但实际使用中,开放的功能太少,如vertical设置滑动方向不支持。
这里教大家自定义dots(面板指示点)
<div class="swiper-container"> <stack> <swiper class="swiper" autoplay="true" indicator="false" interval="2000" loop="true" onchange="swiperChange"> <block for="(index, item) in data"> <image class="wrap-img" src="{{item.image}}" onclick="bindViewTap(item)" /> </block> </swiper> <div class="dots"> <block for="(index, item) in data"> <div class="dot {{index === swiperCurrent ? 'active' : ''}}"></div> </block> </div> </stack> </div> <script> export default { swiperChange(e) { this.swiperCurrent = e.index } }
</script>
利用onchange事件去做修改
tabs
tabs内不能再嵌套tabs,如有此类需求,外部需要div组件模拟选项卡
slider
slider 组件只有滑动结束后end才有回调,进行中没有回调,改变value值也会触发change事件,无法判断change是人为滑动触发,还是改变数据触发的。
web
web组件使用网页与原生通信时(system.postMessage),当页面发生跳转时,就无法再触发通信,如:www.xxx.com?id=1跳转到www.xxx.com?id=2
video
video组件,由于我用到了if渲染后,不能立即调用它的方法,但是打印是存在的,官方给出答复,可能还没准备就绪。
this.$forceUpdate() /* 使用setTimeout解决蜜汁bug */ // this.$element("video") && this.$element("video").pause() this.$element("video")&&setTimeout(()=>{this.$element("video").pause()},30);
组件没有onDestroy钩子,据说以后会增加。
接口
音频接口
1.没有获取当前播放状态的接口,据说以后会加入。
audio.ontimeupdate = () => { this.isplaying = true // 由于快用还没提供获取播放状态的接口,暂时就这样解决了。 }
2.在通知栏中点击关闭音乐触发onpause完之后,ontimeupdate没有立即停止。
audio.onpause = () => { /* 我使用通知栏上的音乐通知栏,直接点击关闭,触发onpause完之后,ontimeupdate没有立即停止,用clearTimeout解决 */ let globalTime = this.$app.$def.globalTime clearTimeout(globalTime) globalTime = setTimeout(() => { this.isplaying = false }, 20) }
3.当页面触发onDestroy,onHide一定要记得销毁不必要的回调。
$watch
此方法尽量避免使用,因为他在1020和1030中是有差异的,在 1030 上的 watcher 的响应确会存在滞后,相比于 1020(牵扯到的代码都是同步逻辑)。
$forceUpdate()
this.$forceUpdate()有点类似与vue的this.$forceUpdate(),若开发者期望数据更新时立即执行相应的 DOM 操作,可使用:this.$forceUpdate();一般不推荐使用。
被禁用的new Function,eval
eval这些容易注入恶意代码,所以禁用了,但是你确实想用eval,也可以自己实现一个,参照查询-《前端与编译原理——用JS写一个JS解释器》。
往期技术分享
网页与快应用之间构造可靠通信通道
一个前端攻城狮的快应用开发之路
快应用的用法和常见问题解答
快应用开发漫谈-部署与调试
快应用开发新手入门指南
快应用list组件的那些事儿
写在最后
在去年的开发者大赛征文中,我们通过多个社区联合活动收集了很多优质文章,有入坑指南、开源项目、开发模板、常见问题总结等多个方面,这些内容为很多开发者提供了参考,感谢大家的支持和参与,今年的我们的征文活动还在继续,感兴趣的开发者可以点阅读原文查看详情哦!
快应用生态平台
赋能开发者
拓展场景未来
快来关注我们吧
快速入门快应用——quickapp构建与发布相关推荐
- vc6.0 debug 比 release 快??_快速入门快应用——quickapp构建与发布
本期作者:狗蛋404实验室 伴随着我司快应用审核通过.上线,此处应该有一篇快应用开发经验分享.我司开发的快应用刚好涉及到音频.视频.Feed流业务,下面分享一下我在开发中遇到的问题. 项目搭建 hap ...
- 快速入门PyTorch(2)--如何构建一个神经网络
2019 第 43 篇,总第 67 篇文章 本文大约 4600 字,阅读大约需要 10 分钟 快速入门 PyTorch 教程第二篇,这篇介绍如何构建一个神经网络.上一篇文章: 快速入门Pytorch( ...
- Yocto系列讲解[入门篇] 1 - 快速入门熟悉Yocto的构建
By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅! 你的喜欢就是我写作的动力! ...
- Tomcat快速入门(Tomcat安装 把一个项目发布到tomcat中 Eclipse配置Tomcat idea配置tomcat)
文章目录 服务器的概念 服务器 Web服务器软件:接收客户端发送的请求和响应客户端请求. 常见的Web服务器软件 Tomcat安装 win下启动乱码问题解决 Tomcat目录介绍 如何把一个项目发布到 ...
- 60分钟快速入门PyTorch
点击上方"算法猿的成长",关注公众号,选择加"星标"或"置顶" 总第 136 篇文章,本文大约 26000 字,阅读大约需要 60 分钟 P ...
- 快速入门PyTorch(3)--训练一个图片分类器和多 GPUs 训练
2019 第 44 篇,总第 68 篇文章 本文大约14000字,建议收藏阅读 快速入门 PyTorch 教程前两篇文章: 快速入门Pytorch(1)--安装.张量以及梯度 快速入门PyTorch( ...
- git快速入门 push/clone/reset/merge/切换分支全都有
本文介绍git快速入门,从安装/创建init / 发布push/版本回退reset / branch分支切换/合并分支merge 这些基本的操作都有涉及,方便新人快速入手,有需要的朋友mark一下.首 ...
- 如何:从Spring 4.0快速入门以构建简单的REST-Like API(演练)
如何:从Spring 4.0快速入门以构建简单的REST-Like API(演练) 关于使用Spring MVC创建Web API的另一篇教程. 不太复杂. 只是一个演练. 生成的应用程序将提供简单的 ...
- 【物体检测快速入门系列 | 01 】基于Tensorflow2.x Object Detection API构建自定义物体检测器
这是机器未来的第1篇文章 原文首发地址:https://blog.csdn.net/RobotFutures/article/details/124745966 CSDN话题挑战赛第1期 活动详情地址 ...
最新文章
- CSS中position属性( absolute | relative | static | fixed )详解
- 字符的点阵显示(模拟户外广告显示屏)
- python 拓扑排序_拓扑排序(topsort)算法详解
- linux挂载NTFS硬盘
- mfc从文件中读取数据_Python 中的 bytes、str 以及 unicode 区别
- Linux下memcache的安装和启动(很好)
- Windows Phone 7 文件下载进度和速度显示
- “乐享生活,随心而行”,第四届APEC车联网研讨会即将在上海召开
- 硅谷程序员跳槽排行榜:最爱竟不是 Google 苹果 Facebook!
- 简单的图书馆系统 LibrarySystem(OC模拟)
- sap服务器安全证书,SAP安全登录单
- thinkphp 通过Redis实现增删改查操作
- SFUD | 一款串行 Flash 通用驱动库
- 生日快乐祝福。我遇见你 都是人间最好的事
- 百度云加速边缘计算功能设置判断移动端跳转
- Activiti 学习笔记十:开始活动节点(判断流程是否结束及查询历史)
- 前端开发面试快速复盘,不标准的面试经验分享与杂谈(终章),我拿到满意offer了
- 老照片在哪里可以修复?安利几款实用的修复软件
- eclipse 调整html编辑器
- linux 学习笔记 (二)