开篇:小程序之光-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自定义插件(实战)
相关推荐
阿伟来咯~18 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端23 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱25 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
September_ning6 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人6 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0016 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
Rattenking8 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
熊的猫9 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
小牛itbull14 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress