快应用-v2ex
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
dist
sign/debug
src
package.json
readme.md

readme.md

V2ex - 快应用

启动

# 安装依赖
npm install
# 启动并监听自动刷新
npm run watch
# 开启服务器调试
npm run server

应用调试器

应用调试器 下载

打开调试器 --> 点击"扫码安装",扫描终端窗口中的 二维码 即可完成配置

安装rpk包

    1. 复制rpk包到手机中

      /dist 目录下编译产出的 rpk包 通过USB数据线或其他方式,复制到手机文件系统中

    1. 本地安装rpk包 打开调试器 --> 点击"本地安装",选择手机文件系统中的rpk包,并自动唤起平台运行rpk包,查看效果

ps: 快应用调试器手机和电脑要同一网络

快应用(Quick App)

什么是 快应用

快应用也叫免安装应用,应用使用前端技术栈开发,原生渲染,同时具备H5页面和原生应用的双重优点。即点即用,享受原生应用的性能体验。

优势:

  • 九大厂商(vivo、oppp、小米、华为、魅族、中兴、联想、努比亚、金立)支持
  • 高效链接用户,低成本助力,流量高转化,厂家丰富,强留存用户,容易生存
  • 使用前端技术栈,同样具备 HTML 5 与 Native App 的双重优势,用户使用微信小程序和快应用,也皆可以「即点即用」
  • 免安装,免存储,一键直达,更新直接推送

如何开发 快应用

快应用面向所有类型开发者,提供快应用开发平台,开发工具,开发者可自行开发应用发布流程

流程:

流程

1. 环境搭建

  • 安装 Node.js (6.0以上)

  • 安装 hap-toolkit

    hap-toolkit是快应用的开发者工具,帮助开发者通过命令行工具辅助开发工作的完成,主要包括创建模板工程,升级工程,编译,调试等功能。

    npm install -g hap-toolkit
  • 安装 快应用调试器

    调试器是一个Android应用程序,调试程序。扫码安装,本地安装,在线更新,开始调试

2. 项目初始化启动

  • 初始化并启动

    # 初始化
    hap init <ProjectName>
    # 安装依赖
    npm i
    # 启动监听,自动编译
    npm run watch
    # 打包构建
    npm run build

    ps: 其他命令可在项目根目录的 package.json 中的 script 查看

    目录结构�:

    ├── sign                      rpk包签名模块
    │   └── debug                 调试环境
    │       ├── certificate.pem   证书文件
    │       └── private.pem       私钥文件
    ├── src
    │   ├── Common                公用的资源和组件文件
    │   │   └── logo.png          应用图标
    │   ├── Demo                  页面目录
    │   |   └── index.ux          页面文件,可自定义页面名称
    │   ├── app.ux                APP文件,可引入公共脚本,暴露公共数据和方法等
    │   └── manifest.json         项目配置文件,配置应用图标、页面路由等
    └── package.json              定义项目需要的各种模块及配置信息
    

3. 生命周期

页面生命周期:

生命周期 对应Vue的生命周期 描述
onInit created ViewModel 的数据已经准备好
onReady mounted ViewModel 模板已经编译完成
onShow activated 页面被切换重新显示
onHide deactivated 页面被切换隐藏
onDestroy destroyed 页面被销毁时调用
onBackPress 当用户点击返回实体按键左上角返回菜单调用返回API时触发该事件
onMenuPress 当使用原生的顶部标题栏时

应用生命周期:

生命周期 描述
onCreate 当应用创建时调用
onDestroy 当应用销毁时触发

4. 样式

  • 长度

框架目前仅支持长度单位 px%,与传统web页面不同,px是相对于项目配置基准宽度的单位

100px * 1080px = x * 750px

设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度

  • 选择器

    内联样式tag选择器class选择器id选择器并列选择后代选择器

  • 布局-flex

  • 支持预编译

    less, sass

5. 指令

指令 对应Vue的指令 描述
for v-for 循环输出一个数组类型的数据
if/elif/else v-if/v-else-if/v-else 是否增加或者删除组件
show v-show 是否显示组件

6. 事件

  • $on | 监听 ViewModel 事件
  • $off | 移除 ViewModel 事件
  • $emit | 触发 ViewModel 事件
  • `on${事件名}` | 监听原生组件事件
  • $emitElement | 触发原生组件事件
通用事件 描述
click 组件被点击时触发
longpress 组件被长按时触发
focus 组件获得焦点时触发
appear 组件出现时触发
disappear 组件消失时触发
swipe 组件上快速滑动后触发

ps:通用事件

7. 组件

组件 对应�Vue 描述
block template 逻辑区块的组件,没有对应的 Native 组件
slot slot 组件插槽

part1:

<template>
  <div>
    <text>{{ header }}</text>
    <slot></slot>
    <text>{{ footer }}</text>
  </div>
</template>

page:

<import name="part1" src="./part1"></import>
<template>
  <part1 class="component" header="{{header}}" footer="{{footer}}">
    <text>slot节点内容</text>
  </part1>
</template>

8. 组件通信

