请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

交流分享 快应用开发心得

0
回复
362
查看
[复制链接]

1

主题

2

帖子

15

积分

 楼主| 2018-12-19 11:28:38 显示全部楼层 |阅读模式
本帖最后由 helen 于 2018-12-19 11:34 编辑


一.介绍
  1. 与微信小程序的比较
    1)二者都采用前端技术栈,快应用是native 渲染,性能体验会比较好,而小程序目前是webview渲染
    2)二者开发框架和规范不同,所以代码写法上有差异,快应用的css支持能力较弱
    3)快应用基于native,可以调起丰富的系统api,小程序在此方面会有些无力

  2. 快应用入口
    1)应用商店
    2)桌面图标
    3)全局搜索
    4)浏览器搜索
    5)网页跳转
    6)负一屏
    7)智能推送
    8)智慧识屏
    9)场景化入口(短信按钮、应用卸载替换、二维码、传送门)
    以上入口各个不同品牌手机,入口各不相同,具体可查阅官方文档
  
  3. 快应用优点
    1)轻松调起更多系统api
    2)各厂商的流量扶持
    3)native渲染,deeplink入口,原生桌面入口,push能力

二.工具
    本次开发使用了官方提供构建工具hap-toolkit

  1.  环境
    1)需安装6.0以上版本的NodeJS
    2)安装hap-toolkit

  2.  手机调试工具
    1)在调试手机上,需要安装快应用调试器和平台预览版。我通过电脑上下载调试器的apk,通过USB方式发送到手机,在手机上直接点击安装。
    下面是一个开发过程中,发现容易被忽略的很好用的功能:
       (1)打开调试器,点击右上角三个点,选择“设置”
       (2)点击“应用更新策略”,根据自己需求选择相应策略
       (3)若是调试一个新写的页面,选择“仅刷新页面”即可,默认选中“重启应用”
       (4)若当前调试的页面路由层级较深,且当前调试的功能不需要重启应用的话,建议选择为“仅刷新页面”,会方便很多
        1.png
   
    2)在手机调试器上首次点击右下角“开始调试”,手机会提醒下载“快应用调试器内核”,这里,不同品牌不同型号的手机,下载的调试器内核是不同的,不同版本的调试器内核,会直接影响开发调试的效率。
    这里我们使用不同手机,在开发者工具中做一个对比:
       (1)小米6手机:在控制台打印出来的数据,我们可以直接点击查看其结构,在“Network”中,我们也可以直接看到接口的请求与返回状况
        2.png
        3.png
       (2)华为手机:在控制台打印出的数据是对象的类型,在“Network”中,也看不到任何请求

        4.png
        5.png

   
  3.  编辑器
    因为快应用支持的css样式局限,在开发过程中,使用我们普通的编辑器,不容易看到错误提示。推荐一款编辑器:华为快应用IDE。下图为该编辑器的效果,如果遇到不支持的样式,会在该样式下显示红色波浪线,鼠标移到样式上,会显示警告原因和写法建议。
    6.png
    目前也出了官方IDE,打包什么的会比较方便,开发者可根据个人需求选择相应编辑器。

三.项目文件
   
  1.  目录结构
    安装toolkit工具后,可通过全局hap命令创建一个项目模板,如下所示:
    hap init <ProjectName>
    命令执行后,会在当前目录下创建<ProjectName>文件夹,作为项目根目录
    项目根目录主要结构如下:
       ├── sign                                       rpk包签名模块
                └── debug                           调试环境
                        └── certificate.pem      证书文件
                        └── private.pem           私钥文件
       ├── src
               ├── Common                        公用的资源和组件文件
                        └──logo.png                 应用图标
               ├── Demo                             页面目录
                        └── index.ux                页面文件,可自定义页面名称
               ├── app.ux                            APP文件,可引入公共脚本,暴露公共数据和方法等
               └── manifest.json                 项目配置文件,配置应用图标、页面路由等
       └── package.json                         定义项目需要的各种模块及配置信息
         
    目录的简要说明如下:
        src:项目源文件夹
        sign:签名模块(当前仅有debug签名,如果内测上线,请添加release文件夹,增加线上签名)

  2.  配置文件配置
    manifest.json为快应用项目配置文件,根据一个示例(官方示例)简单介绍下相关配置

       {
              "package": "com.company.unit",                        应用包名  
              "name": "appName",                                 应用名称  
              "icon": "/Common/icon.png",                           应用图标  
              "versionName": "1.0",                                应用版本名称  
              "versionCode": 1,                                   应用版本号  
              "minPlatformVersion": 1000,                           支持的最小平台版本号  
              "features": [{ "name": "system.network" }],            接口列表  
              "permissions": [{ "origin": "*" }],
              "config": {                                          统配置信息   
                    "logLevel": "off"  
              },  
              "router": {                                          路由信息   
                     "entry": "Hello",   
                   "pages": {      
                          "Hello": {        
                                 "component": "hello",        
                                 "path": "/",        
                                 "filter": {
                                      view": {
                                           "uri": "https?://.*"
                                      }
                                 }
                          }   
                   }  
              },  
              "display": {                                           UI 显示相关配置   
                     "backgroundColor": "#ffffff",   
                     "fullScreen": false,   
                     "titleBar": true,   
                     "titleBarBackgroundColor": "#000000",   
                     "titleBarTextColor": "#fffff",   
                     "pages": {      
                           "Hello": {        
                                 "backgroundColor": "#eeeeee",        
                                 "fullScreen": true,        
                                 "titleBarBackgroundColor": "#0000ff",        
                                 "titleBarText": "Hello"      
                           }   
                     }  
             }
       }

