从入到放弃_快应用踩坑之，一入坑
伴随着我司快应用审核通过、上线此处应该有一篇快应用踩坑经历。我司开发的快应用刚好涉及到音频、视频、Feeds流业务下面我说分享一下我在开发中遇到的问题。
项目搭建
hap init <project_name> // 生成一个快应用项目脚手架
npm install // 安装依赖
npm run build // 打包快应用seo搜索引擎优化下面我说分享一下我在开发中遇到的问题。
项目搭建
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异常网站优化在运行完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