快应用安装流程和统计打点

掘金地址

https://juejin.im/post/5dc4d929e51d452381588450

快应用安装流程和统计打点

快应用生态已经发展的非常完善，今天我就快应用的安装开发和统计打点，做一个总结，希望有所收获，欢迎指导。

一、安装快应用开发工具

1.安装nodeJs

• 安装nodeJs，首先必须是8.0以上，否则不兼容， 建议10.0+，而且要从官网下载。
• 官网地址：nodejs.org/en/

2.安装hap-toolkit

• 安装hap-toolkit，命令行为 npm install -g hap-toolkit
• 校验：Hap –v （提示安装成功即可）

3.安装调试器

• 安装调试器，通过下载地址：https://www.quickapp.cn/docCenter/post/69 
• 下载好的apk文件是 (quickapp_debugger.apk) ，QQ或者微信均可传送，建议QQ传送安装。

4.安装预览版

• 安装预览版，通过下载地址：https://www.quickapp.cn/docCenter/post/69
• 下载好的apk文件是 (quickapp_platform_preview_release_v1030.apk) ，QQ或者微信均可传送，建议QQ传送安装。
• 按照目前的兼容情况和各个版本市场占有率来说，推荐1030， 快应用的最低版本荐1030，快应用是向上兼容不向下兼容。

5.安装rpk文件过程

如图所示，在手机上安装并打开调试器

• 扫码安装：配置 HTTP 服务器地址，下载 rpk 包，并唤起平台运行 rpk 包
• 本地安装：选择手机文件系统中的 rpk 包，并唤起平台运行 rpk 包
• 例qq接收：本地安装→文件管理→内部存储设备→tencent（腾讯）→QQfile_recv 这是对应文件的查找路径
• 在线更新：重新发送 HTTP 请求，更新 rpk 包，并唤起平台运行 rpk 包
• 开始调试：唤起平台运行 rpk 包，并启动远程调试

二、创建项目和开发调试

1.手动创建项目

• 建立项目模板
• hap init myproject
• 安装依赖
• npm install    安装模块到node_modules目录
• 如果出现 Cannot find module '.../node_modules/hap-tools/webpack.config.js 报错，则hap update -force ，进行升级即可，升级后无需重新npm install
• 编译项目
• npm run watch  监听
• npm run build   手动编译打包
• 启动http服务
• npm run server 
• 手动设置端口   npm run server -- -- port 8080
• 手机预览
• 将http服务的地址，复制到浏览器，生成二维码，用手机扫一扫即可
• 项目签名
• 凡是上线的项目，必须要做签名，并且线上签名不可更改。最好在第一次项目签名后，将签名进行保存。以防后期修改项目意外变更。未上线项目签名还可更改，但是只要上线后，签名则不能更改，请注意。
• 手动签名命令是 openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem

2.自动新建快应用工程

• 快应用的IDE 具有一键创建快应用工程的操作。
• 打开快应用IDE-文件-新建快应用工程

• 可以选择模板，如果没有特殊需要，默认模板简单明了。

• 以上的创建工程的对应理解如下
• 选择项目路径
• 项目名称-文件夹名称
• 应用名称-某某应用
• 应用包名-com.moumou.com类似格式
• 选择模板-默认就是默认模板
• 确认

3.项目结构

• 

• src-项目源文件夹 

• sign-签名模块 分为(debug 和 release) 线上必须有release签名

4.项目编译

• watch 
• npm run watch
• 如果希望每次修改源代码文件后，都自动编译项目 IDE->调试-启动调试
• build
• npm  run build
• 最终产出生成 rpk 包-不可上线 IDE->Hap-生成rpk包 
• 按照build的目录结构
•  build ---build：临时产出，包含编译后的页面 js，图片等 
• build ---dist：最终产出，包含 rpk 文件。其实是将 build 目录下的资源打包压缩为一个文件，后缀名为rpk，这个rpk文件就是项目编译后的最终产出
• release
• npm run release 
• 上线rpk包-必须做签名  

5.启动http服务器

• 如图所示 npm run server 启动服务

• 

• 复制地址到浏览器生成二维码
• 可直接扫码 

6.项目签名

• 第一种方式就是openssl命令形式
• openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem 
• 第二种方式是通过快应用IDE 一键签名
• 快应用ide- Hap -生成证书

• 

• 按照如上签名格式，给予一个demo

• CH 
• BeiJing
• BeiJing
• Company
• CompanyCn
• [email protected]

7.manifest配置文件详解

mainfest的配置文件内容较多， 这里只列举项目中我们常用且需要注意的一部分

