? ? ? ? 在Android 項(xiàng)目不忙之余璧疗，自學(xué)了微信小程序入門(mén)皆的。常聽(tīng)前輩說(shuō)悲敷，做一名開(kāi)發(fā)人員最重要的不是你會(huì)什么語(yǔ)言究恤， 而是在面對(duì)不會(huì)的語(yǔ)言和未接觸過(guò)的任務(wù)時(shí)，有著怎樣的學(xué)習(xí)力和學(xué)習(xí)邏輯后德。仿佛又回到了高三那一段難忘的學(xué)習(xí)階段部宿，用了小三天時(shí)間，可以說(shuō)是入了個(gè)小門(mén)。下面將自己踩得坑，和從別人的帖子里學(xué)來(lái)的經(jīng)驗(yàn)慷垮，做一個(gè)總結(jié)，留給自己回憶雾叭，留給后人學(xué)習(xí)。

一藏雏、小程序是什么拷况。

? ? ? ? ? ? 首先，你要對(duì)小程序的開(kāi)發(fā)有一個(gè)整體的概念掘殴。

? ? ? ? ? ? 對(duì)于小程序到底是什么的這個(gè)問(wèn)題赚瘦，百度百科已經(jīng)給出了一個(gè)比較親民且容易理解的答案。

Q：小程序是什么奏寨？它有著什么樣的功能起意？

A：小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想病瞳，用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用揽咕。也體現(xiàn)了“用完即走”的理念悲酷，用戶不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在亲善，隨時(shí)可用设易，但又無(wú)需安裝卸載。對(duì)于開(kāi)發(fā)者而言蛹头，小程序開(kāi)發(fā)門(mén)檻相對(duì)較低顿肺，難度不及APP，能夠滿足簡(jiǎn)單的基礎(chǔ)應(yīng)用渣蜗，適合生活服務(wù)類線下商鋪以及非剛需低頻應(yīng)用的轉(zhuǎn)換屠尊。小程序能夠?qū)崿F(xiàn)消息通知、線下掃碼耕拷、公眾號(hào)關(guān)聯(lián)等七大功能讼昆。其中，通過(guò)公眾號(hào)關(guān)聯(lián)骚烧，用戶可以實(shí)現(xiàn)公眾號(hào)與小程序之間相互跳轉(zhuǎn)浸赫。由于小程序不存在入口。[6]

Q：小程序可以和現(xiàn)有的App 打通嗎止潘？

A：小程序可以借助微信聯(lián)合登錄掺炭，和開(kāi)發(fā)者已有的App?后臺(tái)的用戶數(shù)據(jù)進(jìn)行打通，但不會(huì)支持小程序和App 直接的跳轉(zhuǎn)凭戴。

Q：微信已經(jīng)有了訂閱號(hào)、服務(wù)號(hào)炕矮、企業(yè)號(hào)么夫，小程序和這三者有什么不同？

A：小程序肤视、訂閱號(hào)档痪、服務(wù)號(hào)、企業(yè)號(hào)是并行的體系邢滑。

Q：外界有說(shuō)法稱腐螟，小程序的推出意味著微信要做一個(gè)應(yīng)用分發(fā)市場(chǎng)，是這樣嗎困后？

A：微信推出小程序乐纸，并非想要做應(yīng)用分發(fā)市場(chǎng)，而是給一些優(yōu)質(zhì)服務(wù)提供一個(gè)開(kāi)放的平臺(tái)摇予。

? ? ? ? 但從小程序的開(kāi)發(fā)結(jié)構(gòu)上來(lái)說(shuō)汽绢，微信小程序應(yīng)該屬于前端開(kāi)發(fā)，其結(jié)構(gòu)中的wxml侧戴、js宁昭、wxss同web開(kāi)發(fā)的結(jié)構(gòu)有類似的地方跌宛。

二、開(kāi)發(fā)工具和開(kāi)發(fā)環(huán)境

? ? ? ? 這一部分網(wǎng)上有很多帖子可以查找积仗，官方也給出了工具下載和開(kāi)發(fā)api的地址疆拘。

