什么是小程序
微信之父張小龍是這樣描述的：
小程序是一種不需要下載安裝就可以使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用觸手可及的夢(mèng)想。
用戶(hù)掃一掃或者搜一下即可打開(kāi)應(yīng)用，也體現(xiàn)了用完即走的理念。
用戶(hù)不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題：
應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)需安裝卸載。
應(yīng)用：
1.適用多種營(yíng)銷(xiāo)場(chǎng)景：網(wǎng)上開(kāi)店、數(shù)碼家電、門(mén)店引流、營(yíng)銷(xiāo)活動(dòng)、在線預(yù)約、外賣(mài)配送等。
2.適用多行業(yè)：食品快消、數(shù)碼家電、母嬰親子、美妝護(hù)膚、教育培訓(xùn)、日用百貨、水果生鮮、餐飲外賣(mài)、蛋糕烘焙、美容美發(fā)、休閑娛樂(lè)、酒店旅游等。
優(yōu)點(diǎn)：
1.開(kāi)發(fā)難度低，難度不及App，能夠滿足簡(jiǎn)單的基礎(chǔ)應(yīng)用，適合生活服務(wù)類(lèi)線下店鋪及非剛需低頻應(yīng)用的轉(zhuǎn)換。
2.同步訂單，跟微商城或零售店鋪打通，無(wú)需額外運(yùn)營(yíng)成本，輕松管理。
3.自帶流量，微信9億月活躍用戶(hù)，附近的小程序、微信搜索等功能，讓你輕松獲取流量，抓住客戶(hù)。
4.可以嘗試優(yōu)惠券/碼、滿減/送、多人拼團(tuán)等多種營(yíng)銷(xiāo)玩法，抓住流量，獲取銷(xiāo)量。
5.可以調(diào)用比H5更多的手機(jī)系統(tǒng)功能進(jìn)行開(kāi)發(fā)，例如GPS定位、錄音、拍視頻、重力感應(yīng)等，能開(kāi)發(fā)更豐富的使用場(chǎng)景。
6.打開(kāi)速度比普通H5快，接近原生App。
7.在安卓手機(jī)上可以添加到手機(jī)桌面，看上去跟原生App差不多，但僅限安卓手機(jī)，iphone就不行了。
8.運(yùn)行速度跟App差不多，也能做出很多H5做不到的功能，開(kāi)發(fā)成本跟H5差不多，相對(duì)來(lái)說(shuō)開(kāi)發(fā)成本比App要低。
缺點(diǎn)：
1.只有1M的大小，導(dǎo)致無(wú)法開(kāi)發(fā)大型的小程序，所以目前很多小程序很小、很簡(jiǎn)單。
2.小程序的技術(shù)框架還不穩(wěn)定，開(kāi)發(fā)方法時(shí)常有修改，導(dǎo)致短時(shí)間內(nèi)經(jīng)常要升級(jí)維護(hù)。
3.不能跳轉(zhuǎn)外鏈網(wǎng)址，間接影響了小程序的開(kāi)放性。
4.不能直接分享到朋友圈。
5.需要像App一樣審核上架，比H5即做即發(fā)布要麻煩。
準(zhǔn)備工作
1.注冊(cè)賬號(hào)?（https://mp.weixin.qq.com）
2.激活郵箱
3.信息登記
4.登錄小程序管理后臺(tái)（不完善好信息是無(wú)法發(fā)布小程序的）
5.完善小程序信息，綁定開(kāi)發(fā)者（尤其是團(tuán)隊(duì)多人開(kāi)發(fā)）
在官網(wǎng)下載安裝開(kāi)發(fā)工具
安裝完成后就可以登錄：微信掃碼登錄開(kāi)發(fā)者工具，這里選小程序項(xiàng)目，進(jìn)入小程序本地項(xiàng)目進(jìn)行管理
新建一個(gè)項(xiàng)目：
目錄自選本地文件夾，AppID就是登錄微信開(kāi)發(fā)平臺(tái)后的設(shè)置里能看到的AppID。
如果沒(méi)有ID也可以使用官方的測(cè)試號(hào)，但這樣只能做做簡(jiǎn)單的本地測(cè)試，最后是填上適合的項(xiàng)目名稱(chēng)。
上手第一個(gè)小程序新建項(xiàng)目
選擇一個(gè)空目錄，使用普通快速啟動(dòng)模板
然后就可以看到預(yù)設(shè)的模板和內(nèi)容了，可以直接查看或者點(diǎn)擊編譯在手機(jī)上掃一掃查看
接下來(lái)了解一下小程序的目錄結(jié)構(gòu)：
pages
index
index.js?頁(yè)面腳本邏輯文件
index.wxml?頁(yè)面模板文件
index.wxss?頁(yè)面樣式文件
index.json?單個(gè)頁(yè)面的配置信息，比如頭部底色，頭部title等
utils
app.js?全局邏輯
app.json?全局配置信息，包含了小程序的所有頁(yè)面路徑，界面表現(xiàn)，底部tab等基本信息
app.wxss?設(shè)置樣式
project.config.json?開(kāi)發(fā)工具的配置信息
小程序的啟動(dòng)過(guò)程：
打開(kāi)小程序之前，微信會(huì)把小程序的代碼包下到本地。
然后通過(guò)app.json的pages字段知道當(dāng)前小程序的所有頁(yè)面路徑，寫(xiě)在pages字段的第一個(gè)頁(yè)面就是小程序的首頁(yè)。
然后微信就把首頁(yè)代碼裝載進(jìn)來(lái)，渲染出首頁(yè)。
然后app.js里App的實(shí)例onLaunch回調(diào)就會(huì)執(zhí)行來(lái)一段簡(jiǎn)單的實(shí)戰(zhàn)，為項(xiàng)目增加一個(gè)city選擇頁(yè)：
首先添加一個(gè)新的頁(yè)面
1.在pages文件添加新頁(yè)面文件
2.為city.wxml模板頁(yè)面添加選擇器：
picker是一個(gè)類(lèi)似于select的picker組件
bindchange是用于綁定一個(gè)change事件的方法
value的值是一個(gè)序列號(hào)
range則是表示這個(gè)選擇器的取值范圍
3.然后在city.js中書(shū)寫(xiě)頁(yè)面邏輯：
Page({})是頁(yè)面的一個(gè)實(shí)例
data中的數(shù)據(jù)用于視圖綁定
bindPickerChange則是綁定的change事件的函數(shù)名
可以看到，data中的數(shù)據(jù)可以在頁(yè)面中被直接綁定使用
在js代碼中想要改變data的值也非常簡(jiǎn)單，使用this.setData就可以了
這里我們傳入了一個(gè)index序列號(hào)，也就是picker選擇器選擇了country數(shù)組中的元素。
通過(guò)這樣的方法，就可以為頁(yè)面添加不同的組件。
4.選擇之后如果想要將選中的city的值傳到其他頁(yè)面比如首頁(yè)
那么一般來(lái)講有3種方法：
第一種是將數(shù)據(jù)存到全局的data中，也就是app.js的data中，這樣所有的頁(yè)面都能取到這些數(shù)據(jù)。
但我們并不推薦這樣的用法，就如同我們不推薦使用全局變量都一樣。
第二種是將數(shù)據(jù)帶在url路徑后作為參數(shù)傳導(dǎo)：
http://local.com/foo?bar=abc。
這樣的做法在傳輸復(fù)雜數(shù)據(jù)的時(shí)候并不是太合適。
第三種則是使用本地存儲(chǔ)，在需要的頁(yè)面再將其取出就可以了：
// 存儲(chǔ)
wx.setStorageSync('city', {});
// 取出
wx.getStorageSync('city');
這樣就完成了我們的第一個(gè)上手小頁(yè)面的開(kāi)發(fā)。小程序的開(kāi)發(fā)有時(shí)候并不簡(jiǎn)單，需要等更多的學(xué)習(xí)時(shí)間來(lái)完成。北京傳誠(chéng)信網(wǎng)站建設(shè)是你的選擇。
