寫在前面

這是一系列教程性質(zhì)的實戰(zhàn)演示，我希望通過這這個項目能讓更多的同學(xué)理解什么是小程序，如何從0開始去完成一個商業(yè)性質(zhì)的小程序項目。這個小程序的最終效果是一個群工具，目前第一個基礎(chǔ)版本已經(jīng)發(fā)布到了微信小程序，名字叫 “攢局” 有興趣的同學(xué)可以去微信上搜索一下看看。由于我個人的美術(shù)功底比較差，所以界面比較粗糙，大家對這個產(chǎn)品有什么意見可以在下方留言。我會在后續(xù)的文章中逐步和大家分享我是如何一步步實現(xiàn)這個項目的。

技術(shù)棧

• 小程序端 taro, ts, mobx
• 服務(wù)器端 nodejs, ts, koa, sequelize, mysql

以上這些技術(shù)棧原則上來說我在項目中會直接使用其用法，有什么不明白的可以給我留言哈，我會根據(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 預(yù)處理器（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)有了一個基礎(chǔ)項目結(jié)構(gòu)，然后把整個項目添加到git代碼庫中方便管理后續(xù)的版本。

由于前文我們沒有在全局安裝cli工具這里運行整個項目之前我們需要在項目中安裝@tarojs/cli 才能順利啟動整個項目

yarn add @tarojs/cli -D #添加cliyarn dev:weapp #啟動項目

編譯完成后我們打開微信開發(fā)者工具，導(dǎo)入項

填寫AppID，沒有小程序的同學(xué)在學(xué)習(xí)階段也可以先選擇使用測試號，完成后點擊導(dǎo)入，我們就可以看到我們的第一個項目成功運行起來了

按照國際慣例，我們肯定需要將這個頁面改成helloworld。打開vscode，導(dǎo)入項目

至此我們已經(jīng)成功運行了我們的第一個小程序。

從下一章開始我們將會改造一下我們的項目，并正式的開始我們小程序的開發(fā)。

（正文已結(jié)束）

推薦閱讀：樂商網(wǎng)

免責(zé)聲明及提醒：此文內(nèi)容為本網(wǎng)所轉(zhuǎn)載企業(yè)宣傳資訊，該相關(guān)信息僅為宣傳及傳遞更多信息之目的，不代表本網(wǎng)站觀點，文章真實性請瀏覽者慎重核實！任何投資加盟均有風(fēng)險，提醒廣大民眾投資需謹慎！