寫在前面
這是一系列教程性質的實戰演示，我希望通過這這個項目能讓更多的同學理解什麼是小程序，如何從0開始去完成一個商業性質的小程序項目。這個小程序的最終效果是一個群工具，目前第一個基礎版本已經發布到了微信小程序，名字叫 “攢局” 有興趣的同學可以去微信上搜索一下看看。由於我個人的美術功底比較差，所以界面比較粗糙，大家對這個產品有什麼意見可以在下方留言。我會在後續的文章中逐步和大家分享我是如何一步步實現這個項目的。
技術棧
- 小程序端 taro, ts, mobx
- 服務器端 nodejs, ts, koa, sequelize, mysql
以上這些技術棧原則上來說我在項目中會直接使用其用法，有什麼不明白的可以給我留言哈，我會根據留言情況看看是否給大家單個拿出來單個講用法
工具
- 微信開發者工具: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- vscode: https://code.visualstudio.com/
- eslint
- prettier
- node: https://nodejs.org/en/
- npm5.2+
- yarn: https://yarnpkg.com/
項目
創建項目
用taro的官方cli工具生成項目, 由於我們可能不止一個taro項目所以為了規避版本問題，建議大家使用npx的方式初始化項目，不要在全局安裝cli工具。
<code>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/<code>
等待執行完成後我們就能看到新生成的項目文件夾——cj-miniapp，進入之後目錄結構如下：
<code>
├── 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/<code>
到這裡我們已經有了一個基礎項目結構，然後把整個項目添加到git代碼庫中方便管理後續的版本。
由於前文我們沒有在全局安裝cli工具這裡運行整個項目之前我們需要在項目中安裝@tarojs/cli 才能順利啟動整個項目
<code>yarn add @tarojs/cli -D #添加cli
yarn dev:weapp #啟動項目/<code>
編譯完成後我們打開微信開發者工具，導入項
填寫AppID，沒有小程序的同學在學習階段也可以先選擇使用測試號，完成後點擊導入，我們就可以看到我們的第一個項目成功運行起來了
按照國際慣例，我們肯定需要將這個頁面改成helloworld。打開vscode，導入項目
至此我們已經成功運行了我們的第一個小程序。
從下一章開始我們將會改造一下我們的項目，並正式的開始我們小程序的開發。
分享到:
閱讀更多 IT拾荒老人 的文章
