• 代码:https://github.com/ikuokuo/start-taro

前提准备

yarn global add @tarojs/cli

创建项目

taro init my-app

输出信息:

? Taro v3.0.16

Taro 即将创建一个新项目!Need help? Go and open issue: https://tls.jd.com/taro-issue-helper

? 请输入项目介绍!? 请选择框架 React? 是否需要使用 TypeScript ?Yes? 请选择 CSS 预处理器(Sass/Less/Stylus) Sass? 请选择模板源 Gitee(最快)✔ 拉取远程模板仓库成功!? 请选择模板 taro-ui

✔ 创建项目: my-app...✔ cd my-app, 执行 git init✔ 安装成功...创建项目 my-app 成功!请进入项目目录 my-app 开始工作吧!?

运行程序

微信小程序

下载并打开微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ,然后导入 my-app 项目:


编译预览:

❯ yarn dev:weappyarn run v1.22.10$ npm run build:weapp -- --watchnpm WARN lifecycle The node binary used for scripts is /var/folders/d3/gg88014s28j41dgh6dznfp7h0000gn/T/yarn--1605187598317-0.7594031278537579/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> my-app@1.0.0 build:weapp /Users/ikuokuo/start-taro/my-app> taro build --type weapp "--watch"

? Taro v3.0.16

Tips: 预览模式生成的文件较大,设置 NODE_ENV 为 production 可以开启压缩。Example:$ NODE_ENV=production taro build --type weapp --watch

生成  工具配置  /Users/ikuokuo/start-taro/my-app/dist/project.config.json

编译  发现入口  src/app.ts编译  发现页面  src/pages/index/index.tsx✅  编译成功

监听文件修改中...

编译打包:

❯ yarn build:weappyarn run v1.22.10$ taro build --type weapp? Taro v3.0.16

生成  工具配置  /Users/ikuokuo/start-taro/my-app/dist/project.config.json

编译  发现入口  src/app.ts编译  发现页面  src/pages/index/index.tsx✅  编译成功

Hash: 3e1757774efcf01a6850Version: webpack 4.42.0Time: 6089msBuilt at: 11/12/2020 9:46:51 PM                           Asset       Size  Chunks             Chunk Names                          app.js     77 KiB       3  [emitted]  app              app.js.LICENSE.txt  500 bytes          [emitted]                        app.json  177 bytes          [emitted]                        app.wxss    0 bytes       3  [emitted]  app                       base.wxml   66.9 KiB          [emitted]                         comp.js   72 bytes       5  [emitted]  comp                       comp.json   54 bytes          [emitted]                       comp.wxml   84 bytes          [emitted]            pages/index/index.js    150 KiB       6  [emitted]  pages/index/indexpages/index/index.js.LICENSE.txt   1.21 KiB          [emitted]          pages/index/index.json   71 bytes          [emitted]          pages/index/index.wxml   82 bytes          [emitted]          pages/index/index.wxss   1.44 KiB       6  [emitted]  pages/index/index                      runtime.js   1.46 KiB       0  [emitted]  runtime                         taro.js   94.4 KiB       1  [emitted]  taro                       utils.wxs  981 bytes          [emitted]                      vendors.js   13.5 KiB       2  [emitted]  vendors          vendors.js.LICENSE.txt  295 bytes          [emitted]Entrypoint app.config = runtime.jsEntrypoint pages/index/index.config = runtime.jsEntrypoint app = runtime.js taro.js vendors.js app.wxss app.jsEntrypoint comp = runtime.js taro.js vendors.js comp.jsEntrypoint pages/index/index = runtime.js taro.js vendors.js pages/index/index.wxss pages/index/index.js

✨  Done in 11.08s.

基础教程

根据创建项目时的选择,继续阅读教程。例如本文的选择,请阅读:

  • React: https://taro-docs.jd.com/taro/docs/react

  • Taro UI: https://taro-ui.jd.com/#/docs

参考

  • taro: https://github.com/nervjs/taro

  • Taro Docs: https://taro-docs.jd.com/

  • Taro UI: https://taro-ui.jd.com/