四.调试

  1.WIFI 调试
    如果手机与 PC 在同一局域网,可以使用 WIFI 调试,步骤如下:
   
    (1)在项目根目录下执行如下命令,启动 HTTP 调试服务器
         npm run server
         服务启动成功后,命令行终端和调试服务器主页可以看到提供扫描的二维码
    (2)手机快应用调试器中关闭开启USB调试
         手机快应用调试器点击扫码安装按钮,扫码安装待调试的 rpk 文件
         手机快应用调试器中点击开始调试按钮,开始调试

  2.USB 调试
    USB 调试模式不需要手机与 PC 在同一局域网,需要在调试过程中手机通过 USB 连接 PC,步骤如下:
    (1)在项目根目录下执行如下命令,启动 HTTP 调试服务器:
         npm runserver
    (2)手机开启设置 --> 开发者选项--> USB调试
    (3)手机快应用调试器选中开启USB调试,手机USB 连接到 PC
    (4)手机快应用调试器中点击在线更新按钮,安装待调试的 rpk 文件
    (5)手机快应用调试器中点击开始调试按钮,开始调试


  3.实时预览更新效果
    需要同时打开两个终端,一个执行npm run watch,另一个启动服务npm run server,默认端口为12306。
    也可以自定义端口,例如:npm run server -- --port 8080。

五.开发
  现在可以开始愉快的踩坑之路了~
  1.template篇
    1)标签使用受限,其中,div等标签中不能直接输入文本,文本必须写在span或text标签中
    2)如果组件的props使用驼峰定义,那么在传递数据时要使用-连接。eg:testProp,使用时,要写成test-prop,否则无法传值
    3)tabs组件不允许嵌套使用,若需两级tab,需自己编写
    4)list组件中,list-item组件需要设置type属性,需要注意的是,如果是不同的item,要设置不同的type属性,否则会出现DOM结构错乱
    官方文档中也提到了要慎用if指令
    11.png

  2.style篇
    1)快应用的单位是px,该单位已实现各种屏幕自适应,比如默认设计稿宽度750px,则此时样式1px=设计稿1px
    2)最不方便之处,就是css样式支持的太有限,下面列出较常用典型的几点,更多可自行查阅官方文档:
       (1)由于快应用默认为flex布局,而flex的默认值方向为水平,所以,div套div布局,其中的子元素都是水平排列的,如需垂直排列,须自行另外设置
       eg:除了颜色没写任何样式,结构和显示效果请看图
        7.png

       (2)颜色:如果要写16进制色值的话,遇到可简写的色值需要写成完整的6位,不建议3位简写,比如要写成: #999999;不能写成:#999
       (3)单边框:光写border-top的简写不起作用,但是可以分开写:border-style、border-top-color、border-top-width
       (4)position仅支持none|fixed两个值,且父容器为<list>、<swiper>时不生效
       (5)display仅支持flex|none两个值

  3.script篇
    1)数据请求方法,成功时返回的不是json对象,需要用JSON.parse转换一下,否则取不出值
    2)input输入框使用时,不能直接取value,需要通过event.text获取
    3)this.key= value / this.$set(‘key’, value)区别
       eg:在初始的data中,只设置了info为空对象,点击按钮时,设置info.aa
       如下图两种写法:
      (1)   直接写this.info.aa,页面上没有变化,仍然是undefined
      (2)   写成this.$set(‘info.aa’,‘aaa’),页面上显示出了aaa
          8.png
      其实也就是vue官方文档的那句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。所以需要使用$set方法去添加属性

    4)picker组件,改变选项值做操作的话,需要重新更新数组才能触发视图更新,例如:使用concat方法
    5)写个选中状态功能,数据层级太深的话,不起作用
    6)全局方法,写在app.ux中,其他地方调用时,用this.$app.方法名 就可以了
    7)比如我们需要实现一些dom操作,可以使用this.$element(id名称)方法,注意仅可以通过id获取DOM,且获取到的元素,跟我们传统的DOM不一样。例如,想要动态加样式,不能通过这种方式
    9.png
    8)调用父组件的某个方法,可通过this.$parent().方法名 调用
    9)页面之间传递参数,用官方给的方法就挺好用
10.png
    10)通常CMD引入模块(import)时,多处引用,模块只初始化一次,快应用中会多次初始化,导致多处引用同一个模块但指针指向不同对象


六.打包及发布
  1.编译工具
    1)编译打包工程
        在工程的根目录下运行
        npm runbuild
        编译后的工程目录在/build
        生成的应用路径为/dist/.rpk

    2)增加 release 签名
        通过 openssl 命令等工具生成签名文件private.pem、certificate.pem,例如:
        opensslreq -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -outcertificate.pem
        在工程的 sign 目录下创建 release 目录,将私钥文件 private.pem 和证书文件 certificate.pem 拷贝进去

    3)发布程序包
        发布程序包前需要增加release签名,然后在工程的根目录下运行
        npm runrelease
        生成的应用路径为/dist/.release.rpk
        如果需要临时使用 debug 签名,可以使用
        npm runrelease -- --debug

  2.IDE发布
    1)生成证书。点击快应用面板的【生成证书】按钮, 按提示输入相关信息
    2)生成发布用 RPK。点击【发布 rpk包】按钮, 生成成功的话会弹出对应的文件夹
        12.png




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册