• package-应用包名，例 com.demo.com
• name-应用名称 ，例 某某应用
• icon-应用图标 ， 标准（192 *192），按照官方给予的icon为标准
• versionName-应用版本名称 例 1.0.0.0
• versionCode-应用版本号，如果已经上线，再次传包，要更改，比如+1，每次均不同且不重复。
• minPlatformVersion-最小平台 ，例1030
• features-接口列表，不声明不能直接调用，所有需要调用的必须在这声明
• config-系统配置信息 
• designWidth  宽度比例，例1080 750常用手机适配宽度
•  logLevel 日志模式，重中之重，如果你没踩过这个坑，你该高兴，如果你各种打印不出现，想必就是这里忘了改了， 一般是 debug模式。
•  data  一些data配置。 比如后面我们要说到的打点，就需要在这配置appkey
• router-路由信息
• entry：入口文件，比如home
• pages：其他的路由文件
• display-UI显示相关信息
• fullScreen ， 是否全屏
• titleBar ，是否显示titleBar
• menu ，是否显示标题栏右上角菜单按钮，如果需要自己的一些判断逻辑，需要自己编写
• pages ，各个页面的显示样式，key 为页面名，与路由一致。路由写了。这里也要写，要互相匹配上，否则编译可能就会报一些莫名其妙的错误，单个页面样式可覆盖整体页面样式哦。
• Bgcolor ，窗口背景色，如果你想改状态栏的颜色，那就要修改这里了。

三、快应用的差异性简述

这里就说一些标签类的差异

• img和image
• img是单标签  <img src="../images/icon.png" alt="头像">
• image是双标签， <image class=“cosPicture” src=“”alt="不见了"></image>  是的，双标签，别写着写着就丢了
• text 和p span div ，承载文字的标签
• <text >文字</text>
• <text > <span>文字内部</span>文字外部</text> 
• <p >文字</p> 
• <span >文字</ span > 
• <div>文字</ div >
• list和list-item

• <list class="tutorial-page" onscrollbottom="loadMoreData">
      <!-- 商品列表 -->
      <block for="productList">
        <list-item type="product" class="content-item" onclick="route($item.url)"> <text class="bottom-line">{{$item.brief}}</text> </div> </list-item> </block> <!-- 加载更多，type属性自定义命名为loadMore --> <list-item type="loadMore" class="load-more"> <progress type="circular"></progress> <text>加载更多</text> </list-item> </list> 复制代码

• list里面，只能是list-item
• list-item结构必须一致，尤其结构十分复杂的状态，这里已经要注意，如果非结构一致类型，type属性要修改，比如第一个list-item的type值为one，第二个list-item的type为two
• list-item内部慎用 if 和 for ， 因为 if 和 for 可能造成type的lsit-item的DOM结构改变，从而报错
• scrollbottom， 这是监听列表是否滑动到底部，只要是列表，必不可少
• stack
• 了解stack，在快应用的布局上，应该是不会有太大问题。 stack颠覆了以往的标签模式，采用层叠式布局，以下代码和图片是我对stack的详解

• <stack class="stack">
  <image class="image“ src="pic2.webp"> </image>
   <text class="title">stack容器排列方式为层叠，每个子组件按照先后顺序依次堆叠，覆盖前面的组件</text>
    <div class="wrap"> <image class="btn“ src="demo.png"> </image> </div> </stack> 复制代码

• 

• 相信看见这个图你就可以明白了。 他的结构都是一层一层罗列上去的，最外层是stack，stack里面包含的image，text，div，这三者的布局是，text显示在image上面，div在text上面，而div内部的image，直接显示。通俗来说，摞压摞！

• border
• border-width+ border-style + border-color  =border
• 例如 ：
• border-bottom-width:3px;
• border-bottom-style:solid; 
• border-bottom-color:#fff000
• 等同于border-bottom：3px solid #fff000；的确有点小累啊
• border-radius
• 左上角+右上角+左下角+右下角= 四角
• 例如
• border-top-left-radius:15px
• border-top-right-radius:15px
• border-bottom-left-radius:15px 
• border-bottom-right-radius:15px 
• 等同于 border-radius：15px
• 注意
• 圆角时只使用 border-width，border-[left|top|right|bottom]-width 无效 
• 圆角时只使用 border-color，border-[left|top|right|bottom]-color 无效 
• 快应用的flex布局
• flex-direction
•  column | row | column-reverse 1040+ | row-reverse 1040+
• 默认：row水平 
• flex-wrap
•  nowrap | wrap | wrap-reverse 
• 默认： nowrap不换行
•  justify-content
•  flex-start | flex-end | center | space-between | space-around
• 默认：flex-start 左对齐 -上对齐
•  align-items  
• stretch | flex-start | flex-end | center 
• 默认：stretch容器高度
• align-content
• stretch | flex-start | flex-end | center | space-between | space-around
• 默认：stretch轴线占满整个交叉轴 
•  align-self 
• 1010+ auto | stretch | flex-start | flex-end | center | baseline
•  默认：auto继承父元素的align-items属性 

四、快应用小坑总结