taro压缩_Taro 如何开始微信小程序的开发相关推荐

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

    Taro的编写代码方式和mpvue.WePY框架最大的一个差别就是,Taro并不是基于Vue.js的语法规范,而是遵循React语法规范,它采用与React一致的组件化思想,组件生命周期与React保 ...

  2. 垃圾分类微信小程序——云开发+CMS+微应用+百度智能云图片识别

    功能列表 1.0.0版本: 三个版本,一个APPID,登录页选择版本 登录,openid判断 社区居民用户注册,一房一主 工作/清洁人员账号绑定,一人一号,一号一人 用户首页,直接展示搜索功能,包括图 ...

  3. 浅谈我对微信小程序云开发的认识与见解

    一.微信小程序云开发的优点 1.无需自建服务器 2.项目快速上线 3.轻轻松松获取用户凭证 二.微信小程序云开发的坑 1.基础版CDN流量太少 2.云数据库限制多 (1)小程序端读取限制 (2)云数据 ...

  4. 记录我的第一篇博客,【新手向】微信小程序云开发

    [新手向]微信小程序云开发 前言 为什么要写博客 微信小程序开发 小程序云开发概述 准备 知识储备 组件库 开源框架 环境搭建 最后 前言 偶然看到自己以前写的代码 em-这一坨什么鬼,哈哈哈 所以我 ...

  5. access突然需要登录_早知道早好,微信小程序登录开发需要注意的事项

    最近公司要做一个企业微信的小程序,方便企业内的成员来登录,以便一些公司内的业务,只限于公司内的成员来操作,因为有微信小程序的开发经验,所以先当作微信小程序来开发了! 首先来讲一下这个企业微信小程序与微 ...

  6. 微信小程序在开发中遇到的问题与解决方法

    微信小程序在开发中遇到的问题与解决方法 参考文章: (1)微信小程序在开发中遇到的问题与解决方法 (2)https://www.cnblogs.com/zjjDaily/p/8032142.html ...

  7. python操作微信小程序云端数据库_微信小程序云开发之数据库操作

    本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下 新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { ...

  8. python开发微信小程序-Django微信小程序后台开发教程的实现

    1 申请小程序,创建hello world小程序 2 添加交互框和按钮 index. wxml cal {{ result }} index.wxss /**index.wxss**/ .input ...

  9. 《微信小程序:开发入门及案例详解》—— 3.4 小结

    本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一 书中的第3章,第3.4节,作者李骏 边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...

最新文章

  1. 安全测试之xss攻击和mysql注入
  2. android sqlite查询某个字段,Android的sqlite:如何检索特定列的特定数据?
  3. 从零开始学习jQuery (九) jQuery工具函数 【转】
  4. 分枝定界法解0/1背包问题
  5. android如何开发ui服务,Android UI-对Activity工作流程的理解(一)
  6. 总结之前有道笔记的内容--对于Touch 的不同讲解
  7. 10个MySQL加载数据内文件示例以将文本文件数据上传到表
  8. php 零宽断言,正则表达式之零宽断言
  9. 动态路由之RIP协议、Bellman-Ford算法
  10. ArcGIS API for JavaScript 打印
  11. 论文笔记:Multilingual Multimodal Pre-training for Zero-Shot Cross-Lingual Transfer of Vision-Language Mo
  12. mht转html转换器apk,MHT文件转换工具BitRecover MHT Converter
  13. 先序、中序、后序、递归序(重要)
  14. requests-html 爬虫新库
  15. 年轻人宣言:青春符号
  16. OKRs,自由之风劲吹,发挥无限创造力 | Chatopera
  17. 【26】地图可视化:基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图
  18. 2004年9月13日
  19. python求两个数的最大公约数和最小公倍数_Python求两个数最大公约数、最小公倍数...
  20. 【持续更新】量化交易论文综述

热门文章

  1. iis无法启动计算机上的服务器,Win7系统iis无法启动怎么解决?
  2. 【Python】如何在文件夹里批量替换文本中的内容?
  3. [MATLAB学习笔记]textread读取文本文件中的数据;写入多个输出
  4. python 飞机大战小游戏
  5. win10删除开机密码_新版WIN10 如何取消开机密码的操作
  6. 注册表文件修改打开程序的简单示例
  7. SQL SERVER视图
  8. 【CyberSecurityLearning 21】防火墙
  9. Java的迭代器—— Iterator
  10. win7下不能使用dnw烧写的解决办法——韦东山嵌入式Linux学习笔记05