码迷,mamicode.com
首页 > 其他好文 > 详细

01-Taro打造hello-world应用

时间:2020-05-12 20:52:25      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:多个   支付宝小程序   proc   blog   图片   pre   native   png   支付宝   

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 目录下有 weappalipay 两个目录

技术图片

关注公众号: 页面仔小杨 【实战干货、原创分享】

01-Taro打造hello-world应用

标签:多个   支付宝小程序   proc   blog   图片   pre   native   png   支付宝   

原文地址:https://www.cnblogs.com/itxing/p/12878175.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!