• 缺少依赖
• Can’t resolve ‘less-loader’ ,证明缺少 less-loader依赖，直接重新安装依赖即可， 即 npm install less-loader ，其他依赖同理。
• swiper中多图片加载
• 部分机型(小米)出现一些图片被切割现象。（不可恢复） 部分机型（华为、oppo）滑动过快，出现图片被切割现象，重新加载可以还原页面。可能是手机渲染的问题。 图片属性： resize-mode: contain;相信版本的更新会修复和完善！
• 页面调试
• 最初调试时注意版本号以及是否在同一网段。如果手机电脑都使用一个wifi 。但是电脑安装了360wifi等，则会改变网段。请注意必须在同一网段 。
• input特例
• 获取input的value值必须有change <input id="phone" type="text" placeholder="请输入手机号码" maxlength ="11" class="phone" value="{{phoneInput}}" @change="bindPhoneChange"/> 
• 修改和获取 this.$element('phone').value

五、快应用的打点总结

目前打点接触的友盟和轻粒子两家，都是很好的快应用统计平台下面我针对统计打点，做一个简单的对比

• 友盟-流程和植入
• Appkey申请——登录友盟+官网，在我的产品页面添加新应用，然后获取到Appkey 
• 创建快应用并接入SDK——umengannlysis.es.min.js
• 项目导入SDK——将umengannlysis.es.min.js拷贝到您的快应用项目src/路径下
• 添加依赖——npm install js-base64 --save  和    npm install md5 --save
• 为SDK添加相应权限——

  "features": [
      { "name": "system.storage"},
      { "name": "system.fetch"}, { "name": "system.network"}, { "name": "system.device"} ] 复制代码

• appkey植入——

  "config": {
      "data":{
        "umeng_appkey" : "5ad7fb4**********d0000d5",//umeng_appkey即为上步申请的Appkey
      }}复制代码

• app.ux文件-初始化打点 ——

  import './umenganalysis.es.min';
  onCreate(){
        $umeng_stat.init(this);   //在onCreate函数中加入该行代码，必须添加！！！
   }复制代码

• 轻粒子-流程和植入
• Appkey申请——注册账号并登录 轻粒子官网 在“我的快应用”页面点击创建快应用，成功创建快应用后即可获取到对应快应用 app_key。 
• 创建快应用并接入SDK ——appStatistics.min.js 和 statistics.config.js
• 项目导入SDK ——把 sdk 中的 appStatistics.min.js、statistics.config.js 拷贝到项目中和 app.ux 同级的目录
• 添加依赖 ——需要md5 （自带）
• 为SDK添加相应权限 ——

  "features": [
          { "name": "system.fetch"},
          {"name": "system.storage"}, {"name": "system.device"}, {"name": "system.network"}, {"name": "service.account"}, {"name": "system.shortcut"} ] 复制代码

• appkey——在statistics.config.js 文件中 

  export default {
      'app_key' : '0000000000000'   //请在此行填写统计平台获取的 app_kye
      }
  复制代码

• app.ux文件-初始化打点 ——

  import "./appStatistics.min.js"
  onCreate(){
      APP_STATISTICS.app_sta_init( this );//在onCreate函数中加入该行代码，
  //必须添加！！！}复制代码

• 友盟和轻粒子打点自定义事件对比
• 轻粒子

• onShow(){     
    APP_STATISTICS.page_show( this );
  }    复制代码

•  onHide(){     
    APP_STATISTICS.page_hide( this );
  }, 复制代码

• APP_STATISTICS.track_event('事件id');复制代码

• APP_STATISTICS.track_event('homeLikeDot', countLikeStatus);复制代码

• APP_STATISTICS.track_event('homeShareDot' , {
  shareEveId: item.id,
  share_count_str: item.share_count_str        
              });复制代码

• 友盟

• onShow(){     
    $umeng_stat.resume(this)
  }复制代码

• onHide(){     
    $umeng_stat.pause(this);
  }复制代码

• $umeng_stat.trackEvent('事件ID'); 复制代码

• $umeng_stat.trackEvent('homeLikeDot',countLikeStatus); 复制代码

• $umeng_stat.trackEvent('homeShareDot' , {
  shareEveId: item.id,
  share_count_str: item.share_count_str        
  }); 复制代码

• 备注
• 自定义事件打点接口及调用 
• $umeng_stat.trackEvent(id,attr);
•  APP_STATISTICS.track_event(id,attr);  
• 该方法接收两个参数，第一个参数 id 为事件ID（必传）。 第二个参数 attr 为事件携带参数（非必传）。 该参数可以为一个字符串( String )或者一个 JavaScript 对象 ( Object )。
• 差异性，轻粒子有一个错误分析
• 轻粒子的错误分析，建议项目添加
• 监听应用错误的生命周期函数

• onError(err) {
          try {
              // 错误统计打点代码
              APP_STATISTICS.on_err(err);
          } catch (error) {}
  
      } 复制代码

六、最后

感谢大家的阅读，欢迎提出宝贵意见，希望本篇文章可以给快应用开发的小伙伴，带来一些新的体验，谢谢！