• 代碼：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:weapp
yarn?run?v1.22.10
$?npm?run?build:weapp?--?--watch
npm?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:weapp
yarn?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:?3e1757774efcf01a6850
Version:?webpack?4.42.0
Time:?6089ms
Built?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/index
pages/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.js
Entrypoint?pages/index/index.config?=?runtime.js
Entrypoint?app?=?runtime.js?taro.js?vendors.js?app.wxss?app.js
Entrypoint?comp?=?runtime.js?taro.js?vendors.js?comp.js
Entrypoint?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 如何开始微信小程序的开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。