從零開始

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

• js-----------JavaScript文件
• json---------項(xiàng)目配置文件聪铺，負(fù)責(zé)窗口的顏色等等
• wxml---------類似html文件
• wxss---------類似CSS文件

在根目錄下用app來命名的這四種類型的文件计寇，就是程序入口文件脂倦。

app.json

必須要有這個(gè)文件，如果沒有這個(gè)文件蝶押，IDE就會(huì)報(bào)錯(cuò)火欧，因?yàn)槲⑿趴蚣馨堰@個(gè)作為配置文件入口苇侵，我們只需要?jiǎng)?chuàng)建這個(gè)文件榆浓，在里面寫個(gè)大括號(hào)就行。以后我們會(huì)在這里對(duì)整個(gè)小程序的全局配置烘浦。記錄了頁(yè)面的組成闷叉，配置小程序的窗口脊阴、背景嘿期、配置導(dǎo)航條的樣式，配置默認(rèn)標(biāo)題孽查。

app.js

必須要有這個(gè)文件盲再，沒有也是會(huì)報(bào)錯(cuò)的，但是這個(gè)文件創(chuàng)建一下就行贷揽，什么都不用寫禽绪，以后我們可以在這個(gè)文件中監(jiān)聽并且處理小程序的生命周期函數(shù)印屁、聲明全局變量斩例。

app.wxss

這個(gè)文件不是必須的念赶。一位內(nèi)他只是全局的css文件的樣式叉谜。

app.wxml

這個(gè)也不是必須的，而且這個(gè)指的并不是主界面很钓，因?yàn)樾〕绦蛑械闹鹘缑媸强縅SON文件中的配置類決定的履怯。

有了app.js,app.json這兩個(gè)文件在運(yùn)行程序的時(shí)候IDE就不會(huì)報(bào)錯(cuò)了裆泳，也意味著這就是最簡(jiǎn)單的微信小程序

Hello Word

創(chuàng)建程序?qū)嵗?/h4>

app.js文件管理整個(gè)程序的生命周期工禾，所以在里面添加如下的代碼：（輸入App IDE會(huì)有提示）

App({
    onlaunch: function() {
        console.log('App Launch')
    },
    onShow: function() {
        console.log('App Show')
    },
    onHide: function() {
        console.log('App Hide')
    }
})

具體的API解釋如下

App()

App() 函數(shù)用來注冊(cè)一個(gè)小程序闻葵。接受一個(gè)Object參數(shù)槽畔，其制定小程序的生命周期函數(shù)胁编。

object參數(shù)說明

前臺(tái)斧拍、后臺(tái)定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉饮焦，或者按了設(shè)備的Home鍵離開溫馨，小程序并沒有直接銷毀转绷，而是進(jìn)入了后臺(tái)硼啤；當(dāng)再次打開微信或者進(jìn)入小程序的時(shí)候议经，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。只有當(dāng)小程序進(jìn)入后臺(tái)一定的時(shí)間谴返，或者系統(tǒng)資源占用過高煞肾，才會(huì)被真正的銷毀。

美化ActionBar

json文件負(fù)責(zé)配置ActionBar顏色嗓袱，我們只需要在里面添加如下代碼即可

app.json配置項(xiàng)列表

美化界面

美化界面用到的是wxml渠抹、wxss文件，為了讓程序代碼結(jié)構(gòu)簡(jiǎn)潔我們需要在根目錄下創(chuàng)建一個(gè)新文件夾梧却，名字隨意奇颠，這里我們叫pages，然后我們?cè)趐ages文件夾里面在創(chuàng)文件夾放航，名字隨意烈拒，這里我們叫index
然后我們創(chuàng)建index.wxml文件然后在里面寫入以下代碼

<view>
    <text class="window">Hello</text>
</view>

然后我們創(chuàng)建index.wxss文件，在文件中輸入如下代碼

.window{
    color: #4994fa;
}

然后我們?cè)趧?chuàng)建index.js文件
在文件中輸入如下代碼（輸入Page IDE會(huì)有提示）

Page({
    data: {
        //text: "這是一個(gè)頁(yè)面"
    }，
    onLoad: function(options) {
        //頁(yè)面初始化options為頁(yè)面跳轉(zhuǎn)所帶來的參數(shù)
    }荆几，
    onReady: function() {
        //頁(yè)面渲染完成
    }吓妆，
    onShow: function() {
        //頁(yè)面顯示
    }，
    onHide：function() {
        //頁(yè)面隱藏
    }伴郁，
    onUnload: function() {
        //頁(yè)面關(guān)閉
    }
})

函數(shù)解釋如下：

Page

Page()函數(shù)用來注冊(cè)一個(gè)頁(yè)面耿战。接受一個(gè)Object參數(shù)，其制定頁(yè)面的初始化數(shù)據(jù)焊傅、生命周期函數(shù)剂陡、事件處理函數(shù)等。

Object參數(shù)說明

配置首頁(yè)

Json文件負(fù)責(zé)配置頁(yè)面的路徑
所以我們?cè)诶锩婵梢约尤肴缦麓a
其中index的含義其實(shí)就是指index.js文件
這里需要說明一點(diǎn)pages里面的路徑其實(shí)是指向js文件的
如果一個(gè)目錄下沒有該名稱的js文件是會(huì)報(bào)錯(cuò)的鸭栖！

"pages": [
    "pages/index/index"
]

