快应用初探

news/2024/7/10 0:34:29 标签: 快应用横屏, npm install, nodejs, vue

目录

1.快应用VS微信小程序... 1

2.准备工作... 2

3.安装快应用开发工具... 2

4.建立第一个快应用demo. 3

5.编译... 4

6.快应用签名... 5

生成签名文件的方法... 5

加入签名文件... 5

Release build. 5

7.快应用如何横屏?... 6

8.快应用的本地日志log. 6

9.快应用如何更新... 6

10.关于快应用上传手机厂商... 7

 

 

1.快应用VS微信小程序

在研究快应用之前首先在网上找了一些关于快应用和小程序的比较信息,总结如下:

  • 二者都采用前端技术栈,快应用是native 渲染,性能体验会比较好,而小程序目前是webview渲染
  • 开发环境:快应用需要自行安装配置一系列环境及调试工具,而小程序只需一个开发者工具即可,这一点小程序胜。
  • 开发体验:快应用的语法和vue很像,而小程序有着自己一套语法规范,相对来讲,快应用会更容易上手。
  • 程序包大小:小程序4M,快应用1M,这一点确实有点局限,但小程序也是从1M变成4M的
  • 能力:小程序和快应用在安卓端都可以添加快捷方式到桌面,但不同的是,快应用属于系统级应用,与微信同级,能调用更多系统级API,体验上会更优于小程序,这一点是后者所不能比的。
  • 其他:小程序上架发布流程较为简单,快应用需要逐家关联开发者权限,这方面有点捉急...不过对于企业账号已有的安卓渠道来说,也没什么门槛。
  • 各厂商的流量扶持
  • 快应用具有免安装、免存储、一键直达、更新直接推送四大体验优势,快应用将使用户通过手机更容易获取到自己所需的服务。
  • 快应用不像微信小程序,并不支持浮动float布局,也不支持grid布局,只支持flex布局。如果你不清楚flex布局的,推荐你看一下阮一峰的flex布局的教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
  • 快应用里的CSS是间接用原生渲染实现的,所以并不支持web css全部属性,常见的不支持:box-shadow、overflow、letter-spacing、position的relative和absolut、transition、nth-child选择器、hover选择器
  • 快应用position只支持fixed属性
  • 快应用的px和网页的px不是同一个东西,快应用的px是这样定义的

快应用750px = 网页100%width ,而微信小程序750rpx = 网页100vw,两者都能很好地完成页面宽度自适应

2.准备工作

在安装快应用开发工具之前首先要确保环境变量里已有 nodejs, npm, openssl 的路径。如下图

其中,Nodjs, npm 是快应用编译的必备工具,如果环境变量里没有这些路径,可能没有安装,则需要先安装nodejs,具体安装步骤可参考

https://www.cnblogs.com/jianguo221/p/11487532.html

 

而Openssl 是用来制作release 签名的必备工具

openssl安装可参考

https://blog.csdn.net/qq_39081974/article/details/81059022

 

3.安装快应用开发工具

安装工具可以到官方网站上下载对应的版本

https://www.quickapp.cn/docCenter/IDEPublicity

安装完后,工具栏里会有 “QuickAppIDE

 

4.建立第一个快应用demo

点击打开QuickAppIDE后,点击左上角 “文件”—>“新建快应用工程”,然后在如下弹出框中填好响应的工程信息,点”完成”即可

 

 

5.编译

工程建好后,如果直接在终端运行“ npm run build”, 则会提示如下错误

Error: Can't resolve 'babel-loader' in xxx

项目所依赖的包“babel-loader”没有找到

遇到这种情况最好执行 “npm install”, 把项目依赖的包全部下载下来。

如果只是针对 “babel-loader” 去“npm install babel-loader –save”, 下次build还可能提示确少其他依赖包。

所以索性“npm install” 把所有要依赖的包全部下载下来。

Install完毕后会发现根目录下多了两个目录node_cache, node_modules,如下图

 

然后再去执行npm run build, 则提示编译通过,如下图:

而右边的本地预览,也会展示出一个示例页

同时到根目录下dist目录下就会发现对应的rpk文件。

因为默认是debug模式下的编译,所以这个rpk文件是debug 模式的。如果要想生成release rpk, 则需要自己生成release 签名文件。

 

 

6.快应用签名

生成签名文件的方法

在cmd命令行执行下面命令

C:\Users\xfgf>openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem

根据提示键入响应的信息

生成完后,到对应的目录下可以找到  private.pem ,certificate.pem

 

加入签名文件

到快应用工程根目录下找到sign目录, 我们会发现里面已经有个debug签名文件目录, 在同一目录下创建一个“release”目录,然后把前面生成的签名文件copy到“release”目录下

 

Release build

