寫在前面
這是一系列教程性質(zhì)的實戰(zhàn)演示，我希望通過這這個項目能讓更多的同學理解什么是小程序，如何從0開始去完成一個商業(yè)性質(zhì)的小程序項目。這個小程序的最終效果是一個群工具，目前第一個基礎版本已經(jīng)發(fā)布到了微信小程序，名字叫 “攢局” 有興趣的同學可以去微信上搜索一下看看。由于我個人的美術功底比較差，所以界面比較粗糙，大家對這個產(chǎn)品有什么意見可以在下方留言。我會在后續(xù)的文章中逐步和大家分享我是如何一步步實現(xiàn)這個項目的。
技術棧
- 小程序端 taro, ts, mobx
- 服務器端 nodejs, ts, koa, sequelize, mysql
以上這些技術棧原則上來說我在項目中會直接使用其用法，有什么不明白的可以給我留言哈，我會根據(jù)留言情況看看是否給大家單個拿出來單個講用法
工具
- 微信開發(fā)者工具: 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/
項目
創(chuàng)建項目
用taro的官方cli工具生成項目, 由于我們可能不止一個taro項目所以為了規(guī)避版本問題，建議大家使用npx的方式初始化項目，不要在全局安裝cli工具。
npx @tarojs/cli init cj-miniapp# Taro即將創(chuàng)建一個新項目!# Need help? Go and open issue: https://github.com/NervJS/taro/issues/new# ? 拉取遠程模板倉庫成功！# ? 請輸入項目介紹！ 攢局# ? 是否需要使用 TypeScript ？ Yes# ? 請選擇 CSS 預處理器（Sass/Less/Stylus） Sass# ? 請選擇模板 mobx等待執(zhí)行完成后我們就能看到新生成的項目文件夾——cj-miniapp，進入之后目錄結(jié)構(gòu)如下：
├── config #構(gòu)建配置文件夾│ ├── 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到這里我們已經(jīng)有了一個基礎項目結(jié)構(gòu)，然后把整個項目添加到git代碼庫中方便管理后續(xù)的版本。
由于前文我們沒有在全局安裝cli工具這里運行整個項目之前我們需要在項目中安裝@tarojs/cli 才能順利啟動整個項目
yarn add @tarojs/cli -D #添加cliyarn dev:weapp #啟動項目編譯完成后我們打開微信開發(fā)者工具，導入項
填寫AppID，沒有小程序的同學在學習階段也可以先選擇使用測試號，完成后點擊導入，我們就可以看到我們的第一個項目成功運行起來了
按照國際慣例，我們肯定需要將這個頁面改成helloworld。打開vscode，導入項目
至此我們已經(jīng)成功運行了我們的第一個小程序。
從下一章開始我們將會改造一下我們的項目，并正式的開始我們小程序的開發(fā)。
（正文已結(jié)束）
推薦閱讀：樂商網(wǎng)
免責聲明及提醒：此文內(nèi)容為本網(wǎng)所轉(zhuǎn)載企業(yè)宣傳資訊，該相關信息僅為宣傳及傳遞更多信息之目的，不代表本網(wǎng)站觀點，文章真實性請瀏覽者慎重核實！任何投資加盟均有風險，提醒廣大民眾投資需謹慎！