超級(jí)Hello World

為了學(xué)習(xí)綁定，以及如何將數(shù)據(jù)在頁(yè)面更新
我們來做一個(gè)超級(jí)Hwllo World握巢，就是我點(diǎn)擊他的時(shí)候能讓文字變色晕鹊！

綁定事件

我們打開index.wxml將里面的代碼改成下面這樣

<view>
    <text catchtap="click" class="window">Hello</text>
</view>

其實(shí)也就是增加了

• catchtap='click'

這兩個(gè)屬性是什么意思呢？慢慢來解釋

注：除上表之外的其他組件自定義事件都是非冒泡事件歌焦，如<form/>的submit事件飞几，<input/>的input事件，<scroll-view/>的scroll事件独撇。

事件綁定

事件綁定的寫法同組件的屬性屑墨，以key, value的形式。

• key以bind或catch開頭纷铣， 然后跟上事件的類型卵史，如bindtap, catchouchstart
• value是一個(gè)字符串，需要在對(duì)應(yīng)的Page中定義同名的函數(shù)搜立。不然當(dāng)初發(fā)事件的時(shí)候會(huì)報(bào)錯(cuò)以躯。

bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡啄踊。

上面展示了事件的一些的屬性名稱寸潦，這里需要注意黃色標(biāo)準(zhǔn)的內(nèi)容，區(qū)分冒泡事件和非冒泡事件社痛，其實(shí)冒泡事件就是需要往上面一層容器傳遞這個(gè)事件。

看了這段代碼我們?cè)賮砝斫鈉atchtap="click"的含義
catch代表非冒泡事件命雀，tap代表點(diǎn)擊事件蒜哀，所以連在一起就是非冒泡點(diǎn)擊事件，后面的click只是一個(gè)變量的名字，我們?cè)趇ndex.js需要用這個(gè)名字綁定接受事件的函數(shù)撵儿。
我們?cè)趇ndex.js文件中添加如下函數(shù)

click: function() {
    console.log("點(diǎn)擊了文字")乘客；
}

添加完成之后index.js中的文件就是如下這樣

Page({
    data: {
        //text: "這是一個(gè)頁(yè)面"
    },
    click: function() {
        console.log("點(diǎn)擊了文字")
    },
    onLoad: function(options) {
        //頁(yè)面初始化options為頁(yè)面跳轉(zhuǎn)所帶來的參數(shù)
        console.log("Page OnLoad")
    },
    onReady: function() {
        //頁(yè)面顯示
        console.log(“Page onReady”);
    },
    onShow: function() {
        //頁(yè)面顯示
        console.log(“Page onShoe”)
    },
    onHide: function() {
        //頁(yè)面隱藏
        console.log("Page onHide")
    },
    onUnload: function() {
        //頁(yè)面關(guān)閉
        console.log("Page onUnload")
    }
})

所以點(diǎn)擊事件的回掉函數(shù)就是catchtap="click"中的click后面加上：function()構(gòu)成的，
當(dāng)我們點(diǎn)擊文字時(shí)控制臺(tái)中打印出了log淀歇。

接下來我們來寫一下點(diǎn)擊變色的邏輯易核，但是如何讓文字變色的呢，肯定是css浪默，所以我們需要在index.wxss中添加一個(gè)樣式牡直。

.window-red{
    color:#D23933;
}

此時(shí)index.wxss中的代碼為：

.window{
    color: #49bb16;
}
.window-red{
    color:#D23933;
}

然后我們進(jìn)入index.js文件，你會(huì)發(fā)現(xiàn)在代碼里面有一個(gè)data：{}他不是page生命周期函數(shù)纳决，其實(shí)他是一個(gè)變量的數(shù)組碰逸，這個(gè)里面申請(qǐng)的變量都可以在wxml中使用。

data: {
    //text: "這是一個(gè)頁(yè)面"
}

我們?cè)谶@里申請(qǐng)了一個(gè)color

data: {
    //text: "這是一個(gè)頁(yè)面"
    color: "window"
}

color的值就是index.wxss的樣式名稱阔加，然后我們進(jìn)入index.wxml中,將class中的值改成{{color}}

<view>
    <text catchtap='click' class='{{color}}'>Hello</text>
</view>

其實(shí)意思就是將js文件中變量color的值在這里使用饵史，也就是值等于window，然后我們?cè)诨氐絠ndex.js文件胜榔，在最上面申請(qǐng)一個(gè)變量控制點(diǎn)擊胳喷，然后我們?cè)赾lick：function()函數(shù)中添加如下代碼

click: function() {
    console.log('點(diǎn)擊了文字');
    if(flag) {
        color = "window-red";
        flag = false;
    } else {
        color = "window"
    }
    this.setData({
        color
    });

}

其實(shí)就是在點(diǎn)擊后更換color變量的值，而更換的這個(gè)值其實(shí)就是樣式的名稱

更新界面數(shù)據(jù)

這里有一個(gè)問題夭织，就是我們?cè)诟鼡Q完值吭露，但是在wxml中不會(huì)立即生效，所以我們需要調(diào)用this.setData()方法將值同步給wxml讓他立即生效

最后補(bǔ)充一點(diǎn)index目錄下也是可以配置json文件的摔癣，也就是每個(gè)頁(yè)面都可以配置自己獨(dú)特的actionbar顏色等等奴饮，這里的配置會(huì)覆蓋app.json文件的配置。