快速入门快应用——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组件的那些事儿

写在最后

在去年的开发者大赛征文中，我们通过多个社区联合活动收集了很多优质文章，有入坑指南、开源项目、开发模板、常见问题总结等多个方面，这些内容为很多开发者提供了参考，感谢大家的支持和参与，今年的我们的征文活动还在继续，感兴趣的开发者可以点阅读原文查看详情哦！

快应用生态平台

赋能开发者 

拓展场景未来

快来关注我们吧