如何從零建造一個小程序項目 · 微信小程序開發文檔集合

# 如何從零建造一個小程序項目 IDE準備下載地址：mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 知識準備 JavaScrip還是要看看的，推薦教程：JavaScript 初級教程從零開始微信小程序中就四種類型的文件 js ---------- JavaScrip文件 json -------- 項目配置文件，負責窗口顏色等等 wxml ------- 類似HTML文件 wxss ------- 類似CSS文件在根目錄下用app來命名的這四中類型的文件，就是程序入口文件。 app.json 必須要有這個文件，如果沒有這個文件，IDE會報錯，因為微信框架把這個作為配置文件入口，你只需創建這個文件，里面寫個大括號就行以后我們會在這里對整個小程序的全局配置。記錄了頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。 app.js 必須要有這個文件，沒有也是會報錯！但是這個文件創建一下就行什么都不需要寫以后我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。 app.wxss 這個文件不是必須的。因為它只是個全局CSS樣式文件 app.wxml 這個也不是必須的，而且這個并不是指主界面哦~因為小程序的主頁面是靠在JSON文件中配置來決定的有了這兩個文件你運行程序，IDE就不會報錯了，也意味著這是最簡單的微信小程序創建程序實例Hello World app.js文件管理整個程序的生命周期，所以在里面添加如下代碼：（輸入App IDE會有提示） App({ onLaunch: function () { console.log('App Launch') }, onShow: function () { console.log('App Show') }, onHide: function () { console.log('App Hide') }}) 具體API解釋如下美化ActionBar json文件負責配置ActionBar顏色，我們只需要在里面添加如下代碼即可，下圖有參數說明！ Paste\_Image.png Paste\_Image.png { "window":{ "navigationBarBackgroundColor": "#BBDEF8", "navigationBarTitleText": "Demo", "navigationBarTextStyle":"white" }} Paste\_Image.png 現在看ActionBar是不是像那么回事了！好接下來我們繼續寫我們第一個界面美化頁面美化頁面我們用到了 wxml 和 wxss文件為了程序代碼結構簡潔我們需要在跟目錄下創建一個新文件夾名字隨意，我們這里叫pages 然后在pages文件夾里再創建新文件夾名字隨意這里我們叫 index 然后我們創建index.wxml文件然后在里面寫入以下代碼 Hellotext>view> 然后創建index.wxss文件然后在里面寫入以下代碼 .window{ color=#4995fa;} 然后我們創建 index.js文件在文件中輸入如下代碼（輸入Page IDE會有提示）函數解釋如下： Paste\_Image.png 配置首頁 Json文件負責配置頁面路徑所以我們在里面加入如下代碼其中index的含義其實就是指index.js文件這里需要說明一點 pages 里面的路徑其實是指向js文件的如果一個目錄下沒有該名稱的js文件是會報錯的！ "pages":\[ "pages/index/index"\], 完成了！我們來運行程序！超級Hello World 為了學習事件綁定，以及如何將數據在頁面上更新我們來做個超級Hello World，就是我點擊文字，能讓它變色！綁定事件我們打開index.wxml 將里面代碼改成這樣 Hellotext>view> 其實也就是加了catchtap="click" 這兩個屬性是什么意思呢別著急我會一一解釋上圖展示了事件的一些的屬性名稱，這里需要注意紅框標注起來的內容，區分出冒泡事件和非冒泡事件，其實冒泡事件就是需要往上面一層容器傳遞這個事件。看了這圖我們再來看 catchtap="click" 的含義 catch 代表非冒泡事件 tap 代表點擊事件所以連在一起就是非冒泡點擊事件那后面那個click是啥 click 其實只是個變量名字我們在index.js需要用這個名字綁定接收事件的函數我們打開index.js 然后添加如下函數 click:function(){ console.log("點擊了文字"); }, 添加完后代碼長這樣紅框中就是添加的這個代碼所以其實點擊事件的回調函數就是 catchtap="click" 中的 click 后面加上 :function() 構成的現在我們來運行程序試試然后點擊文字看是不是調用了 click:function 函數并且打出了log 好接下來我們寫點擊一下變色的邏輯那如何讓一個文字變色呢，當然是css 所以我們需要再index.wxss 中添加一個樣式 .window-red{ color:#D23933;} 然后我們進入index.js文件你會發現代碼里面有個 data:{} 它不是page生命周期函數其實他是個變量的數組，這個里面申請的變量都可以在 wxml中使用我們在這里申請一個color color的值就是index.wxss中的樣式名稱然后進入index.wxml中,將class中的值改成 {{color}} 其實意思就是將js文件中變量 color的值在這里使用也就是值等于 window 然后我們再回到index.js文件在最上面申請一個變量控制點擊然后在click:function() 函數中添加如下代碼 click:function(){ console.log("點擊了文字"); if(flag){ color = "window-red"; flag = false; }else{ color = "window"; flag = true; } this.setData({ color }); }, 修改完后的代碼如圖其實就是在點擊是后更換color變量的值而更換的這個值其實就是樣式的名稱更新界面數據這里有個問題我們更換完值但是在wxml中不會立即生效所以我們需要調用 this.setData()方法將值同步給wxml 讓它立即生效好了我們運行程序點擊Hello 看看是不是點一下變一下顏色！最后再補充一點 index目錄下也是可以配置 json文件的也就是每個頁面都可以配置自己獨特的actionbar顏色等等這里的配置會覆蓋 app.json文件的配置 github源碼地址 <https://github.com/pwh0996/WXDemo.git>