? ? ? ? 微信公眾平臺(tái)給出了小程序的設(shè)計(jì)、介紹寂曹、使用哎迄、注冊(cè)、工具稀颁、數(shù)據(jù)綁定等幾乎全部功能的說(shuō)明芬失，初學(xué)者可以先去瀏覽一遍，心里對(duì)小程序有個(gè)粗略的認(rèn)識(shí)匾灶，將工具下載安裝棱烂，賬號(hào)注冊(cè)，做好一切準(zhǔn)備之后阶女，再來(lái)進(jìn)行入門(mén)的開(kāi)發(fā)學(xué)習(xí)颊糜。

????????微信公眾平臺(tái)關(guān)于小程序的入口地址：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2018211

三、新建項(xiàng)目秃踩，認(rèn)識(shí)架構(gòu)

? ? ? ? 打開(kāi)工具的時(shí)候衬鱼，會(huì)進(jìn)入這個(gè)新建項(xiàng)目的頁(yè)面。

? ??????可以看到憔杨，要添加一個(gè)新的小程序項(xiàng)目需要填寫(xiě)三部分內(nèi)容：AppID鸟赫，項(xiàng)目名稱，項(xiàng)目目錄消别。為了能快速開(kāi)發(fā)抛蚤，我們先選擇 無(wú)AppID 這個(gè)選項(xiàng)，如果正式開(kāi)發(fā)寻狂，是需要添加AppId的岁经，關(guān)于Appid的部分可以去查詢資料。

????????項(xiàng)目目錄蛇券，是指你的小程序的代碼將放在哪個(gè)目錄下缀壤，你可以自己在本地創(chuàng)建一個(gè)文件夾，也可以在github創(chuàng)建一個(gè)新項(xiàng)目纠亚，都可以塘慕。

配置小程序

這一節(jié)，我們將介紹小程序的配置菜枷。首先苍糠，讓我們來(lái)看看項(xiàng)目自動(dòng)生成的app.json文件長(zhǎng)什么樣子。

{

? "pages":[

? ? "pages/index/index",

? ? "pages/logs/logs"

? ],

? "window":{

? ? "backgroundTextStyle":"light",

? ? "navigationBarBackgroundColor": "#fff",

? ? "navigationBarTitleText": "WeChat",

? ? "navigationBarTextStyle":"black"

? }

}

其實(shí)這里啤誊，共有五個(gè)部分可以配置岳瞭，分別是pages,?window,?tarBar,?networkTimeout和debug

pages：定義的是這個(gè)小程序由哪些頁(yè)面組成拥娄。

在以后需要新增或者減少頁(yè)面時(shí)，都需要在這里進(jìn)行設(shè)置瞳筏，有幾個(gè)頁(yè)面pages數(shù)組就有幾項(xiàng)稚瘾。

可以看到pages是一個(gè)數(shù)組，而數(shù)組的第一項(xiàng)就是小程序的初始頁(yè)面姚炕，你可以試著把logs頁(yè)面移動(dòng)到最前面看看效果摊欠，這在開(kāi)發(fā)的時(shí)候是一個(gè)不錯(cuò)的小技巧。

還有一個(gè)技巧要分享給你的是柱宦，在我們需要添加一個(gè)新頁(yè)面的時(shí)候些椒，沒(méi)必要傻傻的手動(dòng)去創(chuàng)建文件夾，然后新建xxx.josn, xxx.js, xxx.wxml, xxx.wxss這四個(gè)文件掸刊。我們只要在 pages數(shù)組中 添加一個(gè)你想創(chuàng)建的頁(yè)面免糕，然后 Ctrl + s 保存即可！是不是很酷忧侧？

{

? "pages":[

? ? "pages/logs/logs",

? ? "pages/index/index"

? ],

? ...

}

window: 定義的是窗口的配置信息石窑。

屬性類型默認(rèn)值描述

navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，如"#000000"

navigationBarTextStyleStringwhite導(dǎo)航欄標(biāo)題顏色蚓炬，僅支持 black/white

navigationBarTitleTextStringa導(dǎo)航欄標(biāo)題文字內(nèi)容

backgroundColorHexColor#ffffff窗口的背景色

backgroundTextStyleStringdark下拉背景字體松逊、loading 圖的樣式，僅支持 dark/light

enablePullDownRefreshBooleanfalse是否開(kāi)啟下拉刷新

tarBar: 用來(lái)定義 tabBar 的表現(xiàn)

