文档章节

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

柯南和由美
 柯南和由美
发布于 07/09 10:04
字数 883
阅读 62
收藏 1

Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了更多更好的“一端开发,多端编译”开发方式。

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

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

  1. 支持使用npm/yarn安装管理第三方依赖
  2. 支持使用ES7/ES8甚至更新的ES规范,一切都可自行配置
  3. 支持使用CSS预编译器,例如Sass等
  4. 支持使用Redux进行状态管理
  5. 支持使用Mobx进行状态管理
  6. 小程序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打造高效的小程序》吧。

© 著作权归作者所有

柯南和由美
粉丝 8
博文 49
码字总数 36935
作品 0
海淀
私信 提问
小程序第三方框架对比 ( wepy / mpvue / taro )

众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端...

李初五
01/26
0
0
《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装

WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: 稍等片刻,成功安装后,即可创建WePY项目。 注意:如果npm安装时间过长或者是连接超时而导致的失败,则可以使...

柯南和由美
07/01
58
0
使用 Taro 开发微信小程序的实践 + 踩坑合集

我和这篇文章 我是一名前端爱好者,现在是大三学生。大二开始接触小程序开发,目前自己唯一还在弄的项目是校内面向学生的一款课程评测小程序 uCourse。 使用过微信小程序原生语言开发过小程序...

松鼠桂鱼
03/11
0
0
基于Taro的的微信小程序分享图片功能实践

前言 在各种小程序(微信、百度、支付宝)、H5、NativeApp 纷纷扰扰的当下,给大家强烈安利一款基于React的多终端开发利器:京东Taro(泰罗·奥特曼),Taro致力于多终端统一解决方案,一处代码...

JustBeCoder
07/11
0
0
Taro + 小程序云开发实战

前言 小程序开放了云开发能力,为开发者提供了一个可以很快速构建小程序后端服务的能力,作为一名对新技术不倒腾不快的前端,对此也是很感兴趣的; 而Taro 是凹凸实验室推出的,基于React 语...

evont
2018/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一次看懂 Https 证书认证

TLS > 传输层安全性协定 TLS(Transport Layer Security),及其前身安全套接层 SSL(Secure Sockets Layer)是一种安全协议,目的是为网际网路通信,提供安全及数据完整性保障。 如图,TLS...

极客收藏夹
21分钟前
3
0
https证书买哪家好?有哪些供应商

在选购https证书前除了要了解类型外,还需要了解https证书供应商,毕竟不同的供应商,提供的产品质量与服务也是有差异的。今天小编就为大家讲讲https证书供应商方面的内容,希望各位会喜欢。...

安信证书
22分钟前
4
0
Zuul 配置

概述:zuul底层是基于servlet,是由一系列的filter链构成。 1、路由配置 a、单例serverId映射 zuul: routes: client-a: path: /client/** serviceId: client-a 意思是...

java框架开发者
40分钟前
3
0
zk中FinalRequestProcessor解析

是处理器最后一个环节 FinalRequestProcessor implements RequestProcessor 处理器链最后一个环节处理事务和非事务请求最后一个环节 构造器 public FinalRequestProcessor(ZooKeeperServer z...

writeademo
40分钟前
3
0
Axios 详解

首先祝广大程序猿们节日快乐! 一、axios简介 基于promise,用于浏览器和node.js的http客户端 二、特点 支持浏览器和 node.js 支持 promise 能拦截请求和响应 能转换请求和响应数据 能取消请求...

张兴华ZHero
41分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部