小程序開發神兵利器-Taro實戰-01
時間:2020-04-04 13:09:44 來源:互聯網 閱讀:-
本文摘要:技術棧小程序端taro, ts, mobx服務器端 nodejs, ts, koa, sequelize, mysql以上這些技術棧原則上來說我在項目中會直接使用其用法,有什么不明白的可以給我留言哈,我會根據留言情況看看是否給大家單個拿出來單個講用法工具微信開發者工具: http

寫在前面

這是一系列教程性質的實戰演示,我希望通過這這個項目能讓更多的同學理解什么是小程序,如何從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工具。


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 #啟動項目

編譯完成后我們打開微信開發者工具,導入項


小程序開發神兵利器-Taro實戰-01

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


小程序開發神兵利器-Taro實戰-01

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


小程序開發神兵利器-Taro實戰-01


小程序開發神兵利器-Taro實戰-01

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

從下一章開始我們將會改造一下我們的項目,并正式的開始我們小程序的開發。

(正文已結束)

推薦閱讀:相機白平衡怎么調

免責聲明及提醒:此文內容為本網所轉載企業宣傳資訊,該相關信息僅為宣傳及傳遞更多信息之目的,不代表本網站觀點,文章真實性請瀏覽者慎重核實!任何投資加盟均有風險,提醒廣大民眾投資需謹慎!

安微11选五定位走势图 陕西快乐十分1209049期开奖结果 内蒙古十一选五遗漏数据 北京pk拾赚钱技巧 搜索 福建快三基本走势图 股票推荐 新浪 海南体彩飞鱼中奖规则 河北十一选五走势图一定牛附近的建材市场 云南时时彩历史开奖结果 俩人玩扑克的新玩法 福建快3开奖号走势图