开篇:小程序之光-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自定义插件(实战)
相关推荐
哑巴语天雨9 小时前
React+Vite项目框架
前端·react.js·前端框架
初遇你时动了情9 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js
码农老起10 小时前
掌握 React:组件化开发与性能优化的实战指南
react.js·前端框架
前端没钱10 小时前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js
高山我梦口香糖13 小时前
[react] <NavLink>自带激活属性
前端·javascript·react.js
撸码到无法自拔13 小时前
React:组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
高山我梦口香糖13 小时前
[react]不能将类型“string | undefined”分配给类型“To”。 不能将类型“undefined”分配给类型“To”
前端·javascript·react.js
乐闻x16 小时前
VSCode 插件开发实战(四):使用 React 实现自定义页面
ide·vscode·react.js
irisMoon0616 小时前
react项目框架了解
前端·javascript·react.js
web150850966411 天前
【React&前端】大屏适配解决方案&从框架结构到实现(超详细)(附代码)
前端·react.js·前端框架