快应用开发常见问题及解决方案

栏目: JavaScript · 发布时间: 6年前

快应用开发常见问题及解决方案

快应用 是移动互联网新型应用生态，与手机系统深度整合，为用户提供更加场景化的体验。具备传统 APP 完整的应用体验，但无需安装、即点即用。 快应用 是基于手机硬件平台的新型应用形态，由国内十大手机厂商基于硬件平台共同推出，其标准是由主流手机厂商组成的快应用联盟联合制定。这里记录下在 快应用 开发中，涉及的常见问题及其对应解决方案；同时也会给出如何更好开发 快应用 的一些建议。

快应用开发常见问题及解决方案

温馨提醒：如果您目前有涉及进行快应用开发，那么您不妨看下 快应用脚手架，为优雅而生 一文，其中将开发所遇到的一些问题、以及开发体验都作了很大程度上的优化，相信会给你带来帮助(另外， Github 上的 awesome-quickapp 仓库：云集最新快应用相关教程文章、开发资源、项目案例及新闻动态；相信也会给您更好进行快应用开发，提供更多帮助)。

此文首发于个人最新基于 Ghost 所搭建博客 静轩之别苑 | 快应用开发常见问题及解决方案 。

快应用引擎相关

快应用生命周期函数

  • 现有的APP生命周期函数有 ： onCreate, onDestroy
  • 现有的页面级组件生命周期函数 ：onCreate、onInit、onReady、onShow、onHide、onDestroy（onBackPress、onMenuPress）
  • 已有的自定义组件生命周期函数 ： onCreate、onInit、onReady、onDestroy（onDestroy 只会在页面销毁的时候触发，用 if 指令卸载无法触发）

快应用的 $app、$def、$data 以及 global

在快应用中，暴露了 $app 对象；此对象下有暴露出 $def ， $data 等字段： 

$def
$data

但需要注意的是：直接挂在于 this 上，需通过 this.$app 来取；挂在于 this.$def 上，才可通过 this.$app.$def 来取，二者不可混淆。 

// app.ux
import device from '@system.device'
const hook2global = global.__proto__ || global
hook2global.$apis = $apis

  < script >
  export default {
  $deviceInfo: {},
  $xDeviceInfo: {},
  async onCreate() {
    this.$def.$deviceInfo = await this.getInfo()
    this.$xDeviceInfo = await this.getInfo()
  },
  async getInfo() {
    return new Promise((resolve, reject) => {
      device.getInfo({
        success: ret => {
          resolve(ret)
        },
        fail: err => {
          console.log(err)
        }
      })
    })
  }
}
</script >

如上示例代码，在其他页面代码中，this.$app.$def.$deviceInfo、 this.$app.$xDeviceInfo 这两种调用方式是期待的写法；如果混淆调用，得到的结果则是 undefined 。

而挂在于 global 的变量(如 $apis )，可通过 global.$apis 或直接 $apis 来调用；但如果在 DOM 结构中，不可直接使用，因为其默认主题是页面级 this ，所以 Toolkit 编译出的结果就会是 this.$apis or this.global.$apis，如此就不能达到预期；在页面属性中定义声明下即可，如下代码示例： 

<script>
  export default {
    $apis: $apis // or global.$apis
  }
<script>

如何解决快应用 Input 失去焦点，输入法不收起来问题

目前( 1050- )可以解决的办法是，在空白区域，添加事件，注入如下逻辑： 

this.$element('yourInputId').focus({focus: false})

如何解决快应用 textarea 无法清空数据问题

快应用（version <= 1030 ）目前存在 textarea 无法清空数据问题，目前只能采取 Hack 的办法解决，即在需要清除时候 this.$delete 掉该绑定的值， onchange 回调中再通过 this.$set 将数据属性添加回去，使得可以正常工作； 

<textarea onchange='handleChange' placeholder="{{placeholder}}" value="{{contentValue}}" id="keyborder"></textarea>
<input class="input" type="button" onclick="onHandleBtnClick" value="处理"></input>
<script>
export default {
  handleChange(response) {
    console.log(JSON.stringify(response, null, 2))

    // 以 Hack 的方式解决无法清空 textarea 输入数据@18-12-06;
    this.$set('contentValue', response.text)
  },
  onHandleBtnClick() {
    // Here ....... 处理你的数据；

    // 以 Hack 的方式解决无法清空 textarea 输入数据@18-12-06;
    this.$delete('contentValue')
  }
}
</script>

