开篇:小程序之光-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自定义插件(实战)
相关推荐
牛仔只喝牛奶15 小时前
多端跨端技术选型:小程序 + H5 + App 的两栈拆分落地
react native·react.js
wear工程师18 小时前
setState 到底是不是异步的?这题从 React 16 问到 18,标准答案早就变了
react.js·面试
wanghowie20 小时前
LangGraph4j 落地(二)— ReAct 多步工具与 trace 扩展
前端·react.js·前端框架
csj5021 小时前
前端基础之《React(11)—state声明式》
前端·react.js
张元清1 天前
React useLocalStorage Hook:SSR 安全的持久化状态(2026)
javascript·react.js
析数塔1 天前
2026前端框架深度解析:React Compiler、Angular Zoneless、Vue 3.5重写游戏规则
前端·vue.js·react.js
杖雍皓1 天前
没有服务器如何构建现代 Web 应用:平台选型与组合策略
运维·服务器·前端·react.js·github·netlify·vercel
sun_weitao1 天前
微前端框架之qiankun 怎么用?vue3+vite+qiankun 和 react + qiankun
前端·react.js·前端框架
名字还没想好☜2 天前
React useEffect 依赖数组踩坑:闭包陷阱与清理函数
前端·javascript·react.js·react·useeffect
我是大卫2 天前
【图】React源码解析-第四部分:事件与跨层传递
react.js·源码