寫在前面

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

技術(shù)棧

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

以上這些技術(shù)棧原則上來說我在項(xiàng)目中會(huì)直接使用其用法，有什么不明白的可以給我留言哈，我會(huì)根據(jù)留言情況看看是否給大家單個(gè)拿出來單個(gè)講用法

工具

• 微信開發(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/

項(xiàng)目

創(chuàng)建項(xiàng)目

用taro的官方cli工具生成項(xiàng)目, 由于我們可能不止一個(gè)taro項(xiàng)目所以為了規(guī)避版本問題，建議大家使用npx的方式初始化項(xiàng)目，不要在全局安裝cli工具。

npx @tarojs/cli init cj-miniapp# Taro即將創(chuàng)建一個(gè)新項(xiàng)目!# Need help? Go and open issue: https://github.com/NervJS/taro/issues/new# ? 拉取遠(yuǎn)程模板倉庫成功！# ? 請輸入項(xiàng)目介紹！ 攢局# ? 是否需要使用 TypeScript ？ Yes# ? 請選擇 CSS 預(yù)處理器（Sass/Less/Stylus） Sass# ? 請選擇模板 mobx

等待執(zhí)行完成后我們就能看到新生成的項(xiàng)目文件夾——cj-miniapp，進(jìn)入之后目錄結(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)有了一個(gè)基礎(chǔ)項(xiàng)目結(jié)構(gòu)，然后把整個(gè)項(xiàng)目添加到git代碼庫中方便管理后續(xù)的版本。

由于前文我們沒有在全局安裝cli工具這里運(yùn)行整個(gè)項(xiàng)目之前我們需要在項(xiàng)目中安裝@tarojs/cli 才能順利啟動(dòng)整個(gè)項(xiàng)目

yarn add @tarojs/cli -D #添加cliyarn dev:weapp #啟動(dòng)項(xiàng)目

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

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

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

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

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

（正文已結(jié)束）

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

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