258资源分享网

伴随着我司快应用审核通过、上线，此处应该有一篇快应用踩坑经历。我司开发的快应用刚好涉及到音频、视频、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=http://www.yiyongtong.com/archives/"{{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

这个也是一个特别坑爹的组件