快应用中如何使用「字体图标」

在应用中，可以使用 字体图标 如 icomoon ，可以帮着有更好的方案来展示应用图标；在快应用中，可以直接在 dom 中使用，如下示例。但，对于定义在变量中的字体编码，则需要借助 unescape 做一层转换。 

<template>
    <text class="font-icon" style="font-size: {{fontSize}}px;"></text>
  <text class="font-icon" style="font-size: {{fontSize}}px;">{{ iconCode }}</text>
  <text class="font-icon" style="font-size: {{fontSize}}px;">{{ unescapeFontIconCode(iconCode) }}</text>
</template>

<script>
export default {
  private: {
    fontSize: 100,
    iconCode: ''
  },
  unescapeFontIconCode(iconCode = '') {
  return unescape(iconCode.replace(/&#x/g, '%u').replace(/;/g, ''))
  }
}
</script>

<style>
@font-face {
  font-family: iconfont;
  src: url('./../../assets/fonts/icomoon.ttf');
}

.font-icon {
  font-family: iconfont;
}
</style>

如何动态处理修改快应用样式

鉴于些原因快应用 hap-toolkit 打包，无法对逻辑代码进行处理；而快应用引擎内部，也没有对逻辑代码中样式做很好的兼顾；所以，当需要动态处理修改快应用样式时，你需要对涉及的代码进行转义处理，如下代码示例（备注：在 1030 版本，组件的 style 属性，支持直接绑定 Object 或 String）： 

<template>
  <div class="wrapper-padding" style="{{ styleObj }}">
      <text>如何动态处理修改快应用样式</text>
  </div>
</template>


<script>
export default {
  protected: {
    styleObj: {},
    dynamicUrl: 'https://image.nicelinks.site/jpg/nice-links-039.jpg'
  },
  onReady() {
    this.styleObj = {
      backgroundColor: '#fe0',
      color: '#212121',
      backgroundImage: `${this.dynamicUrl}`
    }
  }
}
</script>

至于为何要这么处理，可以参看开发时， build 目录下所打包后的代码， hap-toolkit 是对样式进行了处理，只要逻辑层的代码修改，跟打包后的样式处置保持一致，那么就可以实现动态处理修改快应用样式；如上代码中对 background-image 的设置，就是为了兼容快应用内部打包适配（此解决方案针对 1040 及以前版本，未知快应用何时修复）。

打包 工具 相关

如何升级 hap-toolkit 从 <0.0.38 至最新：

  1. 将本地 hap-toolkit 升级至新版本如 0.2.0 : yarn upgrade hap-toolkit@0.1.0 ;
  2. 运行 npx hap update --force 命令将本地配置升级（会新建 package.json , 原文件成 old package.json ）;
  3. 手动将 old package.json 中的自己的额外配置，同步至新的 package.json ；
  4. 将本地的 node_modules 和 package-lock.json : rm -rf node_modules ;
  5. 重新安装依赖即可：重新运行 yarn or npm i ;

如何为快应用设置别名(alias)

在已有项目根目录下创建 config.js 文件夹，并在该文件夹下添加 webpack.config.js ,然后注入类似如下代码即可： 

const path = require('path')

module.exports = {
  postHook: function(webpackConf, options){
    const alias = Object.assign(webpackConf.resolve.alias || {}, {
      '@components': path.join(process.cwd(), 'src/components')
    })
    webpackConf.resolve.alias = alias
  }
}

如此，对于 import 自定义组件或方法，就会得到优化，而不用费神去关心相对路径（需要提醒的是：因为快应用现有设计缘故，别名不能作用于 Dom 结构以及 style）；

<import name="HellorWorld" src="./../../components/HellorWorld"></import>
// 为快应用注入别名(alias)之后的写法
<import name="HellorWorld" src="@components/HellorWorld"></import>

@2019-02-24 于深圳.福田 Last Modify：2018-03-07


以上所述就是小编给大家介绍的《快应用开发常见问题及解决方案》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Web Data Mining

Web Data Mining

Bing Liu / Springer / 2006-12-28 / USD 59.95

Web mining aims to discover useful information and knowledge from the Web hyperlink structure, page contents, and usage data. Although Web mining uses many conventional data mining techniques, it is n......一起来看看 《Web Data Mining》 这本书的介绍吧!

码农工具
CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2025 码农网 粤ICP备17054400号-3