微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序》（笔记4）支持React.js语法的Taro框架

Taro的编写代码方式和mpvue、WePY框架最大的一个差别就是，Taro并不是基于Vue.js的语法规范，而是遵循React语法规范，它采用与React一致的组件化思想，组件生命周期与React保持一致，同时支持JSX语法，让代码具有更丰富的表现力，使用Taro进行开发可以获得和React一致的开发体验。

采用Taro开发小程序具有以下的优秀特效：

支持使用npm/yarn安装管理第三方依赖
支持使用ES7/ES8甚至更新的ES规范，一切都可自行配置
支持使用CSS预编译器，例如Sass等
支持使用Redux进行状态管理
支持使用Mobx进行状态管理
小程序API优化，异步API Promise化等等

和mpvue、WePY项目一致，使用Taro开发项目，首先也要安装合适的npm和Node.js环境。

（1）Taro项目的开发需要安装专用的Taro开发工具@tarojs/cli，可以使用如下命令全局安装，安装效果如图11-2所示。

npm install -g @tarojs/cli

图11-2 安装Taro

（2）安装成功后，可以使用taro -v测试安装是否成功，效果如图11-3所示，此时可以进行taro项目的开发。

图11-3 安装成功

（3）在项目文件夹中使用如下命令创建Taro小程序，效果如图11-4所示。

taro init myApp

图11-4 使用taro创建项目

项目创建过程中会自动创建git环境并且使用cnpm install命令安装依赖，所以在创建项目成功后不需要手动在该项目程序中使用npm install或者是cnpm install安装依赖，即可直接使用。

注意：npm 5.2以上也可在不全局安装的情况下使用npx创建模板项目，使用“npx @tarojs/cli init myApp”创建项目。

在项目文件夹中自动生成的文件结构，如图11-5所示。因为已经使用了npm安装，所以直接可以运行。

图11-5 文件结构

（4）创建新的项目后，可以使用如下命令运行微信小程序，如果更改文件中的代码，会自动重新加载，效果如图11-6所示。

# npm script$ npm run dev:weapp$ npm run build:weapp# 仅限全局安装$ taro build --type weapp --watch$ taro build --type weapp

图11-6 自动监听改动，并且重新加载

微信小程序的结构化开发方法，少走弯路，高效开发，一起来学习《微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序》吧。

微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序》（笔记4）支持React.js语法的Taro框架相关推荐

基于 uni-app 和 uni-cloud 小程序项目开发实战
基于 uni-app 和 uni-cloud 小程序项目开发实战前言一.技术栈二.环境搭建三.项目功能介绍 1.地图地点搜索及路线规划 2.uniCloud服务空间 3.AI识图 4.上拉框组 ...
【系】微信小程序云开发实战坚果商城-开篇
开篇:无服务开发是未来? 目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小 ...
【系】微信小程序云开发实战坚果商城-云开发之订单品数据实现
第 3-9 课:云开发之订单品数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
【系】微信小程序云开发实战坚果商城-商城项目搭建
第 2-1 课:商城项目搭建目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微 ...
微信小程序电商项目开发实战漫谈
原创文章,若转载请于明显处标明出处和相关链接:https://www.toutiao.com/i6567868839856439822/,否则追究其法律责任! 2018年小程序内容电商风口已成,如果我 ...
微信小程序云开发实战：网上商城（二）
微信小程序云开发实战:网上商城(二) 主页面入口页面云函数与云数据库代码实现云端实现小程序端实现选择UI组件库 WeUI Vant 整合UI组件库以扩展包的方式引入weui 接下来主页 ...
【系】微信小程序云开发实战坚果商城-云开发开篇
第 3-2 课:云开发开篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信 ...
【系】微信小程序云开发实战坚果商城-扩展篇
第 5-1 课:扩展篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小程 ...
微信小程序云开发实战：网上商城（一）
微信小程序云开发实战:网上商城(一) 关于本系列工具与平台微信开发者工具小程序账号云开发辅助开发工具开发平台创建项目云函数接下来关于本系列偶然的机会需要给人做一个团购类的微信小程 ...

微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序》（笔记4）支持React.js语法的Taro框架

和mpvue、WePY项目一致，使用Taro开发项目，首先也要安装合适的npm和Node.js环境。

微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序》（笔记4）支持React.js语法的Taro框架相关推荐

最新文章

热门文章