半个月前,公司发来了一个新的需求,为当前的CRM系统做移动端App。于是作为公司“技术探索者”的我理所应当得接下挑战,负责学习并传授组内其他人员。本文主要是环境搭建、后端过渡到前端、移动端开发注意事项等个人经验分享,并不专业,如有纰漏还望指正。
当前的主流的移动端跨平台方案中,Flutter
、React Native
、uni-app
占据着主要地位。最后一位uni-app
他的主战场更多的是小程序,在安卓、IOS的性能上不如前两位。
对比 | React native | Flutter |
---|---|---|
学习成本 | 容易 | 困难 |
性能 | 高 | 更高 |
热修复 | 原生支持 | 需要其他框架 |
厂商 | Face Book |
因为是我们组主要是后端人员,前端的Web开发略有了解,对性能要求不是很高,所以选择了前者
环境选择Windows
、Android
官方地址:
英文水平不是很好的情况可以选择国内站,缺点是更新可能不是很及时
按照官方的教程,基本不会出现什么卡顿
Node
版本来到了11 在后续会出现一些意料外的错误解决方案:推荐使用16 这个大版本
解决方案:①修改
Gradle
的仓库位置②修改模拟器路径
路径: C:\Users\{user}\.android\avd
avd.ini.encoding=UTF-8
# 原来位置是C盘
path=D:\RNpackage\sim\Pixel_6_API_34.avd
path.rel=avd\Pixel_6_API_34.avd
target=android-34
Node
:相当于Java
的JDK
npm
: 类似Maven
如果上述一切正常,你就会得到如下一个界面
在进入正式开发之前,还需要补充一些前端 + 移动端的基础
ES6
全称ECMAScript2015
,是JS
的版本,至于为什么单独强调这版本,这就像JDK8
一样。了解更详细内容推荐阮一峰老师的ES6 入门教程
以下列举几个常用的特性
var
是在刚学前端时常用的命令,由于一些作用域的问题,会出现一些难以预料的Bug。let和const的出现很好的解决了问题,前者是局部的变量,后者是局部的常量。在开发中避免使用var
在后端开发中,相对应的就是拉姆达表达式。这里更为常见,是可以规避一些问题。
对于只接触一点前端开发的我们,完全没有想过
JS
中还有类,声明方式也是用class
,即使他不是在ES6中才有的。
一个新技术的出现,必然是为了弥补前者的不足。在JS
中,在类型方面,我们称之为弱类型。
代码样例:
var x = 1;
x = "2"; // 不会报错
如果这样,会使在执行过程中出现意外的错误。TypeScript
就是为了解决弱类型才引入(还又一些其他扩展,不过多介绍)。
以上换成后者的写法:
let x: number = 1;
x = "2"; // 报错 x 类型为`number`,不能转成 `string`
React Native
的语法,大多数还是按照React
的规则来使用的。所以如果又后者的开发经验,前者不会又太多问题。React
的思想就是All in JS,所以我们能够在代码中看到,一个文件中,HTML标签、CSS样式,JS脚本都用JS的形式来表示。由此产生了一种新的文件类型,叫做JSX
。
JSX可以理解为JS的扩展类型,由React提出,后续在其他框架也可以看到使用。TSX就是TS(TypeScript)的扩展。
移动端的页面跳转,像是一个栈,每次点击一个页面会压栈/替换。上一个页面不一定要消失,也许会堆叠在一起
让后端同事从0开始做,能明显感受到前端工程化所带来的挑战与不适,如果不是公司实在没任务了,也不会鬼使神差的来做这个。目前两周过去了,每一次敲代码都要来自网上的资料。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。