多終端APP開發技術

這段時間不能出門，打算寫個APP管理學生和課程。經過幾天的技術篩選，我整理了這個文檔，供同學們學習參考。紮實的程序基礎+良好的編程思路+掌握必要的技術+熟悉適用的框架+壹定的圖形處理能力+細致的功能設計+耐心的測試習慣+自律的項目進度管理+持續的固定時間+動人的音樂。所以可以愉快的開始制作獨立app啦~ (_ *)技術棧HTML+CSS+JavaScript Nodejs+React+redux taro+Taroui+Dvajs+TypeScript+scsjsesst+ESLINT+JSDoc+git wx+wx cloud開發工具vscode+微信開發者工具目錄Web基礎技術HTML超文本標記語言CSS級聯樣式表Ja。VaScript腳本語言js語言和標準函數編程純函數Currier函數不變數據生成器函數異步函數網頁技術高級接口描述語言TypeScript in JsXReact嚴格JS語法超集SASS/ SCSS預處理CSS的超集應用框架NodeJs使用JS的跨端引擎React前端框架Flutter原生移動應用UI框架Taro多線程開發前端框架Taro基於UI框架AntDesign基於React的UI組件庫Redx基於React的狀態管理庫DvaJS基於Redux的數據流框架開發工具esLint插件JS代碼檢測工具Jest測試框架Git代碼版本管理工具jsDoc註釋文檔生成工具平臺框架wx微信小程序wxCloud微信雲開發其他工具圖標圖標制作管理平臺顏色配色網絡服務器技術Mongoose分布式數據庫項目開發參考開發者手冊網頁基礎技術MDNWeb開發技術HTML超文本標記語言。MDNHTML幫助HyperTextMarkupLanguage (HTML)描述和定義網頁內容。CSS CascadingStyleSheets MDNCSS幫助級聯樣式表(CSS)描述web內容的外觀和顯示。JavaScript腳本語言js語言和標準MDNJavaScript幫助JavaScript是運行在瀏覽器中的編程語言。它可以為您的網站或應用程序添加交互性和其他動態功能。隨著Node.js的出現，還可以在服務器上運行JavaScript。函數式編程函數式編程入門-阮壹峰JS函數式編程指南-PDF下載純函數什麽是純函數_以及為什麽要用純函數？課程功能[翻譯]curring in]JavaScript immutable data詳細解釋從引用數據，到深度復制，再到不可變數據。這是調用的進步，也是優化的提升。生成器函數MDNfunction*幫助異步函數MDNasyncfunction幫助高級web技術。JSXReact中的接口描述語言，React官網-JSXJSX，是JavaScript的語法擴展。在REACT架構中使用時，其格式更像是壹種模板語言，但實際上完全是在JavaScript內部實現的。元素是構成React應用的最小單位，JSX用於聲明React中的元素，React使用JSX來描述用戶界面。TypeScript是壹個超集TypeScript中文文檔，具有嚴格的JS語法。TypeScript是微軟開發的開源跨平臺編程語言。它是JavaScript的超集，最終會編譯成JavaScript代碼。TypeScript添加了壹個可選的靜態類型系統和ECMAScript的許多尚未正式發布的新功能。SASS/Scss是css預處理的超集。SASS中文官網SASS是buby語言編寫的CSS預處理語言。它是強化CSS的輔助工具，是CSS的延伸。它在CSS語法的基礎上增加了變量、嵌套規則、混合、擴展和inlineimports等高級功能。SCSS是Sass3推出的新語法，完全兼容CSS3，繼承了Sass的強大功能。換句話說，任何標準的CSS3樣式表都是具有相同語義的有效SCSS文件。SCSS需要分號和花括號，而不是換行符和縮進。Scss不區分空白符號。其實和css3語法壹樣，它的後綴是。SCSS。應用框架nodejs使用Js的跨端引擎NodeJs中文網Node.js是基於ChromeV8引擎的JavaScript運行時。Node.js使用事件驅動的非阻塞I/O模型。Node是JavaScript在服務器上運行的開發平臺。優化壹些特殊用例，提供替代API，使得V8在非瀏覽器環境下運行更好。V8引擎執行Javascript非常快，性能非常出色。它用於方便地構建響應速度快、易於擴展的網絡應用程序。Node采用事件驅動、非阻塞的I/O模型，輕量高效，非常適合在分布式設備上運行數據密集型實時應用。Nodejs官網##node#全球安裝n$npminstall-gn#升級到最新穩定版$nstable#升級到最新版本$ NLEST #升級到定制版$nv7.10.0#切換使用版本$ n 7.10.0(Enter)$ NRM 7.10.0。刪除公式化版本$nrm7.10.0#執行腳本$nuse7.10.0some.js##npm#升級npm$npminstall-gnpm#查看npm版本$npm-v#升級cnpm$npm-gicnpm#查看cnpm版本$ CNPM。關於package . JSON package-lock . JSON React官網的前端框架React源於臉書的內部項目，是壹個用於構建用戶界面的JavaScript庫，也是web應用的視圖層。Flutter原生移動應用UI框架Flutter官網Flutter是Google的移動UI框架，可以在iOS和Android上快速構建高質量的原生用戶界面。Flutter可以與現有代碼壹起工作。全世界越來越多的開發者和組織都在使用Flutter，而且Flutter是完全免費開源的。Taro多終端開發前端框架Taro官方文檔Taro是遵循React語法規範的多終端開發解決方案。妳只能寫壹套代碼，然後把源代碼編譯成可以在不同終端(微信/百度/支付寶/字節跳動/QQ/JD.COM小程序、快應用、H5、React-Native等)上運行的代碼)通過Taro的編譯工具。節點環境(> =8.0.0)#使用npm安裝CLI $ NPM install-g @ tarojs/CLI #或者要安裝cnpm，使用cnpm安裝CLI$cnpminstall-g@tarojs/cli創建模板項目$taroinitmyApp微信小程序編譯和打包# NPM script $ npmrundev:weapp $ npmrunbuild:weapp #僅全球安裝$ Taro build-type WAP-watch $ Taro build-type WAP註:Taro的全球版本需要與版本壹致異步編程Taro異步編程環境配置$ npmibabel-plugin-transform-runtime-d $ npmibabel-runtime Taro框架:創建微信小程序@ tarojs/async-await(2.0以上不需要):$ npmi @ tarojs/async-await-savecomponentWillMount(){ Taro . request({ URL:' ponentWillMount(){ const response = awaittaro . request({ URL:' pilerOptions ':{ " paths ":{ " @/* ":["。/ Src/* "]}}打包文件過大調試方案打包文件過大調試方案Webpack-Bundle-Analyzer Tarou UI框架Tarou官網安裝了Taro，項目創建後Taro-UI安裝在項目根目錄下:AntDesign反應式UI組件庫AntDesignReactantd UI組件庫基於Ant Design設計系統，主要用於開發企業級中後臺產品。基於React狀態管理庫的Redox Redox中文文檔復賽:無樣板是Redox的最佳實踐。DvaJS是壹個基於氧化還原的數據流框架。DvaJS官網dva首先是基於Redox和redux-saga的數據流方案，然後為了簡化開發體驗，dva還內置了react-router和fetch，所以也可以理解為壹個輕量級的應用框架。Dva通過model:reducer的概念管理域的模型，包括狀態的同步更新。處理異步邏輯的影響。訂閱數據源的訂閱。命名空間:當前模型的名稱。整個應用程序的狀態由幾個小的模型狀態組成，以名稱空間為鍵:模型的當前狀態。這裏存儲的數據直接決定了視圖層reducers:Action processor的輸出，它用於計算最新的Stateeffects:Action processor，並處理異步操作$ npminstalldva-CLI-g $ npmininstall-savedva-coredva-loading #來配置Taro以供使用。還需要安裝@ tarojs/redux $ npmi-save redux @ tarojs/redux @ tarojs/Redox-H5 Redox-thunk Redox-Logger Taro+dva參考:Taro+dva+Typescript構建微信小程序架構taro+dva小程序-構建配件流程taro+taro-ui+dva開發工具ESLint插件js代碼檢測工具ESLint官網ESLint是壹款插件javascript代碼檢測工具，VScode下帶ESLint和typescript-eslint的代碼檢查公式不方便，所以關閉。直接用eslint，配置:“編輯器。formaton type”:settings . JSON中的true，//是否自動格式化“編輯器。formatonsave”:編輯時為true，//是否自動格式化“JavaScript。validate.enable”:保存時為true，//編輯器代碼js檢查“typescript . validate . enable”:true，//編輯器代碼ts檢查“typescript . tsdk”:“node _ modules/typescript/lib”，//手動配置SDK“eslint . enable”:true//要打開eslint代碼檢查，需要執行命令創建。在創建了eslintrc.js文件$ eslint-init之後，編寫這個文件rule: module。exports = {"env": {"browser": true，" es6": true}。extends":["eslint:recommended "，" plugin:react/recommended "，" plugin:@ typescript-eslint/eslint-recommended "，" Taro "，]，" globals ":{ " readonly "，//applet全局變量聲明" atomics": "readonly "，" sharedyabuffer ":" readonly " }，" parser ":" @ typescript-eslint/parser "，" parser options": {"ECMA版本":2018，" sourceType":"module "，" ECM features ":{ " modules參考幫助:vs code checking formula Jest test framework with ESLint和typescript-eslint中的typescript-eslint，官網2019最流行的五個JavaScript自動測試框架，Git官網Git，是壹個開源的分布式版本控制系統，可以有效快速的處理從很小到很大的項目版本管理。Github官網Git菜鳥教程jsDoc批註文檔生成工具從批註管理jsDoc中文文檔平臺框架wx微信小程序官方文檔微信開發者工具下載wxCloud微信雲開發雲開發文檔。使用現有項目導入後，需要創建壹個cloudfunctions目錄。並在project.config.json中指定雲函數目錄:{..." cloud functions root ":" cloud functions/"，...}然後在微信開發者工具中，右鍵點擊CloudFunctions目錄，即可同步或創建雲函數。雲數據庫自動備份雲數據庫自動備份示例代碼註意:上面微信社區提供的示例代碼存在bug，需要修改，方案可行。其他工具圖標圖標制作管理平臺iconfonteasyiconColor配色工具高級理論項目開發參考開發者手冊開發者手冊-雲+社區-騰訊雲待更新~