tabBar 是一個(gè)數(shù)組肯夏，只能配置最少2個(gè)经宏、最多5個(gè) tab，tab 按數(shù)組的順序排序驯击。

我們可以在項(xiàng)目目錄下添加一個(gè)images文件烛恤，用來(lái)存放我們的圖片文件。

注意：目前小程序只支持網(wǎng)絡(luò)圖片或者base64圖片余耽，使用本地圖片需要將圖片轉(zhuǎn)為base64代碼

networkTimeout: 用來(lái)設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間。

如果你不是很清楚這個(gè)networkTimeout配置有什么作用苹熏，那么忽略就好碟贾。這對(duì)實(shí)際開(kāi)發(fā)并沒(méi)有什么影響。

屬性類型必填說(shuō)明

requestNumber否wx.request的超時(shí)時(shí)間轨域，單位毫秒

connectSocketNumber否wx.connectSocket的超時(shí)時(shí)間袱耽，單位毫秒

uploadFileNumber否wx.uploadFile的超時(shí)時(shí)間，單位毫秒

downloadFileNumber否wx.downloadFile的超時(shí)時(shí)間干发，單位毫秒

小程序的主體部分朱巨，可以從圖中看出，主要有三個(gè)部分枉长。

????????1）app.js：小程序邏輯冀续，初始化APP

????????2）app.json ：小程序配置琼讽，比如導(dǎo)航、窗口洪唐、頁(yè)面http請(qǐng)求跳轉(zhuǎn)等钻蹬。全局配置頁(yè)面文件的路徑、窗口表現(xiàn)凭需、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間问欠、設(shè)置多 tab 等。

????????3）app.wxss：公共樣式配置

前面也說(shuō)了粒蜈，小程序主要有四個(gè)頁(yè)面組成部分

????????1）js：頁(yè)面邏輯

????????2）wxml：頁(yè)面結(jié)構(gòu)展示

????????3）wxss：頁(yè)面樣式表

????????4）json：頁(yè)面配置顺献，配置一些頁(yè)面展示的數(shù)據(jù)

四、添加一個(gè)button

? ? ? ? 下面讓我們來(lái)添加一個(gè)button吧

????????????首先枯怖，我們要告訴小程序有哪些頁(yè)面注整。 其次，需要設(shè)置小程序的導(dǎo)航欄標(biāo)題嫁怀，圖如上面的app.json圖中所示设捐。

? ? 1.首先，打開(kāi)index.wxml頁(yè)面塘淑，這個(gè)頁(yè)面現(xiàn)在就是被首頁(yè)tab調(diào)用的頁(yè)面萝招，先不管在哪調(diào)用的，我們現(xiàn)在頁(yè)面中加三個(gè)button存捺。小程序的頁(yè)面架構(gòu)跟web頁(yè)面有些類似槐沼，wxml類似于html，從圖中可以看到捌治，將button放到view這個(gè)布局中岗钩，bindtab是點(diǎn)擊事件的調(diào)用名，其點(diǎn)擊效果會(huì)在對(duì)應(yīng)的js頁(yè)面中被觸發(fā)肖油。

? ? ? 2.對(duì)應(yīng)上圖兼吓，我們可以找到j(luò)s中對(duì)應(yīng)的事件觸發(fā)及所調(diào)用的頁(yè)面

????3.此時(shí)如果運(yùn)行，點(diǎn)擊按鈕森枪，有可能并不會(huì)觸發(fā)頁(yè)面跳轉(zhuǎn)视搏，而且還會(huì)報(bào)頁(yè)面不存在的錯(cuò)誤，這是由于觸發(fā)的跳轉(zhuǎn)頁(yè)面的事件中所寫(xiě)的目標(biāo)頁(yè)面并沒(méi)有在app.json中注冊(cè)的原因县袱，也就是這里浑娜。

????4.按鈕或者頁(yè)面的樣式是什么樣的，寬的扁的圓的式散，就卸載對(duì)應(yīng)的wxss中就可以了筋遭。

如上所示四步，就可以寫(xiě)出入門(mén)的簡(jiǎn)單的button、text漓滔、tab等编饺，還可以觸發(fā)事件，如果你的js很棒的話次和，那么就可以進(jìn)行稍微復(fù)雜的頁(yè)面和操作啦反肋。

歡迎留言交流~