Taro 如何开始微信小程序的开发(taroui开发小程序)

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

前提准备

yarn global add @tarojs/cli

创建项目

taro init my-app

输出信息:

 Taro v3.0.16Taro 即将创建一个新项目!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 开始工作吧!

运行程序

微信小程序

下载并打开微信开发者工具,然后导入 my-app 项目:

Taro 如何开始微信小程序的开发(taroui开发小程序)

编译预览:

❯ 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.16Tips: 预览模式生成的文件较大,设置 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✅  编译成功监听文件修改中...

Taro 如何开始微信小程序的开发(taroui开发小程序)

编译打包:

❯ 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
  • Taro UI

参考

  • taro
  • Taro Docs
  • Taro UI

结语

欢迎关注 GoCoding 公众号,分享日常 Coding 中实用的小技巧、小知识!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月9日 下午1:00
下一篇 2024年5月9日 下午1:11

相关推荐

  • 微信小程序开发详细步骤(微信小程序开发详细教程)

    1. 课程介绍 本次课程分为两个部分。 1.1. 微信小程序基础 ​ 主要讲解微信小程序的基础使用以及相关概念知识 1.2. bilibili微信小程序 ​ 一个基于小程序的bil…

    科研百科 2023年4月12日
    216
  • 制造项目管理系统

    制造项目管理系统 制造项目管理系统是一种用于跟踪和管理制造项目的软件系统。它可以帮助制造商更好地协调和管理项目中的各种环节,从而提高生产效率和质量,减少成本和风险。本文将介绍制造项…

    科研百科 2024年9月12日
    19
  • 国网胡志成

    胡志成:国家电网公司领导人物的故事 胡志成,国家电网公司领导人物,出生于1963年,是国家电网公司的奠基人之一,也是该公司的领导者之一。他在中国电力系统的发展过程中起到了重要的作用…

    科研百科 2024年10月18日
    1
  • 软件项目管理06275(软件项目管理案例教程第四版答案)

    软件项目管理06275:项目立项流程简析: 1、需要商务立项。 2、项目经理需要提供盈利表,盈利预测表中需要项目经理提供:(1)人力成本预测;(2)分包采购预测;(3)项目交付阶段…

    科研百科 2022年7月5日
    147
  • 学校经费报销制度

    学校经费报销制度 学校经费报销制度是学校管理中非常重要的一环,它关系到学校的日常运营和财务状况。为了更好地管理学校经费,学校应该建立一套完善的报销制度,确保所有报销行为都经过合理的…

    科研百科 2024年5月23日
    55
  • 单位办公系统出现问题,导致相关业务不能办理(单位办公系统)

    单位办公系统: 提高办公效率的利器 随着现代办公方式的不断变化,单位办公系统也在不断更新和发展。一个好的办公系统不仅可以提高员工的工作效率,还可以提高公司的运营效率和管理水平。本文…

    科研百科 2024年6月3日
    51
  • 要想经营好一家图文快印店,优秀的管理软件不可或缺(快印店管理软件哪个好)

    对于图文快印店老板来说最关心的问题无非就是怎么赚钱。而图文快印店一年忙下来,到底赚了多少钱?成本是多少?员工年底的年终奖应该如何发?那个员工干的活最多?这些问题往往让老板们头大。在…

    科研百科 2022年7月5日
    313
  • 施工项目进度控制方法

    施工项目进度控制方法 在施工项目中,进度控制是非常重要的。它关系到项目的质量和成本,也关系到项目经理和员工的尊严和声誉。因此,掌握正确的施工项目进度控制方法是非常重要的。本文将介绍…

    科研百科 2024年9月23日
    17
  • 有没有好用的项目管理软件

    项目管理软件是企业管理中不可或缺的工具,能够帮助团队更好地协作,提高工作效率,提高项目质量。目前市面上有许多优秀的项目管理软件可供选择,例如Jira、Trello、Slack等。 …

    科研百科 2024年7月22日
    35
  • 如何开发p2p网贷系统 开发流程是怎样的?(p2p网贷程序开发)

    随着国家监管政策的进一步加深,对于p2p网贷平台进行了又一轮的洗牌。那么大家是否想过,这些p2p网贷系统平台是如何开发出来的呢?在监管的大趋势下,p2p网贷平台的安全性起到了怎样的…

    科研百科 2024年5月2日
    44