资讯专栏INFORMATION COLUMN

试用期第一周---快应用初体验

greatwhole / 2817人阅读

摘要:各大手机厂商意识到了危机,于是八大厂商联合起来推出了快应用,意图从微信小程序的围剿中杀出一条血路。而且用户是否愿意放弃都在使用的微信,而转入投入未知的快应用,也是一个问题。

    因为微信的普及,微信小程序得到极大的推广,从刚开始的受人诟病,到如今的每个公司人手一个微信小程序。各大手机厂商意识到了危机,于是八大厂商联合起来推出了快应用,意图从微信小程序的围剿中杀出一条血路。这里就是我对
快应用的一些简单的理解。

快应用的优劣

    快应用的优势:原生程序对于一些用户来说操作繁琐,需要下载安装等一系列操作,用户体验并不是很好,而web应用那更不用说了,体验、速度、功能都比不上原生,我宁愿下载安装都不愿意用web。而快应用实现了无需安装,即点即用提高了用户的体验效果。在速度的方面上,各大厂商在其平台上支持了各类的系统接口,基本接近原生的程序,提高用户体验。并且十大手机厂商拥有非常大的用户基数,这会给我们带来足够的流量。

    快应用的劣势:微信小程序已然渗透进各个行业,快应用的这些优势能否让各个公司将工作重点和精力投入到这里边,仍然是个问题。而且用户是否愿意放弃都在使用的微信,而转入投入未知的快应用,也是一个问题。还有一个问题就是如今的快应用只支持安卓,那苹果的部分是不是有需要人去支持,是不是又加入一定的劳动成本。

环境搭建

创建项目前我们先需要使用tookit工具用于管理项目和手机调试器用于预览效果
pc端使用

    npm install -g hap-toolkit

用于安装toolkit,电脑端可以使用

    hap -V

用来检测toolkit是否安装成功。
手机调试器截图如下:

可以看到我们调试程序有两种方法,第一种扫码下载,第二种将生成的rpk文件传到手机,然后手机手动找到rpk文件,然后安装。扫码安装的优势在于可以高频率更新代码,但是需要让电脑和手机在同一局域网。本地安装的优势在于更快,扫码安装稍微大点的文件需要特别长的时间。还有个问题就是在于如果使用本地安装你需要知道自己安装包在哪儿,不然到时候找安装包特别麻烦。

项目初始化

hap是快应用配置的一个脚手架工具,其中项目创建,启动,和发布都离不开他,首先建立项目使用

    hap init 

启动项目后我们就可以进入项目,看看目录结构,下面是他的目录结构截图

node_modules文件夹是我们通过使用

    npm install

安装所需要的依赖,这里我们来看看package.json文件的scripts的内容

 "scripts": {
    "server": "hap server",
    "postinstall": "hap postinstall",
    "debug": "hap debug",
    "build": "hap build",
    "release": "hap release",
    "watch": "hap watch"
  },

可以看到的是他的脚本命令包括: server,postinstall,debug,build,release,watch。

这几个分别的意义代表启动HTTP服务,转换Nodejs模块文件,启动调试环境,编译打包,发布程序,监听文件变化后编译。
在看看src/manifest.json文件的内容。

icon代表程序保存到手机上呈现的图标,features代表在本app中所需要使用到的模块,例如在本文件中,我们需要使用的就有三个模块prompt,router,shortcut,分别代表弹窗、路由跳转、桌面图标。注意,如果我们不在这儿提出来,那么在程序中我们就无法使用这些模块config中logLevel用于日志的显示级别。在来看router的配置,entry代表入口文件,pages就是每个页面,每个页面入口文件用component进行配置。这些看英文都能看懂啥意思,menu用于展示是否显示右上角的菜单栏是否显示,pages用于表示每一页多带带的配置。
在看看src/uils.js中的内容,下面是一个函数showMenu的代码

function showMenu () {
  const prompt = require("@system.prompt")
  const router = require("@system.router")
  const appInfo = require("@system.app").getInfo()
  prompt.showContextMenu({
    itemList: ["保存桌面", "关于", "取消"],
    success: function (ret) {
      switch (ret.index) {
      case 0:
        // 保存桌面
        createShortcut()
        break
      case 1:
        // 关于
        router.push({
          uri: "/About",
          params: {
            name: appInfo.name,
            icon: appInfo.icon
          }
        })
        break
      case 2:
        // 取消
        break
      default:
        prompt.showToast({
          message: "error"
        })
      }
    }
  })
}

