微信小程序，估計大家都不陌生，現(xiàn)在應(yīng)用場景特別多。今天就系統(tǒng)的介紹一下小程序開發(fā)。注意，這里只從項目代碼上做解析，不涉及小程序如何申請、打包、發(fā)布的東西。（這些跟著微信官方文檔的流程走就好）。好了廢話不多說，看目錄。

　　注: 小程序是一套特殊的東西，融合了原生和web端。他是一個不完整的瀏覽器對象，所以很多DOM 、 BOM 的東西無法使用，但是他又通過微信APP實現(xiàn)了多線程。

　　很簡單，首先下載微信開發(fā)者工具，下載穩(wěn)定版本的就好。下載然后，創(chuàng)建小程序，可以參考下述圖片：

　　注意正式的小程序需要審批，拿到正式的APPID，我們測試的或者暫時沒有的可點那個測試的appid，小程序模板選擇默認(rèn)就好。按照這樣的流程走完，我們就創(chuàng)建完一個小程序了。

　　創(chuàng)建完小程序之后，我們先不著急開發(fā)。工欲善其事必先利其器，微信開發(fā)者工具有點卡，而且功能少，開發(fā)效率很低。所以我們還是改造自己的編譯器，這里只介紹2種方法。一是 hbuilderX，他有支持小程序的模塊，很小巧的一款編譯器； 二是 webstorm，我用的他，在這介紹一下配置的方法，其他的大家自行g(shù)oogle吧。

　　2、支持小程序代碼提醒。下載這個文件，然后，把他放到一個顯眼的地方； 然后， webstorm 點擊 文件 -- 導(dǎo)入設(shè)置 ，找到這個下載的文件，點擊確定即可。

　　app.json: 當(dāng)前項目的配置文件。包括項目的頁面引入、導(dǎo)航條顏色、導(dǎo)航條標(biāo)題 等等，是項目具體到代碼開發(fā)上的配置。介紹幾個配置：

　　pages： 包含的頁面。每次新增頁面都得在這里引入，否則新頁面的json配置等無法生效。 注意pages中頁面先寫的先渲染，所以數(shù)組第一條也就是我們的首頁。

　　app.js: 小程序入口文件。生成小程序?qū)嵗珹pp({}), 通常在這獲取用戶信息、授權(quán)信息、定義全局變量等。

　　app.wxss: 小程序全局 style 文件。對整個項目頁面生效。通常規(guī)定項目的 字體、基礎(chǔ)顏色，定義一些公共樣式。

　　utils: 工具函數(shù)目錄。通常用來放一些公共的js方法。比如封裝的request請求，一些別的處理數(shù)據(jù)什么的方法。

　　上邊大致解釋了一下小程序的基礎(chǔ)文件，現(xiàn)在按照常見的規(guī)范完善一下項目目錄，這里面包含一些個人見解，有需要的參考即可。先看一下結(jié)果：

　　現(xiàn)在大致解釋一下小程序的語法。首先， 創(chuàng)建新頁面，默認(rèn)都創(chuàng)建 *.wxml *.wxss *.js *.json 和我們平時寫的代碼差不多，都是html js css，多了個json配置文件

　　*.js：getApp() 獲取小程序?qū)嵗?，拿全局變量等?Page({}) 創(chuàng)建頁面； data 當(dāng)前頁面的變量；onLoad 生命周期，頁面加載完畢。

　　*.wxml：注意，小程序支持的標(biāo)簽很少，像 span 是支持的，div不支持，一般用view代替塊級，span、text 代替行級。

　　*.wxss：大部分css選擇器不支持，支持的好像才5個，想支持less等得自己配置

　　和通常的web開發(fā)一樣，小程序頁面跳轉(zhuǎn)頁分2中，wxml中的vavigator標(biāo)簽，以及js的navigator相關(guān)的api。路由跳轉(zhuǎn)的方法有好幾個，這里不一一贅述了，常用的直接跳轉(zhuǎn)

　　wx.navigateTo，重定向 wx.redirectTo等等，具體的請看官方文檔。這里強調(diào)一下路由傳參，很簡單：

　　1、少量數(shù)據(jù)。直接問號傳參。然后在目標(biāo)頁面的onLoad方法中通過options參數(shù)接收。

　　在utils中新建request.js，簡單封裝了一下，一些數(shù)據(jù)要全局配置的都引進(jìn)來，然后做了些錯誤的統(tǒng)一處理，沒什么難度，不過要特別注意一下cookie的攜帶。具體代碼如下：

　　然后我們使用的時候直接使用封裝好的request方法，這樣所有的api就封裝成一個個函數(shù)。我們在頁面中直接import引入調(diào)用即可。

　　因為小程序使用的是不完整的瀏覽器對象，所以很多js包都是不好使的，比如jquery之類的。所以npm基本是廢了，能用的依賴包很少，具體哪些能用得自己發(fā)掘了。這里還是要介紹一下小程序如何使用npm，畢竟有些包還是要用的。

　　6、最后記得忽略文件。新建 .gitignore 文件，node_modules 、 package_lock.json 等文件不需要上傳，最好只保留小程序的npm構(gòu)建包，用什么依賴也是的那個下載。這個到不是必須的

　　九游娛樂官方網(wǎng)址

　　ps: 特殊注意一下weui的引入，這個ui庫是純css的，沒有js文件，所以他沒法用npm引入，而是直接下載文件，我直接丟到根目錄下，然后在 app.wxss 文件的開頭引入

　　以上就是我開發(fā)小程序的一些經(jīng)驗和總結(jié)，希望能幫到你。另外，整套程序的骨架（業(yè)務(wù)代碼刪掉了）我會上傳到github，下載有需要的可以去下載，記得點個贊，哈哈。

　　最后，我會另寫一篇博客，寫一下 如何封裝小程序 組件，并附上 我開發(fā)小程序遇到的坑，以及對應(yīng)的解決方法。

　　以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。