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