一．鹽城微信小程序應用分析

　　1、簡單介紹

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

　　2、實質

　　微信小程序就是Hybrid技術的應用。

　　Hybrid APP(混合模式移動應用)。

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

　　3、小程序注冊

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

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

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

• onLoad: 頁面加載

　　一個頁面只會調用一次。

• onShow: 頁面顯示

　　每次打開頁面都會調用一次。

• onReady: 頁面初次渲染完成

　　一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互

• onHide: 頁面隱藏

　　當navigateTo或底部tab切換時調用

• onUnload: 頁面卸載

　　當redirectTo或navigateBack的時候調用

　　二．小程序實例解析

　　1、創(chuàng)建項目

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

　　選擇項目目錄，再添加項目即可。

　　2、 編寫代碼

　　點擊開發(fā)者工具左側導航的「編輯」，我們可以看到這個項目，已經初始化并包含了一些簡單的代碼文件。是 app.js、app.json、app.wxss 這三個。其中app.js是我們傳統(tǒng)的js文件，app.json是項目配置文件，app.wxss是項目css文件，微信小程序會讀取這些文件，并生成小程序實例。

　　(1)app.json:

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

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

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

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

　　(2)tabBar:

　　tabBar是底部導航欄部分，tabBar API為

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

　　案例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文件相當于傳統(tǒng)的html文件，省去了一些微信APP開發(fā)不需要的標簽，如H1-H5，用了這些就會報錯，其中html中的div標簽，在微信中變成了view標簽。（也就是換了個名字...）

　　(4)app.js:

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

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

　　事件的使用方式:

　　首先在wxml里面寫入一個bindtap點擊事件。

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

　　然后再js的page對象中定義：

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

　　數據渲染:

　　在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。默認數組的當前項的下標變量名默認為index，數組當前項的變量名默認為item

喜歡我們的會點贊，愛我們的會分享！