一．鹽城微信小程序應(yīng)用分析

　　1、簡單介紹

　　小程序是一種鹽城微信開發(fā)不需要下載安裝即可使用的應(yīng)用。

　　2、實(shí)質(zhì)

　　微信小程序就是Hybrid技術(shù)的應(yīng)用。

　　Hybrid APP(混合模式移動(dòng)應(yīng)用)。

　　小程序能夠更多的可以更多的調(diào)用手機(jī)本身的功能（如位置信息，攝像頭等）。

　　3、小程序注冊(cè)

　　小程序開發(fā)框架的邏輯層是由JavaScript編寫。 邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。小程序再次基礎(chǔ)上做了一些修改方便開發(fā)： 增加 APP 和 Page 方法，進(jìn)行程序和頁面的注冊(cè)。

　　APP( ) 函數(shù)用來注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。

　　Page() 函數(shù)用來注冊(cè)一個(gè)頁面。接受一個(gè) object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。生命周期函數(shù)為：

• onLoad: 頁面加載

　　一個(gè)頁面只會(huì)調(diào)用一次。

• onShow: 頁面顯示

　　每次打開頁面都會(huì)調(diào)用一次。

• onReady: 頁面初次渲染完成

　　一個(gè)頁面只會(huì)調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互

• onHide: 頁面隱藏

　　當(dāng)navigateTo或底部tab切換時(shí)調(diào)用

• onUnload: 頁面卸載

　　當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用

　　二．小程序?qū)嵗馕?/strong>

　　1、創(chuàng)建項(xiàng)目

　　現(xiàn)在是內(nèi)測版本，所有的AppID全部都是騰訊內(nèi)部發(fā)布的。但是，沒有AppID也不影響測試開發(fā)，我們可以選擇無AppID進(jìn)行測試開發(fā)，只是不能在手機(jī)真機(jī)上面調(diào)試。

　　選擇項(xiàng)目目錄，再添加項(xiàng)目即可。

　　2、 編寫代碼

　　點(diǎn)擊開發(fā)者工具左側(cè)導(dǎo)航的「編輯」，我們可以看到這個(gè)項(xiàng)目，已經(jīng)初始化并包含了一些簡單的代碼文件。是 app.js、app.json、app.wxss 這三個(gè)。其中app.js是我們傳統(tǒng)的js文件，app.json是項(xiàng)目配置文件，app.wxss是項(xiàng)目css文件，微信小程序會(huì)讀取這些文件，并生成小程序?qū)嵗?/p>

　　(1)app.json:

　　app.json 是對(duì)整個(gè)小程序的全局配置。其中有5個(gè)屬性，官方給出的配置表為：

　　我們可以在這個(gè)文件中配置小程序是由哪些頁面組成，配置鹽城小程序的窗口  背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。

　　window是用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

　　pages里面是程序的所有頁面的目錄，所有需要跳轉(zhuǎn)的頁面，都需要在pages里面配置好。

　　(2)tabBar:

　　tabBar是底部導(dǎo)航欄部分，tabBar API為

　　tabBar配置好后，在任何頁面下，都會(huì)有一個(gè)tab導(dǎo)航欄，其中l(wèi)ist里面是配置tab里有多少個(gè)按鈕,案例中為兩個(gè)。list里面有多個(gè)屬性，

　　案例APP的app.json為：

　　{

　　"pages":[

　　"pages/index/index",

　　"pages/logs/logs"

　　],

　　"window":{

　　"backgroundTextStyle":"light",

　　"navigationBarBackgroundColor": "green",

　　"navigationBarTitleText": "APP",

　　"navigationBarTextStyle":"white"

　　},

　　"tabBar": {

　　"selectedColor":"red",

　　"list": [{

　　"pagePath": "pages/index/index",

　　"text": "首頁",

　　"iconPath":"goods_mgold.png",

　　"selectedIconPath":"goods_mgold.png"

　　}, {

　　"pagePath": "pages/logs/logs",

　　"text": "天氣查詢",

　　"iconPath":"icon_community.png",

　　"selectedIconPath":"icon_community.png"

　　}]

　　}

　　}

　　上面那段配置代碼展示出來的效果是：

　　(3)wxml文件：

　　微信的wxml文件相當(dāng)于傳統(tǒng)的html文件，省去了一些微信APP開發(fā)不需要的標(biāo)簽，如H1-H5，用了這些就會(huì)報(bào)錯(cuò)，其中html中的div標(biāo)簽，在微信中變成了view標(biāo)簽。（也就是換了個(gè)名字...）

　　(4)app.js:

　　app.js是鹽城微信小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用 MINA 提供的豐富的 API。代碼主要是寫在APP對(duì)象里面作用于全局。

　　其中每個(gè)頁面都可以有自己的js文件，例如index.js就是Index.wxml頁面的js代碼，其中js代碼的一些應(yīng)用主要是寫在page對(duì)象里面。

　　事件的使用方式:

　　首先在wxml里面寫入一個(gè)bindtap點(diǎn)擊事件。

　　<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

　　然后再js的page對(duì)象中定義：

　　就可以實(shí)現(xiàn)一個(gè)點(diǎn)擊事件。其中bind是綁定，type為tap。type是事件類型。

　　數(shù)據(jù)渲染:

　　在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item

喜歡我們的會(huì)點(diǎn)贊，愛我們的會(huì)分享！