寫在前面

這是一系列教程性質的實戰演示，我希望通過這這個專案能讓更多的同學理解什麼是小程式，如何從0開始去完成一個商業性質的小程式專案。這個小程式的最終效果是一個群工具，目前第一個基礎版本已經發布到了微信小程式，名字叫 “攢局” 有興趣的同學可以去微信上搜索一下看看。由於我個人的美術功底比較差，所以介面比較粗糙，大家對這個產品有什麼意見可以在下方留言。我會在後續的文章中逐步和大家分享我是如何一步步實現這個專案的。

技術棧小程式端 taro, ts, mobx伺服器端 nodejs, ts, koa, sequelize, mysql

以上這些技術棧原則上來說我在專案中會直接使用其用法，有什麼不明白的可以給我留言哈，我會根據留言情況看看是否給大家單個拿出來單個講用法

工具微信開發者工具: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlvscode: https://code.visualstudio.com/eslintprettiernode: https://nodejs.org/en/npm5.2+yarn: https://yarnpkg.com/專案建立專案

用taro的官方cli工具生成專案, 由於我們可能不止一個taro專案所以為了規避版本問題，建議大家使用npx的方式初始化專案，不要在全域性安裝cli工具。

npx @tarojs/cli init cj-miniapp# Taro即將建立一個新專案!# Need help? Go and open issue: https://github.com/NervJS/taro/issues/new# ✔ 拉取遠端模板倉庫成功！# ? 請輸入專案介紹！ 攢局# ? 是否需要使用 TypeScript ？ Yes# ? 請選擇 CSS 前處理器（Sass/Less/Stylus） Sass# ? 請選擇模板 mobx

等待執行完成後我們就能看到新生成的專案資料夾——cj-miniapp，進入之後目錄結構如下：

├── config #構建配置資料夾│ ├── dev.js│ ├── index.js│ └── prod.js├── global.d.ts #ts宣告檔案├── node_modules # 依賴模組├── package.json├── project.config.json├── src #工作目錄│ ├── app.scss│ ├── app.tsx│ ├── index.html│ ├── pages│ └── store├── tsconfig.json└── yarn.lock

到這裡我們已經有了一個基礎專案結構，然後把整個專案新增到git程式碼庫中方便管理後續的版本。

由於前文我們沒有在全域性安裝cli工具這裡執行整個專案之前我們需要在專案中安裝@tarojs/cli 才能順利啟動整個專案

yarn add @tarojs/cli -D #新增cliyarn dev:weapp #啟動專案

編譯完成後我們開啟微信開發者工具，匯入項

按照國際慣例，我們肯定需要將這個頁面改成helloworld。開啟vscode，匯入專案

至此我們已經成功運行了我們的第一個小程式。

從下一章開始我們將會改造一下我們的專案，並正式的開始我們小程式的開發。