终端根目录下,运行命令“npm run release”进行release编译

编译成功后可在sign 目录下找到对应的xxx.release.rpk文件,这个文件可以用来上线发布

 

 

7.快应用如何横屏?

很多游戏界面需要横屏显示,这是就需要app打开时直接横屏且全屏,像原生app, manifest.json 配置文件里可以用来配置这些信息

 

8.快应用的本地日志log

在调试快应用时经常要用到log,js代码里可以调用 console.log(“”), 或者console.error(), cosole.info(), console.warn() 等。

但是在第一个工程使用时遇到过以下错误

error: Unexpected console statement (no-console) 

解决方案:

  1. 按照网上的方法,到 package.json 里面,添加 no-console: off (如下图), 然后重启快应用IDE,还是会报这个错误

 

  1. 于是又找了第二种方案

原因:Vuejs - 使用ESLint检查代码质量

解决:打开项目根目录找到:\node_modules\eslint\lib\built-in-rules-index.js  然后搜索 no-console 将这段代码后面的 require("./rules/no-console"), 直接修改为:"off", 即可!

同时manifest.json 里面的“logLevel”:“off”,改成LogLevel:“debug”

然后重启IDE编译,console调用 没有再报错, 这里第二种方法是好使的。

9.快应用如何更新

快应用想要升级时需要在快应用官网提交rpk,写更新日志,审核过了,用户那边下次用的时候就自动更新了,不需要你自己检测升级。

10.关于快应用上传手机厂商

涉及支付需要提供《计算机软件著作权证书》或《APP电子版权证书》 + 《免责函》

 


http://www.niftyadmin.cn/n/1642213.html

相关文章

qt ip地址截取前三个点_递归回溯复原IP地址

一句话经验There is no coming to consciousness without pain.没有任何一种觉醒是不带着痛苦的一、题目描述93. 复原IP地址放轻松&#xff0c;虽然是c实现&#xff0c;拒绝奇技淫巧&#xff0c;通俗易懂。class Solution {public: vector<string> restoreIpAddresses…

快应用 fetch接口无法直接获取到网络数据的解决方法

最近开发快应用app时遇到一个奇怪问题&#xff1a;fetch.fecth在开发工具QuickAppIDE “本地预览”时&#xff0c;返回的data数据是正常的&#xff1b;而远程真机就无法直接获取&#xff0c;data内容不是json数据&#xff0c; 而是“internal://cache/action-xx.do”的字符串&…

java多模块怎么引入_理解Java中的SPI机制

SPI简介SPI全称是Service Provider Interface&#xff0c;可称之为“服务供给接口”&#xff0c;是JDK内置的一种服务提供发现机制&#xff0c;其实这个确切地说是一种思想&#xff0c;并不是Java独有的专利。谈到SPI不得不提的一个概念就是“面向接口编程”&#xff0c;SPI通过…

快应用如何使用storage存储数组

在快应用开发中遇到需要保存数据到本地的需求。在查看快应用开发文档时&#xff0c;发现存储方式只有数据存储和文件存储&#xff0c;而数据存储只有system.storage 方法&#xff0c;且存储的数据类型只有String类型。不像android原生开发中&#xff0c;除了文件存储&#xff0…

偏差正负值什么意思_两战正负值仅-31!狼队状元对比锡安太难堪,甚至不如本内特?...

北京时间12月15日&#xff0c;森林狼在对阵灰熊的季前赛第二场比赛中以104-123不敌对手&#xff0c;而在季前赛中最值得关注的毫无疑问就是森林狼阵中2020年状元秀安东尼-爱德华兹的表现。在这场比赛中爱德华兹替补出战26分钟仅有14投4中(三分7中1)得到12分4篮板和2助攻&#x…

原生app签名如何转换成快应用签名

在对接快应用微信支付时发现&#xff0c;快应用微信支付申请使用的包名和签名须是某个原生app的包名和签名。 参考文档截图如下&#xff1a; App 微信支付申请时需要填入的包名、签名截图如下&#xff1a; 可见快应用微信支付的申请是按一个原生app的方式申请的。包名还好&…

good-turing平滑方法评价_学习 | 什么是织物风格?怎么分类?怎么评价?

织物的风格与评价一、 织物风格的概念广义&#xff1a;织物本身所固有的性、状作用于人的感觉器官所产生的综合效应。(触觉、视觉、听觉)广义织物风格包括触觉风格&#xff1a;以手触摸织物时产生的感觉来衡量织物的特征&#xff0c;即手感&#xff0c;亦称为织物的狭义风格。视…

color属性 python_Python多继承的坑与MRO C3广度优先算法

前言继承&#xff08;英语&#xff1a;inheritance&#xff09;是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A&#xff0c;就把这个B称为“A的子类”&#xff0c;而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性…