找回密码
 立即注册
搜索
首页 › 综合版块 › 技术交流 › 快应用开发常见问题及解决方案
发布主题
返回列表 发新帖

技术分享 快应用开发常见问题及解决方案

1
回复 3693
查看 [复制链接]
nicejade

6

主题

35

帖子

205

积分
 楼主| 2019-7-17 17:42:33 显示全部楼层 |阅读模式
本帖最后由 管理员 于 2019-7-17 19:31 编辑
快应用是移动互联网新型应用生态，与手机系统深度整合，为用户提供更加场景化的体验。具备传统 APP 完整的应用体验，但无需安装、即点即用。快应用是基于手机硬件平台的新型应用形态，由国内十大手机厂商基于硬件平台共同推出，其标准是由主流手机厂商组成的快应用联盟联合制定。这里记录下在快应用开发中，涉及的常见问题及其对应解决方案；同时也会给出如何更好开发快应用的一些建议。
温馨提醒：如果您目前有涉及进行快应用开发，那么您不妨看下快应用脚手架，为优雅而生一文，其中将开发所遇到的一些问题、以及开发体验都作了很大程度上的优化，相信会给你带来帮助(另外， Github 上的 awesome-quickapp 仓库：云集最新快应用相关教程文章、开发资源、项目案例及新闻动态；相信也会给您更好进行快应用开发，提供更多帮助)。
快应用引擎相关快应用生命周期函数
  • 现有的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： 使用 this.$app.$def 获取在 app.ux 中暴露的对象;
  • $data：使用 this.$app.$data 获取在 manifest.json 的 config.data 中声明的全局数据；
但需要注意的是：直接挂在于 this 上，需通过 this.$app 来取；挂在于 this.$def 上，才可通过 this.$app.$def 来取，二者不可混淆。
  1. // app.ux
  2. import device from '@system.device'
  3. const hook2global = global.__proto__ || global
  4. hook2global.$apis = $apis
  6. < script >
  7. export default {
  8. $deviceInfo: {},
  9. $xDeviceInfo: {},
  10. async onCreate() {
  11. this.$def.$deviceInfo = await this.getInfo()
  12. this.$xDeviceInfo = await this.getInfo()
  13. },
  14. async getInfo() {
  15. return new Promise((resolve, reject) => {
  16. device.getInfo({
  17. success: ret => {
  18. resolve(ret)
  19. },
  20. fail: err => {
  21. console.log(err)
  22. }
  23. })
  24. })
  25. }
  26. }
  27. </script >
复制代码
如上示例代码，在其他页面代码中，this.$app.$def.$deviceInfo、 this.$app.$xDeviceInfo 这两种调用方式是期待的写法；如果混淆调用，得到的结果则是 undefined。
而挂在于 global 的变量(如 $apis )，可通过 global.$apis 或直接 $apis 来调用；但如果在 DOM 结构中，不可直接使用，因为其默认主题是页面级 this，所以 Toolkit 编译出的结果就会是 this.$apis or this.global.$apis，如此就不能达到预期；在页面属性中定义声明下即可，如下代码示例：
  1. <script>
  2. export default {
  3. $apis: $apis // or global.$apis
  4. }
  5. <script>
复制代码
如何解决快应用 Input 失去焦点，输入法不收起来问题
目前(1050-)可以解决的办法是，在空白区域，添加事件，注入如下逻辑：
  1. this.$element('yourInputId').focus({focus: false})
复制代码
如何解决快应用 textarea 无法清空数据问题
快应用（version <= 1030）目前存在 textarea 无法清空数据问题，目前只能采取 Hack 的办法解决，即在需要清除时候 this.$delete 掉该绑定的值，onchange 回调中再通过 this.$set将数据属性添加回去，使得可以正常工作；
  1. <textarea onchange='handleChange' placeholder="{{placeholder}}" value="{{contentValue}}" id="keyborder"></textarea>
  2. <input class="input" type="button" onclick="onHandleBtnClick" value="处理"></input>
