快应用开发漫谈-部署与调试

本文介绍了快应用的开发环境配置,包括编辑器选择、基本的Node.js和Atom安装,以及配置文本编辑器。在调试过程中,文章讨论了在线更新和上传时可能遇到的问题及解决方案,如adb调试和日志查看。此外,分享了作者从Android开发转向快应用开发的体验,并鼓励开发者参与快应用生态建设。

本文作者:kfdykme

基本配置

 

我ubunt是18.04,当然这并不重要,应该说我的系统是ubuntu。环境配置就是很正常的安装一些东西就好了。

 

目前快应用有官方IDE,看上去是基于vscode的,并且支持Mac、Windows、linux三个版本。也可以使用以下编辑器:

 

· sublxxx(一看我名字都记不住就知道我不喜欢用这个)

· vscode (安装快应用对应的插件)

· webstorm(好像没有免费版,我就没用了,JetBrains牛逼~~)

 

首先 安装 node

 

然后 再安装 atom

 

配置一下文本编辑工具

 

打开atom

 

--> 菜单栏Edit

--> 选择Preferences (window下可能是File->Settings)

--> 点击按钮Open Config Folder

--> 打开文件config.cson

 

配置对ux文件的语法高亮

 


 
"*":	
  core:	
    customFileTypes:	
      "text.html.basic": [	
        "ux"	
      ]

 

然后随意弄一下UI theme和Syntax theme

 

我的配置完之后是这样子的

640?wx_fmt=png

 

然后就算很正常的npm install -g hap-toolkit

 

可以选择装一个emmet插件辅助自动补全

调试问题

 

1、无法在线更新

 

一开始的时候遇到过无法在线安装的问题,后来发现不止是快应用,其他用wifi调试的类似开发方式有时也会遇到。这里的其他开发方式指的是Ionic的Ionic DevApp和React Native的Expo。这两者也是在手机上运行了一个'容器',方便实现热加载,利用chrome dev tool进行调试等。

 

言归正传,快应用调试的时候运行


 
npm run server

会生成一堆东西:

640?wx_fmt=png

 

这里生成ip地址不一定是对应的本机的地址(当然我图中的是正确的)。

 

如果电脑上装了虚拟机/docker/其他容器,这里的服务器地址有可能会是虚拟机的网卡的ip,同时二维码对应的也是虚拟机的ip,这样扫码是不能在线更新的(因为连不上)。

 

如果扫玛一直扫不出来的话,可以考虑换一个命令行终端。比如我之前用Win10的cmd.exe的时候就不像一个二维码(顺手安利一波cmder)。

 

当然直接手动输入地址也是ok的。

 

在这里顺带感谢一下在我遇到这个问题时群里通过ip地址看出是虚拟机ip的那个大哥。

 

ps:这个问题在官方支持usb调试之后就与我绝缘了。

 

2、无法上传

 

在调用快应用的系统能力之网络之上传时,有可能会发生这样的错误

 

640?wx_fmt=png

 

代码是这样子的:

 


 
import request from '@system.request' //正常的导入	
/**	
 * 正常的使用	
 */	
request.upload({	
  url : "http://",	
  files : o.files,	
  data : o.data,	
  method:"POST",	
  success : onSuccess,	
  fail: onFetchFail	
})

 

这通常是发生在开了调试工具的时候,一边进行调试一边上传就会报错:

 


 
发生了错误: 1000	
Stream Closed

处理方法:

 

这时候只需要拔掉你的usb线,再次上传,一切ok。

 

其实就是退出调试模式,单纯运行快应用。

 

如果想要查看上传过程中的log的话可以使用adb。

adb调试快应用

 

鉴于快应用开发的应该是前端的同学,可能不太了解adb是什么adb = Android Debug Bridge ,android开发可能会用得比较多一点。

 

一般想要配置adb的话,下载一个android sdk tool就好了(把整个androidt stuido下载下来也是可以的),然后配置环境变量, 一般adb是在


 
$ANDROID_SDK_HOME/platform-tools/

这个目录下。

 

有时候不想打开chrome-dev-tool,只想在命令行查看log,就可以使用

 

 


 
console.info('你的log')	
// 好像需要console.info()才可以	
// console.log()的日志不能被下面的命令抓取	
//(记得不清+不想做实验了)

然后在命令行输入:


 
adb logcat | grep JsConsole

adb logcat是读取手机运行的日志,快应用运行的日志自然也包含在里面。

 

然后使用grep JsConsole进行筛选。之所以用JsConsole,是因为我目测得出快应用引擎(无论是官方的快应用预览器还是厂商自己的快应用引擎) 都是这个tag。

 

windows同学没有grep命令的话......可以使用windows上支持bash的终端工具。

 

最近在ubutn上 adb有时会与npm run server冲突,需要关掉其中一个(或者会自动帮你关掉其中一个)

一些闲(fei4)话

 

比起前端开发,我更加熟悉的可能是android端的开发。虽然也大概清楚前端开发是怎么一回事,但是完完整整地用标记语言+js+css开发一个东西的经验并不是很多。所以如有错漏的,不专业的地方(后续会很多)请轻喷。

 

同时最近忙成狗,如果有些内容已经有人指出了,如有巧合纯属雷同,啦啦啦啦啦啦。

 

在年初的时候学长让了解一下快应用和flutter,然后被flutter的语法劝退之后尝试写起了快应用。想着当时微信小程序封测的时候也对小程序浅尝辄止了一番,但是那时候由于种种原因一直在AIDE上写app,也就没机会没能力继续接触。

 

刚好快应用出来,想着有机会从初期接触一个框架,然后了解这个东西是怎么一步步完善起来的,于是决定踩坑。

 

写在最后

在去年的开发者大赛征文中,我们通过多个社区联合活动收集了很多优质文章,有入坑指南、开源项目、开发模板、常见问题总结等多个方面,这些内容为很多开发者提供了参考,感谢大家的支持和参与,今年的我们的征文活动还在继续,感兴趣的开发者可以点阅读原文查看详情哦!

 

快应用生态平台

赋能开发者 

拓展场景未来

640?wx_fmt=jpeg

快来关注我们吧

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值