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

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框架的更多相关文章

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

    WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...

  2. 微信小程序-云开发-实战项目

    微信小程序-云开发-实战项目 微信小程序 微信小程序平台服务条款 https://developers.weixin.qq.com/miniprogram/product/service.html h ...

  3. 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买

    作者图书京东链接,请点击------>>>    **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...

  4. 【微信小程序】开发实战 之 「配置项」与「逻辑层」

    微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结 ...

  5. 《微信小程序商城开发实战》唐磊,全网真实评价截图,不吹不黑,全部来自网友的真实评价

    偶尔看了下网友的销量和评价,感觉还不错,因为市面上大多关于小程序的书籍可能写的不够全面,要么只是点到为止的大致罗列,要么就是只简单介绍一下小程序的 界面设计这块.这样很难给学习小程序开发的人一个完成的 ...

  6. 微信小程序-云开发实战教程

    微信小程序-云开发实战教程 云函数,云存储,云数据库,云调用 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/gettin ...

  7. Swift项目开发实战-基于分层架构的多版本iPhone计算器-直播公开课

    Swift项目开发实战-基于分层架构的多版本iPhone计算器-直播公开课 本课程采用Q Q群直播方式进行直播,价值99元视频课程免费直播.完整的基于Swift项目实战,手把手教你做一个Swift版i ...

  8. iOS项目开发实战——学会使用TableView列表控件(四)plist读取与Section显示

    文本将会实现把数据存储到plist文件里.然后在程序中进行读取.在TableView控件中依据不同的类别显示Section. 有关TableView 的其它实现,请參考<iOS项目开发实战--学 ...

  9. 《ASP.NET Core项目开发实战入门》带你走进ASP.NET Core开发

    <ASP.NET Core项目开发实战入门>从基础到实际项目开发部署带你走进ASP.NET Core开发. ASP.NET Core项目开发实战入门是基于ASP.NET Core 3.1 ...

随机推荐

  1. Chrome:不受信任的证书----openssl签发带Subject Alternative Name的证书

    Chrome下自签名证书提示无效的问题 发现chrome验证证书很严格,必须带有Subject Alternative Name.签发csr时,修改openssl.cnf : vi /etc/ssl/ ...

  2. 增量ETL (长周期指标) 优化方案

    在日常数据处理过程中避免不了要计算跨长周期数据指标统计需求,类似于如下: 1.  统计每个城市(过去30天)用户浏览次数: 统计每个城市(本年)用户浏览次数: 统计每个城市(历史至今)用户浏览次数: ...

  3. 1093 - You can't specify target table 'account' for update in FROM clause

    目的:查询一张表的相同的两条数据,并删除一条数据. 分析 先查询出相同的数据,然后删除 查询相同的数据 SELECT a.id FROM account a GROUP BY a.username H ...

  4. Nexus上传npm包

    1.创建npm仓库 私服仓库npm-hosted 代理仓库npm-proxy npm-group 创建成功 在工程的根目录下创建文件 .npmrc registry=http://xxx:8081/n ...

  5. RunTime总结:

    oc动态性, 运行时将代码转化为runtime的C代码 RunTime运行流程: 生成对应objc_msgSend方法 isa指针查看当前类有没有这个方法, 之后寻找父类, 每个方法SEL(方法选择器 ...

  6. 开发日记:Windows进程守护工具

    近期,中心应用服务无故关闭.在检查系统和应用程序日志无果后采取了进程守护的方法.测试期内,脚本未出现系统资源占用过多的情况. 使用说明:1.进程守护.vbs  使用时需修改运行周期(10行).守护进程 ...

  7. 发布你自己的Nuget包

    ①安装NuGetPackageExplorer 来帮助我们发布你的包. ②https://www.nuget.org/ 创建你的apikey ③新建一个asp.net的空项目,并且安装nuget.se ...

  8. matlab循环中显示figure时窗口跳动

    在Matlab中,当在一个循环内部利用figure显示图片时,有时候会出现窗口跳动,尤其是两个显示器的时候, 具体就是每次循环中显示的figure的位置都出现在屏幕的不同位置,导致看起来灰常不爽 go ...

  9. HMAC哈希消息认证码

    收藏 137 14   hmac 编辑 HMAC是密钥相关的哈希运算消息认证码,HMAC运算利用哈希算法,以一个密钥和一个消息为输入,生成一个消息摘要作为输出.   中文名 哈希消息认证码 外文名 H ...

  10. fineui 模拟右下角弹窗

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...