多端APP開發技術

這段時間不能出門，打算寫個APP來管理學生和課程，經過幾天的技術選型確定下來，整理了這份文檔供學生學習和參考紮實的程序基礎+良好的編程思想+掌握必需的技術+熟悉適用的框架+壹定的圖文處理能力+細致的功能設計+耐心的測試習慣+自律的項目進度管理+連續固定的時間+動人的音樂，這樣妳就可以愉快的開始獨立APP制作了~（^_*)技術棧html+css+javascriptNodeJs+React+ReduxTaro+TaroUI+DvaJS+TypeScript+ScssJest+ESLint+JSDoc+Gitwx+wxCloud開發工具vscode+微信開發者工具目錄網頁基礎技術HTML超文本標記語言CSS層疊樣式表JavaScript腳本語言js語言和標準函數式編程純函數柯裏化函數不可變數據生成器函數異步函數網頁技術進階JSXReact中的界面描述語言TypeScript嚴格JS語法的超集SASS/SCSS預處理CSS的超集應用框架NodeJs使用JS的跨端引擎React前端框架Flutter原生移動應用UI框架Taro多端開發前端框架TaroUI基於Taro的UI框架AntDesign基於React的UI組件庫Redux基於Reactr狀態管理庫DvaJS基於redux的數據流框架開發工具ESLint插件化JS代碼檢測工具Jest測試框架Git代碼版本管理工具jsDoc註釋文檔生成工具平臺框架wx微信小程序wxCloud微信雲開發其他工具Icon圖標制作管理平臺Color配色網服務端技術Mongoose分布式數據庫項目開發參考開發者手冊網頁基礎技術MDNWeb開發技術HTML超文本標記語言MDNHTML幫助超文本標記語言（HTML，HyperTextMarkupLanguage）用於描述、定義網頁內容。CSS層疊樣式表MDNCSS幫助層疊樣式表（CSS，CascadingStyleSheets）用於描述網頁內容的外觀與展示。JavaScript腳本語言js語言和標準MDNJavaScript幫助JavaScript是在瀏覽器中運行的編程語言。它可以為妳的網站或應用程序添加交互性和其他動態功能。隨著Node.js的出現，妳也可以在服務器上運行JavaScript。函數式編程函數式編程入門教程-阮壹峰JS函數式編程指南-PDF下載純函數什麽是純函數_以及為什麽要用純函數?柯裏化函數[翻譯]JavaScript中的柯裏化（CurryinginJavaScript）不可變數據immutabledata詳解從引用數據，到深拷貝，再到不可變數據。這是調用的進度，也是優化的提升。生成器函數MDNfunction*幫助異步函數MDNasyncfunction幫助網頁技術進階JSXReact中的界面描述語言React官網-JSXJSX是壹種JavaScript的語法擴展，運用於React架構中，其格式比較像是模版語言，但事實上完全是在JavaScript內部實現的。元素是構成React應用的最小單位，JSX就是用來聲明React當中的元素，React使用JSX來描述用戶界面。TypeScript嚴格JS語法的超集TypeScript中文文檔TypeScript是壹種由微軟開發的開源、跨平臺的編程語言。它是JavaScript的超集，最終會被編譯為JavaScript代碼。TypeScript添加了可選的靜態類型系統、很多尚未正式發布的ECMAScript新特性。SASS/SCSS預處理CSS的超集SASS中文官網SASS是由buby語言編寫的壹款css預處理語言，它是壹款強化CSS的輔助工具，是對CSS的擴展，它在CSS語法的基礎上增加了變量(variables)、嵌套(nestedrules)、混合(mixins)、繼承(extend)、導入(inlineimports)等高級功能，這些拓展令CSS更加強大與優雅。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#升級到最新版$nlatest#升級到定制版$nv7.10.0#切換使用版本$n7.10.0(ENTER)$nrm7.10.0#刪除制定版本$nrm7.10.0#用制定的版本執行腳本$nuse7.10.0some.js##npm#升級npm$npminstall-gnpm#查看npm版本$npm-v#升級cnpm$npm-gicnpm#查看cnpm版本$cnpm-v#關於package.jsonpackage-lock.json的作用React前端框架React官網React起源於Facebook的內部項目，是壹個用於構建用戶界面的JavaScript庫，也是Web應用程序的視圖層。Flutter原生移動應用UI框架Flutter官網Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。Flutter可以與現有的代碼壹起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。Taro多端開發前端框架Taro官方文檔Taro是壹套遵循React語法規範的多端開發解決方案。可以只書寫壹套代碼，再通過Taro的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動/QQ/京東小程序、快應用、H5、React-Native等）運行的代碼。需要node環境（>=8.0.0）#使用npm安裝CLI$npminstall-g@tarojs/cli#OR安裝了cnpm，使用cnpm安裝CLI$cnpminstall-g@tarojs/cli使用命令創建模板項目$taroinitmyApp微信小程序編譯打包#npmscript$npmrundev:weapp$npmrunbuild:weapp#僅限全局安裝$tarobuild--typeweapp--watch$tarobuild--typeweapp註意：Taro全局版本需要和項目裏的版本壹致#更新全局版本#taroupdateself[version]$taroupdateself#更新項目版本#taroupdateproject[version]$taroupdateproject錯誤：UnhandledPromiseRejectionWarning:Error:Cannotfindmodule'autoprefixer'UnhandledPromiseRejectionWarning:Error:Cannotfindmodule'webpack-sources'解決：安裝以上缺少模塊即可。異步編程Taro異步編程環境配置$npmibabel-plugin-transform-runtime-D$npmibabel-runtime《Taro框架：創建微信小程序》Taro1.x版本安裝@tarojs/async-await（2.0以上不需要）：$npmi@tarojs/async-await--savecomponentWillMount(){Taro.request({url:'ponentWillMount(){constresponse=awaitTaro.request({url:'pilerOptions":{"paths":{"@/*":["./src/*"]}}}打包文件過大調試方案打包文件過大調試方案webpack-bundle-analyzerTaroUI基於Taro的UI框架TaroUI官網安裝好Taro，創建項目後，在項目根目錄安裝taro-ui：AntDesign基於React的UI組件庫AntDesignReactantd是基於AntDesign設計體系的ReactUI組件庫，主要用於研發企業級中後臺產品。Redux基於Reactr狀態管理庫Redux中文文檔Rematch：是沒有boilerplate的Redux最佳實踐DvaJS基於redux的數據流框架DvaJS官網dva首先是壹個基於redux和redux-saga的數據流方案，然後為了簡化開發體驗，dva還額外內置了react-router和fetch，所以也可以理解為壹個輕量級的應用框架。dva通過model的概念把壹個領域的模型管理起來:包含同步更新state的reducers。處理異步邏輯的effects。訂閱數據源的subscriptions。Model對象的屬性namespace:當前Model的名稱。整個應用的State，由多個小的Model的State以namespace為key合成state:該Model當前的狀態。數據保存在這裏，直接決定了視圖層的輸出reducers:Action處理器，處理同步動作，用來算出最新的Stateeffects：Action處理器，處理異步動作$npminstalldva-cli-g$npminstall--savedva-coredva-loading#配置Taro使用，還需要安裝@tarojs/redux$npmi--saveredux@tarojs/redux@tarojs/redux-h5redux-thunkredux-loggerTaro+Dva參考：Taro+dva+Typescript搭建微信小程序架構taro+dva小程序--搭建配件過程taro+taro-ui+dva開發工具ESLint插件化JS代碼檢測工具ESLint官網ESLint是壹個插件化的javascript代碼檢測工具。VScode下搭配ESLint、typescript-eslint的代碼檢查配方vscode自帶的代碼檢查不方便，關閉。直接使用eslint，在settings.json中配置："editor.formatOnType":true,//編輯時是否自動格式化"editor.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創建後，編寫此文件規則：module.exports={"env":{"browser":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:@typescript-eslint/eslint-recommended","Taro",],"globals":{"wx":"readonly",//小程序全局變量聲明"Atomics":"readonly","SharedArrayBuffer":"readonly"},"parser":"@typescript-eslint/parser","parserOptions":{"ecmaVersion":2018,"sourceType":"module","ecmaFeatures":{"jsx":true},},"plugins":["react","@typescript-eslint"],"settings":{"react":{"createClass":"createReactClass","pragma":"React","version":"detect","flowVersion":"0.53"}},"rules":{"no-useless-return":"error",//不使用多余的return"no-unused-vars":["error",{"varsIgnorePattern":"Config"}],"react/react-in-jsx-scope":false,//避免Taro中使用React寫成react產生的報錯"react/jsx-filename-extension":[1,{"extensions":[".js",".jsx",".tsx"]}]}};參考幫助：typescript-eslint上手VScode下搭配ESLint、typescript-eslint的代碼檢查配方Jest測試框架jest中文官網2019年最流行的五大JavaScript自動化測試框架Git代碼版本管理工具Git官網Git是壹個開源的分布式版本控制系統，可以有效、高速地處理從很小到非常大的項目版本管理。github官網Git菜鳥教程jsDoc註釋文檔生成工具從註釋管理生成開發文檔jsDoc中文文檔平臺框架wx微信小程序微信小程序官方文檔微信開發者工具下載wxCloud微信雲開發雲開發文檔當使用現有項目導入後，需要創建cloudfunctions目錄，並在project.config.json中指定雲函數目錄：{..."cloudfunctionRoot":"cloudfunctions/",...}然後，在微信開發者工具中可以右鍵cloudfunctions目錄進行同步或創建雲函數。雲數據庫自動備份雲數據庫自動備份示例代碼註意：上面微信社區提供的示例代碼中有BUG，需要改造，方案是可行的。其他工具Icon圖標制作管理平臺iconfonteasyiconColor配色網配色工具色彩搭配進階理論項目開發參考開發者手冊開發者手冊-雲+社區-騰訊雲未完待更新~