开篇:小程序之光-Taro

序言

作为Taro专栏的第一篇文章,想先抛出一个问题:大家相信"光"么?相信看过奥特曼的同学一定对"泰罗"很熟悉,他是宇宙警备队总教官,实力最强的奥特曼。那么在小程序的世界里,Taro就是"光"的存在

小程序的发展史

专栏文章还是想从头开始介绍,如果对这部分历史不感兴趣的话可以直接跳过(不影响对后面内容的分享),如果有兴趣的话可以听我简单聊一聊

第一个吃螃蟹的人

在2017年1月9日的凌晨,微信正式推出了小程序,作为新形态的业务模式,允许第三方在微信内注册自己的应用,通过微信APP调用手机的原生功能。这种模式一经推出就吸引了大量的第三方公司入驻,包括一些很有名气的互联网公司,繁荣了微信的生态圈

五花八门的小程序

有了第一个吃螃蟹的人,后续其他公司也相继模仿学习推出了具有自家公司特色的小程序平台,五花八门的小程序使用手册也相继推出。这个时代就像当初的浏览器大爆发一样,缺点也很快暴露出来:没有明确的小程序开发规范,各个平台的API用法和兼容性都需要学习,对开发人员来说,大大增加了学习和使用成本

未来前景

但是尽管成本提高,但是小程序的这一业务形态一直在蓬勃发展,为什么小程序会越来越受欢迎,我认为可以从两个视角去看待分析:

  1. 从用户的视角
  • 触手可及,在常用APP内直接操作,不需要来回切换APP,提高操作频率和效率
  • 用完即走,无需下载安装,不需要花时间熟悉其他的APP,降低使用心智
  1. 从企业的视角
  • 基于用户基数非常大的APP,实现最小成本的用户挖掘
  • 借助小程序拉起小程序、小程序拉起APP的功能,实现用户引流
  • 相对于审批限制很多的应用市场(APP Store),小程序的使用更加简单方便,版本更新迭代的审核也更快

跨框架解决方案-小程序之"光"

Taro的目标

编写同一套代码,在编译时抹平各端差异,从而提升开发效率,降低开发成本

项目初始化

  • 全局安装Taro脚手架工具(推荐使用yarn进行安装)
Bash 复制代码
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
  • 使用taro init进行项目搭建,按照实际需要选择项目基础配置即可

下载安装开发者工具

  • 这里以"抖音开发者工具"为例,想试用的话可以直接点击链接下载安装

  • 登陆开发者工具,可以直接通过抖音APP扫描二维码登陆

  • 点击"新建",然后选择导入已有项目

选择项目目录,然后会自动带出Taro初始化项目时定义的项目名称。如果本身没有AppID,只是想开发小程序的话,可以选择使用"测试号",最后点击"导入"即可

启动Taro项目

注意这个时候需要打开两个编辑器,一个是VSCode,里面是原生的Taro初始化项目;另一个是开发者工具,可以实时看到Taro项目编译后的产物

其实大部分的开发操作都是VSCode进行,本地使用yarn dev:tt来启动开发环境(这里还是以抖音小程序为例,其他小程序参考Taro的启动命令)

js 复制代码
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"

后面会陆续分享:

  • 常见的Taro项目配置
  • Taro组件库推荐
  • Taro自定义组件
  • Taro引入第三方工具库的注意问题
  • Taro的跨端编译原理
  • Taro自定义插件(实战)
相关推荐
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
疯狂的沙粒3 小时前
如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!
react.js·typescript
鑫宝Code3 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
沉默璇年12 小时前
react中useMemo的使用场景
前端·react.js·前端框架
红绿鲤鱼14 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
loey_ln16 小时前
FIber + webWorker
javascript·react.js
zhenryx16 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
老码沉思录20 小时前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
沉默璇年1 天前
react中Fragment的使用场景
前端·react.js·前端框架
GISer_Jing1 天前
React渲染流程与更新diff算法
前端·javascript·react.js