test

2019-11-06 09:54:45

字體：大中小

來源：轉載

供稿：網友

從零開始小程序

今天一不小心拿到了小程序的內測資格，為了不辜負微信團隊的信任，我決定十一奮斗一把！不過話說我可是一個Android工程師啊！所以就讓我們從零開始！所以本文非常適合非前端工程師學習！哈哈！都說小程序出來前端會搶移動端飯碗，但是據我所知現在好多學習的都是移動開發工程師，誰搶誰的還不一定呢！PS：表問我怎么拿到小程序內測資格的，有種東西叫內部資源！

準備工作IDE搭建知識準備從零開始app.jsapp.jsonapp.wxmlapp.wxssHello World創建程序實例美化ActionBar美化頁面配置首頁超級Hello World事件綁定函數更新界面數據

準備工作

IDE搭建

就不多說了，沒有內測碼去下載個破解版吧，我用了一下，學習完全夠了！IDE破解版+安裝教程圖片發自簡書App

知識準備

javaScrip還是要看看的，推薦教程廖雪峰大神的博客HTML+CSS 大概知道是干啥的就行

從零開始

微信小程序中就四種類型的文件

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顏色，我們只需要在里面添加如下代碼即可，下圖有參數說明！

{ "window":{ "navigationBarBackgroundColor": "#BBDEF8", "navigationBarTitleText": "Demo", "navigationBarTextStyle":"white" }}

現在看ActionBar是不是像那么回事了！好接下來我們繼續寫我們第一個界面

美化頁面

美化頁面我們用到了 wxml 和 wxss文件為了程序代碼結構簡潔我們需要在跟目錄下創建一個新文件夾名字隨意，我們這里叫pages然后在pages文件夾里再創建新文件夾名字隨意這里我們叫 index然后我們創建index.wxml文件然后在里面寫入以下代碼<view> <text class="window">Hello</text></view>然后創建index.wxss文件然后在里面寫入以下代碼.window{ color=#4995fa;}然后我們創建 index.js文件在文件中輸入如下代碼（輸入Page IDE會有提示）Page({ data:{ // text:"這是一個頁面" }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉所帶來的參數 }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關閉 }})函數解釋如下：

配置首頁

Json文件負責配置頁面路徑所以我們在里面加入如下代碼其中index的含義其實就是指index.js文件這里需要說明一點 pages 里面的路徑其實是指向js文件的如果一個目錄下沒有該名稱的js文件是會報錯的！"pages":[ "pages/index/index"],

完成了！我們來運行程序！

超級Hello World

為了學習事件綁定，以及如何將數據在頁面上更新我們來做個超級Hello World，就是我點擊文字，能讓它變色！

綁定事件

我們打開index.wxml 將里面代碼改成這樣<view> <text catchtap="click" class="window">Hello</text></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 }); },修改完后的代碼如圖