内容简介:伴随着我司快应用审核通过、上线,此处应该有一篇快应用踩坑经历。我司开发的快应用刚好涉及到音频、视频、Feeds流业务,下面我说分享一下我在开发中遇到的问题。如果node版本用的是8以上的话,在运行完npm install后再运行npm run build时可能会报Cannot find module .../webpack.config.js异常,请重新执行一次hap update --force。这是由于高版本的npm在npm install时,会校验并删除了node_modules下部分文件夹,导致报
伴随着我司快应用审核通过、上线,此处应该有一篇快应用踩坑经历。我司开发的快应用刚好涉及到音频、视频、Feeds流业务,下面我说分享一下我在开发中遇到的问题。
项目搭建
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,但是代价也相应增大) 在工程的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]: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也是作为出现频率非常高组件,但是字实际使用中,虽然bug不多,但是开放的功能太少,如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是人为滑动触发,还是改变数据触发的。官方demo竟然是有时差来区别。 复制代码
- web
1.web组件使用网页与原生通信时(system.postMessage)。 当页面发生跳转时,就无法再触发通信,如: www.xxx.com?id=1跳转到www.xxx.com?id=2 在华为机型上有更多蜜汁bug. 复制代码
- 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.没有获取当前播放状态的接口,据说1050才会加入。 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.$nextTick(), 若开发者期望数据更新时立即执行相应的 DOM 操作,可使用:this.$forceUpdate();一般不推荐使用 复制代码
- 被禁用的 new Function,eval
eval这些容易注入恶意代码,所以小程序,快应用禁用了。 其实就是怕你怕你热更新,绕开审核,进行为所欲为的操作。 但是你确实想用eval,也可以自己实现一个。 参照-《前端与编译原理——用JS写一个JS解释器》 https://segmentfault.com/a/1190000017241258 复制代码
以上所述就是小编给大家介绍的《从入到放弃——快应用踩坑之路》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 苹果macOS Catalina正式版将彻底放弃32位应用和游戏
- Flink从入门到放弃(入门篇2)-本地环境搭建&构建第一个Flink应用
- GO 从入门开始放弃
- Elixir 从入门到放弃
- 放弃幻想,全面拥抱Transformer
- 动态规划:从入门到放弃
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
精通CSS(第2版)
[英] Andy Budd、[英] Simon Collison、[英] Cameron Moll / 陈剑瓯 / 人民邮电出版社 / 2010-5 / 49.00元
本书汇集了最有用的CSS技术,介绍了CSS的基本概念和最佳实践,结合实例探讨了图像、链接和列表的操纵,还有表单设计、数据表格设计、纯CSS布局等核心CSS技术。此外,书中着眼于创建跨浏览器的技术,讨论了bug及其捕捉和修复技术,还将所有技术组合成两个精彩的实例,讲述这些技术的工作原理和实际用法。 本书适合具有HTML和CSS基础知识的读者阅读。一起来看看 《精通CSS(第2版)》 这本书的介绍吧!