复制代码
  1. <script>
  2. export default {
  3. handleChange(response) {
  4. console.log(JSON.stringify(response, null, 2))
  6. // 以 Hack 的方式解决无法清空 textarea 输入数据@18-12-06;
  7. this.$set('contentValue', response.text)
  8. },
  9. onHandleBtnClick() {
  10. // Here ....... 处理你的数据；
  12. // 以 Hack 的方式解决无法清空 textarea 输入数据@18-12-06;
  13. this.$delete('contentValue')
  14. }
  15. }
  16. </script>
复制代码
快应用中如何使用「字体图标」
在应用中，可以使用字体图标如 icomoon，可以帮着有更好的方案来展示应用图标；在快应用中，可以直接在 dom 中使用，如下示例。但，对于定义在变量中的字体编码，则需要借助 unescape 做一层转换。
  1. <template>
  2. <text class="font-icon" style="font-size: {{fontSize}}px;">&#xe900;</text>
  3. <text class="font-icon" style="font-size: {{fontSize}}px;">{{ iconCode }}</text>
  4. <text class="font-icon" style="font-size: {{fontSize}}px;">{{ unescapeFontIconCode(iconCode) }}</text>
  5. </template>
  7. <script>
  8. export default {
  9. private: {
  10. fontSize: 100,
  11. iconCode: '&#xe900;'
  12. },
  13. unescapeFontIconCode(iconCode = '') {
  14. return unescape(iconCode.replace(/&#x/g, '%u').replace(/;/g, ''))
  15. }
  16. }
  17. </script>
  19. <style>
  20. @font-face {
  21. font-family: iconfont;
  22. src: url('./../../assets/fonts/icomoon.ttf');
  23. }
  25. .font-icon {
  26. font-family: iconfont;
  27. }
  28. </style>
复制代码
如何动态处理修改快应用样式
鉴于些原因快应用 hap-toolkit 打包，无法对逻辑代码进行处理；而快应用引擎内部，也没有对逻辑代码中样式做很好的兼顾；所以，当需要动态处理修改快应用样式时，你需要对涉及的代码进行转义处理，如下代码示例（备注：在 1030 版本，组件的 style 属性，支持直接绑定 Object 或 String）：
  1. <template>
  2. <div class="wrapper-padding" style="{{ styleObj }}">
  3. <text>如何动态处理修改快应用样式</text>
  4. </div>
  5. </template>
  8. <script>
  9. export default {
  10. protected: {
  11. styleObj: {},
  12. dynamicUrl: 'https://image.nicelinks.site/jpg/nice-links-039.jpg'
  13. },
  14. onReady() {
  15. this.styleObj = {
  16. backgroundColor: '#fe0',
  17. color: '#212121',
  18. backgroundImage: `${this.dynamicUrl}`
  19. }
  20. }
  21. }
  22. </script>
复制代码
至于为何要这么处理，可以参看开发时，build 目录下所打包后的代码，hap-toolkit 是对样式进行了处理，只要逻辑层的代码修改，跟打包后的样式处置保持一致，那么就可以实现动态处理修改快应用样式；如上代码中对 background-image 的设置，就是为了兼容快应用内部打包适配（此解决方案针对 1040 及以前版本，未知快应用何时修复）。
如何从外部打开快应用：
从外部打开快应用，可以是从一个快应用，打开另一个快应用；也可以是从网页上打开快应用；实现此共功能，可以使用快应用提供的 deeplink 接口，其语法格式如下：
http://hapjs.org/app//[path][?key=value] https://hapjs.org/app//[path][?key=value] hap://app//[path][?key=value]
具体参数说明如下：
package: 应用包名，必选; path: 应用内页面的 path，可选，默认为首页; key-value: 希望传给页面的参数，可选，可以有多个;
EG: hap://app/com.quickapp.nicelinks/?utm_source=quickapp-blog；
  1. <a class="link" href="hap://app/com.quickapp.nicelinks">打开倾城之链快应用</a>
复制代码
网页中打开「快应用」
嵌入如下 JS 代码：
  1. <script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/routerinline.min.js"></script>
复制代码
  1. <!-- 调起应用 -->
  2. <script type="text/javascript">
  3. // 无需用户确认的调用方式，xxx.yyy.zzz 为包名
  4. appRouter("xxx.yyy.zzz", "/Home", { paramA: 1, paramB: '2' })
  5. // 需要用户确认的调用方式，xxx.yyy.zzz为包名
  6. appRouter('xxx.yyy.zzz', '/Home', { paramA: 1, paramB: '2' }, '显示给用户的应用名称');
  7. // Eg: 比如跳转至「倾城之链」，路径只能为 `/`，因为在 manifest.json 中 router 配置为：pages/Home;
  8. appRouter('com.quickapp.nicelinks', '/', { utm_source: 'github' });
  9. </script>
复制代码
需要额外注意的是，你所要跳转的快应用，如果在 manifest.json 中对路由加前缀，需要使用 path 字段予以“修正”，否则使用 deeplink 功能时候，将不能很好的工作。
  1. "router": {
  2. "entry": "pages/Main",
  3. "pages": {
  4. "pages/Main": {
  5. "component": "index"
  6. // ✗ appRouter('com.quickapp.nicelinks', '/pages/Main' );
  7. // ✓ appRouter('com.quickapp.nicelinks', '/about' );
  8. "path": "/about"
  9. }
  10. }
  11. }
复制代码
如何解决快应用“莫名”报错
在开发快应用时候，有时会遇到些“莫名”报错提示，比如下面这样：
TypeError: Cannot read property ‘manifest’ of null at XPage.initMeta (:xxxx:yy)
从经验上看，由于些未知原因，导致程序出错，但没有给出具体错误原因，从而引起的抛出异常不精准（从错误提示上看，是因为在 initMeta 方法体中，某空对象调用了 manifest 属性）；但，引起该问题的根本原因，就很多，比如 hap-toolkit 升级打包出错，或者该页面初始化前的代码存在异常等，都有可能导致该问题；这时能做的就是：仔细检查下代码以及打包（在官方修复之前）。
打包工具相关 如何升级 hap-toolkit 从 <0.0.38 至最新：
  • 将本地 hap-toolkit 升级至新版本如 0.2.0: yarn upgrade hap-toolkit@0.1.0;
  • 运行 npx hap update --force 命令将本地配置升级（会新建 package.json, 原文件成 old package.json）;
  • 手动将 old package.json 中的自己的额外配置，同步至新的 package.json；
  • 将本地的 node_modules 和 package-lock.json: rm -rf node_modules;
  • 重新安装依赖即可：重新运行 yarn or npm i;
如何为快应用设置别名(alias) 在已有项目根目录下创建 config 文件夹，并在该文件夹下添加 webpack.config.js,然后注入类似如下代码即可：
  2. const path = require('path')
  4. module.exports = {
  5. postHook: function(webpackConf, options){
  6. const alias = Object.assign(webpackConf.resolve.alias || {}, {
  7. '@components': path.join(process.cwd(), 'src/components')
  8. })
  9. webpackConf.resolve.alias = alias
  10. }
  11. }
复制代码
如此，对于 import 自定义组件或方法，就会得到优化，而不用费神去关心相对路径（需要提醒的是：因为快应用现有设计缘故，别名不能作用于 Dom 结构以及 style）；
  1. <import name="HellorWorld" src="./../../components/HellorWorld"></import>
  2. // 为快应用注入别名(alias)之后的写法
  3. <import name="HellorWorld" src="@components/HellorWorld"></import>
复制代码
悲莫悲兮生别离, 乐莫乐兮新相知。 https://nicelinks.site
回复

使用道具 举报

王小鱼

0

主题

2

帖子

10

积分
2019-10-9 21:25:42 显示全部楼层
这个别名的原理是什么？为什么定义名为postHook的方法呀
回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册