01-Taro打造hello-world应用
01-Taro打造hello-world应用
一、简介
Taro是由京东凹凸实验室出品,书写一套代码通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信 / 京东 / 百度 / 支付宝 / 字节跳动 小程序、快应用、H5、React-Native 等)运行的代码。废话不多说,先从hello-world开始吧。
二、搭建环境
// node>=8.0.0
npm install -g @tarojs/cli
taro -v
taro init taroDemo
不好意思我果断control+z
cd taroDemo
yarn
安装依赖成功后咱先体验一把weapp、alipay、h5的效果
三、小试牛刀
// dev 开发 build 生产
yarn dev:weapp // 微信小程序
yarn dev:alipay // 支付宝小程序
yarn dev:h5
以微信小程序为例
cd taroDemo
yarn dev:weapp
// 打开微信开发工具 导入dist目录
如果想生成支付宝小程序则control+z 再 yarn dev:alipay, 生成的dist目录就是支付宝小程序了
四、项目结构
五、多端同步调试
在config/index.js
配置
outputRoot: `dist/${process.env.TARO_ENV}`
在终端打开多个Tab,分别运行
yarn dev:weapp
yarn dev:alipay
编译出来的目录如图,dist
目录下有 weapp
和 alipay
两个目录
关注公众号: 页面仔小杨 【实战干货、原创分享】
01-Taro打造hello-world应用的更多相关文章
- 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装
WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
- 【网络爬虫入门01】应用Requests和BeautifulSoup联手打造的第一条网络爬虫
[网络爬虫入门01]应用Requests和BeautifulSoup联手打造的第一条网络爬虫 广东职业技术学院 欧浩源 2017-10-14 1.引言 在数据量爆发式增长的大数据时代,网络与用户的沟 ...
- Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)
笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序.2 个支付宝小程序. 之所以选用 Taro, ...
- 防盗链测试01 - Jwplayer+Tengine2.3.1 mp4模块打造流媒体测试服务器
最近有个想法,想做类似下面的视频URL验证: 1.URL Tag Validation 2.Special format of URL for preventing unauthorized usag ...
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- MVC系列——MVC源码学习:打造自己的MVC框架(一:核心原理)
前言:最近一段时间在学习MVC源码,说实话,研读源码真是一个痛苦的过程,好多晦涩的语法搞得人晕晕乎乎.这两天算是理解了一小部分,这里先记录下来,也给需要的园友一个参考,奈何博主技术有限,如有理解不妥之 ...
- 使用OAuth打造webapi认证服务供自己的客户端使用
一.什么是OAuth OAuth是一个关于授权(Authorization)的开放网络标准,目前的版本是2.0版.注意是Authorization(授权),而不是Authentication(认证). ...
- 打造Orm经典,创CRUD新时代,Orm的反攻战
让我们开启数据库无Linq.零sql时代(续) 第一部分 MQL qq群:225656797 demo下载: 点此下载(既然下载,就支持该文,关注我的博客) Moon.Orm 5.0 (MQL版) 版 ...
- 打造最高效的科研环境之Emacs插件们
0 盲人摸象 作为初学者,迫切的需求就是直接上手Emacs并打造包含自动补全命令在内的科研环境. 和网上众多的插件安装的教程相比,我认为找到一个与自己需求匹配的Emacs配置环境来得更方便. 本例中, ...
随机推荐
- MacOs下安装Kong网关
写在前面: 持续记录一下自己在解决api网关kong上的各种问题. 1.关于Kong网关 这是官网地址:https://konghq.com/ 2.通过brew安装postgres 因为kong的数据 ...
- vector做形参时的三种传参方式
vector在做形参的时候传参的方式和普通的变量是一样的,要么传值.要么传引用.要么传指针. 现在分别定义三个以vector为形参的函数: (1) fun1(vector <int> v) ...
- MySql --FIND_IN_SET() 函数 (转)
例子:https://www.jianshu.com/p/b2c1ba0ba34f 举个例子来说:有个文章表里面有个type字段,他存储的是文章类型,有 1头条,2推荐,3热点,4图文 .....11 ...
- Android--sos闪光灯
Camera camera = null; Parameters parameters = null; Handler handler = new Handler() { @Override publ ...
- thinkphp5.0--auth权限
一般auth权限有四个表: think_admin:注册表, think_auth_group_access:用户组明细表(关联), think_auth_group:用户组表, think_arut ...
- 显示 QStringList 的内容
QStringList s; s << "your" << "string" << "list"; ; ...
- 汇编 之 win10 下安装dosbox 和 MASM
所需工具链接: 链接:https://pan.baidu.com/s/1nenMsSdgEkeRKc6wh9DQRA 提取码:1r89 只需要以下两个工具 安装dosbox 和MASM步骤 (1)解压 ...
- 【Linux常见命令】split命令
split - split a file into pieces 按照指定的行数或大小分割文件 语法: split [OPTION]... [INPUT [PREFIX]] Output fixed- ...
- Alpine Linux 3.9.2 发布,轻量级 Linux 发行版
开发四年只会写业务代码,分布式高并发都不会还做程序员? Alpine Linux 3.9.2 已发布,Alpine Linux 是一款面向安全的轻量级 Linux 发行版,体积十分的小. Alpi ...
- Python之路【第二十八篇】:生成器与迭代器
#!/usr/bin/env python # -*- coding:utf-8 -*- #只要函数的代码里面出现了yield关键字,这个函数就不再是一个普通的函数了,叫做生成器函数 #执行生成器函数 ...