prompt和router模块在前面已经提到,具体的api可看源码,app这个模块代表这个app的一些基本信息,getInfo()用于获取这个app的基本信息,在这里调用了showContextMenu()方法,用于展示弹窗的一些信息,后边的自己也能看明白,就不一一介绍了。
以我接触最多的vue来说,这个快应用的写法和vue和类似(哈哈,看来vue真的简单好用),在来看看src/Demo/index.ux文件





可以看到和vue的写法没什么两样,这个就是private可能有点差异。代码怎么写就介绍到这里。
在src/app.ux里边我们可以看到这样的代码:

如果所有的文件要共享方法,那么就需要在app.ux中加入,然后如果我们需要在文件中使用这些方法,就像下面这么写:

    this.$app.$def.showMenu()

可以看到我们就使用了showMenu()这个方法。

调试环境

说实话,如今快应用没有微信小程序调试起来这么方便,但是咱们还是利用可以利用的资源来进行调试,首先启动服务:

    npm run server

然后我们就可以得到下面的截图:


然后使用手机的调试器进行扫描安装,然后点击开始调试,如果你安装了chrome浏览器,打开Localhost:12306,也可以看到刚才那个二维码,一旦手机开始调试,咱们就可以利用chrome devtools进行辅助调试了,美滋滋,可比手机调试好用多

如果熟悉mvvm框架的写法,相信这个对你应该没什么难度,难度可能在于这个快应用是未知的,咱们可能会遇到各种各样的坑,所以任重道远,一起努力。等我试了一下,在把我遇到的坑讲出来

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95676.html

相关文章

  • 一个小时速搭建微信小程序

    摘要:第一步搭开发环境首先,我们需要在本地搭建好微信小程序的开发环境。在微信小程序中,所有的网络请求受到严格限制,不满足条件的域名和协议无法请求。第五步配置微信小程序云端示例镜像中,已经部署好了,但是还需要在下修改配置中的域名证书私钥。 「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试。可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面)。本以为没有...

    izhuhaodev 评论0 收藏0
  • 一个小时速搭建微信小程序

    摘要:第一步搭开发环境首先,我们需要在本地搭建好微信小程序的开发环境。在微信小程序中,所有的网络请求受到严格限制,不满足条件的域名和协议无法请求。第五步配置微信小程序云端示例镜像中,已经部署好了,但是还需要在下修改配置中的域名证书私钥。 「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试。可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面)。本以为没有...

    Aldous 评论0 收藏0
  • freeline 速入门 - 体验

    摘要:性能方面内部采用了类似的开源工具的多工程多任务并发思想并对代码及资源编译流程做了深入的性能优化。或者使用命令编译部署就不会出现问题最后的建议是如果集成了环境,就请使用来编译。如果想,最好去掉的集成,别作哦 本文环境 android studio 2.1.2 window 国外 vpn...............如果你不能连上国外的网站,请老老实实买一个 vpn 介绍..........

    draveness 评论0 收藏0
  • 转行软件测试两个多月,感觉很迷茫,下一步该如何提高自己?

    摘要:入行才两个多月,迷茫是正常的,千万不要着急。你才干两个多月呢,先放平心态不要着急。第一了解软件测试各级别岗位要求,确定发展方向。 首先,你选择软件测试这个岗位是非常...

    vspiders 评论0 收藏0
  • 我们是如何设计 Golang & SQL 引擎课程的? | Talent Plan 背后的故

    摘要:方向课程内容作为一个支持协议,以某种支持事务的分布式存储引擎为底层存储的引擎,主要需要处理与客户端的交互,在底层存储引擎中存取数据,以及实现功能。课程设置上分为两个方向,分别是面向引擎的方向和面向大规模一致性的分布式存储的方向。 作者:谢海滨 在 上篇文章 中我们介绍了 PingCAP Talent Plan - TiKV 方向的课程内容,本文将从课程设计的角度和大家聊一聊 TiDB ...

    曹金海 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<