父子组件之间的通信

  • props

    <comp-part1 
      prop1="{{data1}}" 
      prop2-object="{{data2}}">
    </comp-part1>
  • `on${事件名}` / $emit

    <comp-part1 onevt-type3="evtTypeHandler">
    </comp-part1>
    $emit('evtType3')
  • $on / $dispatch

    向上传递:子组件触发,父组件响应

    当传递结束后,可以调用evt.stop()来结束传递

  • $broadcast / $on

    向下传递:父组件触发,子组件响应

    当传递结束后,可以调用evt.stop()来结束传递

    兄弟组件之间的通信

    传统的兄弟等非父子组件之间通信,是通过Publish/Subscribe模型来完成

    子组件Sub端:part1

    <script>
      export default {
        processMessage (msg) {
        },
        /**
         * 通过events对象:绑定事件
         */
        events: {
          customEventInVm2 (evt) {
          }
        }
      }
    </script>

    父组件:

    <import name="comp-part2" src="./part2"></import>
    <import name="comp-part3" src="./part3"></import>
    
    <template>
      <div class="tutorial-page">
        <!-- 兄弟VM通信 -->
        <comp-part2 id="sibling1"></comp-part2>
        <comp-part3 id="sibling2"></comp-part3>
      </div>
    </template>
    
    <style lang="less">
    </style>
    
    <script>
      // 父组件
      export default {
        onReady () {
          this.establishRef()
        },
        /**
         * 建立相互VM的引用
         */
        establishRef () {
          const siblingVm1 = this.$vm('sibling1')
          const siblingVm2 = this.$vm('sibling2')
    
          siblingVm1.parentVm = this
          siblingVm1.nextVm = siblingVm2
          siblingVm2.parentVm = this
          siblingVm2.previousVm = siblingVm1
        }
      }
    </script>

    子组件�Pub端:part2

    <script>
      // 子组件: part3
      export default {
        sendMesssage () {
          if (this.previousVm) {
            // Way1. 调用方法
            this.previousVm.processMessage('兄弟之间通信的消息内容')
            // Way2. 触发事件
            this.previousVm.$emit('customEventInVm2', '兄弟之间通信的消息内容')
          }
        }
      }
    </script>

9. 页面路由切换、页面参数传递

切换页面

<template>
  <div class="tutorial-page">
    <!-- 以'/'开头的应用内页面的路径 -->
    <a href="/PageParams/receiveparams">跳转到接收参数页面</a>
    <!-- 以非'/'开头的应用内页面的名称 -->
    <a href="PageParams/receiveparams">跳转到接收参数页面</a>
    <!-- 特殊的,如果uri的值是'/',则跳转到path为'/'的页,没有则跳转到首页-->
    <a href="/">跳转到首页</a>
  </div>
</template>

传参

<template>
  <div class="tutorial-page">
    <!-- 添加参数 -->
    <a href="/PageParams/receiveparams?key=Hello, world!">携带参数key1跳转</a>
    <!-- 添加变量参数 -->
    <a href="/PageParams/receiveparams?key={{title}}">携带参数key2跳转</a>
  </div>
</template>

接口router切换页面

// 导入模块
import router from '@system.router'

export default {
  routePagePush () {
    // 跳转到应用内的某个页面
    router.push({
      uri: '/PageParams/receiveparams'
    })
  },
  routePageReplace () {
    // 跳转到应用内的某个页面,当前页面无法返回
    router.replace({
      uri: '/PageParams/receiveparams'
    })
  },
  routePageBack () {
    // 返回上一页面
    router.back()
  },
  routePageClear () {
    // 清空所有历史页面记录,仅保留当前页面
    router.clear()
  }
}

接口router传递参数

router.push({
  uri: '/PageParams/receiveparams',
  params: { key: this.title }
})

页面�接收参数

export default {
  protected: {
    key: ''
  },
  onInit () {
    // js中输出页面传递的参数
    console.info('key: ' + this.key)
  }
}

10. script脚本

底层接口

  • 界面交互

    • 分享
    • 弹窗
    • 打开网页
    • 通知消息
    • 震动
  • 网络访问

    • 上传下载
    • 数据请求
  • 文件存储

    • 数据存储
    • 文件储存
  • 系统能力

    • 二维码
    • 传感器
    • 剪贴板
    • 地理位置
    • 桌面图标
    • 日历事件
    • 网络状态
    • 设备信息
    • 屏幕亮度
    • 系统音量
    • 电量信息
    • 应用管理
    • 录音
    • 联系人
    • 发送短信
  • 安全

    • 密码算法(rsa)
  • 图形图像

    • 多媒体
    • 图片编辑
  • 声音音频

    • 音频
  • 厂商服务

    • 推送
    • 支付
    • 统计
    • 账号
  • 第三方服务

    • 微信支付
    • 支付宝支付
    • 第三方分享
    • QQ账户
    • 微信账户
    • 微博账户

调试

  • 日志输出

    打开工程根目录下的src文件夹的manifest.json,找到config配置,将logLevel修改为最低级别debug,即:允许所有级别的日志输出

    {
     "config": {
        "logLevel": "debug"
      }
    }
    console.debug('debug')
    console.log('log')
    console.info('info')
    console.warn('warn')
    console.error('error')
  • 远程调试

    远程调试指的是通过 快应用调试器hap-toolkit的远程调试命令chrome devtools调试界面,来调试手机app端的页面

    # 启动http调试服务器
    npm run server

坑。。。

  • 构建

    1. watch 只会监听页面变化,manifest增加图片 不会刷新
  • 样式

    1. 底层转换,复杂样式无法实现
  • 语法

    1. �需要手动�配置支持相关高级语法
  • 组件

    1. 通信:vue 的老一套套路($dispatch, $broadcast),组件嵌套复杂通信困难麻烦
    2. 系统组件库功能�部分功能设计不好
  • 页面路由切换

    1. params参数的每个字段值都会被序列化成字符串
    2. 页面返回回传参数简直无法理解
  • 调试�

    1. 对写惯前端热加载来说,发狂,调试器断连、崩溃问题
    2. 调试模式模拟 chrome devtool,界面模拟,功能没有!
    3. 控制台 console 不会显示 object 详情
    4. 此处应该要有个ide...
  • 莫名其妙出现莫名其妙的报错。。。

�相关链接: