中山市原創(chuàng)動(dòng)力網(wǎng)絡(luò)科技有限公司
創(chuàng)您所想與您同在
免費(fèi)互聯(lián)網(wǎng)品牌營銷咨詢服務(wù)
立刻咨詢
13450931319來源：張小貝_ 發(fā)布時(shí)間：2019-03-27 17:31:27 閱讀量：1486
在Android 項(xiàng)目不忙之余，自學(xué)了微信小程序入門。常聽前輩說，做一名開發(fā)人員最重要的不是你會(huì)什么語言， 而是在面對不會(huì)的語言和未接觸過的任務(wù)時(shí)，有著怎樣的學(xué)習(xí)力和學(xué)習(xí)邏輯。仿佛又回到了高三那一段難忘的學(xué)習(xí)階段，用了小三天時(shí)間，可以說是入了個(gè)小門。下面將自己踩得坑，和從別人的帖子里學(xué)來的經(jīng)驗(yàn)，做一個(gè)總結(jié)，留給自己回憶，留給后人學(xué)習(xí)。
一、小程序是什么。
首先，你要對小程序的開發(fā)有一個(gè)整體的概念。
對于小程序到底是什么的這個(gè)問題，百度百科已經(jīng)給出了一個(gè)比較親民且容易理解的答案。
Q：小程序是什么？它有著什么樣的功能？
A：小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題。應(yīng)用將無處不在，隨時(shí)可用，但又無需安裝卸載。對于開發(fā)者而言，小程序開發(fā)門檻相對較低，難度不及APP，能夠滿足簡單的基礎(chǔ)應(yīng)用，適合生活服務(wù)類線下商鋪以及非剛需低頻應(yīng)用的轉(zhuǎn)換。小程序能夠?qū)崿F(xiàn)消息通知、線下掃碼、公眾號(hào)關(guān)聯(lián)等七大功能。其中，通過公眾號(hào)關(guān)聯(lián)，用戶可以實(shí)現(xiàn)公眾號(hào)與小程序之間相互跳轉(zhuǎn)。由于小程序不存在入口。[6]
Q：小程序可以和現(xiàn)有的App 打通嗎？
A：小程序可以借助微信聯(lián)合登錄，和開發(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：外界有說法稱，小程序的推出意味著微信要做一個(gè)應(yīng)用分發(fā)市場，是這樣嗎？
A：微信推出小程序，并非想要做應(yīng)用分發(fā)市場，而是給一些優(yōu)質(zhì)服務(wù)提供一個(gè)開放的平臺(tái)。
但從小程序的開發(fā)結(jié)構(gòu)上來說，微信小程序應(yīng)該屬于前端開發(fā)，其結(jié)構(gòu)中的wxml、js、wxss同web開發(fā)的結(jié)構(gòu)有類似的地方。
二、開發(fā)工具和開發(fā)環(huán)境
這一部分網(wǎng)上有很多帖子可以查找，官方也給出了工具下載和開發(fā)api的地址。
微信公眾平臺(tái)給出了小程序的設(shè)計(jì)、介紹、使用、注冊、工具、數(shù)據(jù)綁定等幾乎全部功能的說明，初學(xué)者可以先去瀏覽一遍，心里對小程序有個(gè)粗略的認(rèn)識(shí)，將工具下載安裝，賬號(hào)注冊，做好一切準(zhǔn)備之后，再來進(jìn)行入門的開發(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)
打開工具的時(shí)候，會(huì)進(jìn)入這個(gè)新建項(xiàng)目的頁面。
可以看到，要添加一個(gè)新的小程序項(xiàng)目需要填寫三部分內(nèi)容：AppID，項(xiàng)目名稱，項(xiàng)目目錄。為了能快速開發(fā)，我們先選擇 無AppID 這個(gè)選項(xiàng)，如果正式開發(fā)，是需要添加AppId的，關(guān)于Appid的部分可以去查詢資料。
項(xiàng)目目錄，是指你的小程序的代碼將放在哪個(gè)目錄下，你可以自己在本地創(chuàng)建一個(gè)文件夾，也可以在github創(chuàng)建一個(gè)新項(xiàng)目，都可以。
配置小程序
這一節(jié)，我們將介紹小程序的配置。首先，讓我們來看看項(xiàng)目自動(dòng)生成的app.json文件長什么樣子。
{
"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è)小程序由哪些頁面組成。
在以后需要新增或者減少頁面時(shí)，都需要在這里進(jìn)行設(shè)置，有幾個(gè)頁面pages數(shù)組就有幾項(xiàng)。
可以看到pages是一個(gè)數(shù)組，而數(shù)組的第一項(xiàng)就是小程序的初始頁面，你可以試著把logs頁面移動(dòng)到最前面看看效果，這在開發(fā)的時(shí)候是一個(gè)不錯(cuò)的小技巧。
還有一個(gè)技巧要分享給你的是，在我們需要添加一個(gè)新頁面的時(shí)候，沒必要傻傻的手動(dòng)去創(chuàng)建文件夾，然后新建xxx.josn, xxx.js, xxx.wxml, xxx.wxss這四個(gè)文件。我們只要在 pages數(shù)組中 添加一個(gè)你想創(chuàng)建的頁面，然后 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是否開啟下拉刷新
tarBar: 用來定義 tabBar 的表現(xiàn)
tabBar 是一個(gè)數(shù)組，只能配置最少2個(gè)、最多5個(gè) tab，tab 按數(shù)組的順序排序。
我們可以在項(xiàng)目目錄下添加一個(gè)images文件，用來存放我們的圖片文件。
注意：目前小程序只支持網(wǎng)絡(luò)圖片或者base64圖片，使用本地圖片需要將圖片轉(zhuǎn)為base64代碼
networkTimeout: 用來設(shè)置各種網(wǎng)絡(luò)請求的超時(shí)時(shí)間。
如果你不是很清楚這個(gè)networkTimeout配置有什么作用，那么忽略就好。這對實(shí)際開發(fā)并沒有什么影響。
屬性類型必填說明
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)航、窗口、頁面http請求跳轉(zhuǎn)等。全局配置頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
3）app.wxss：公共樣式配置
前面也說了，小程序主要有四個(gè)頁面組成部分
1）js：頁面邏輯
2）wxml：頁面結(jié)構(gòu)展示
3）wxss：頁面樣式表
4）json：頁面配置，配置一些頁面展示的數(shù)據(jù)
四、添加一個(gè)button
下面讓我們來添加一個(gè)button吧
首先，我們要告訴小程序有哪些頁面。 其次，需要設(shè)置小程序的導(dǎo)航欄標(biāo)題，圖如上面的app.json圖中所示。
1.首先，打開index.wxml頁面，這個(gè)頁面現(xiàn)在就是被首頁tab調(diào)用的頁面，先不管在哪調(diào)用的，我們現(xiàn)在頁面中加三個(gè)button。小程序的頁面架構(gòu)跟web頁面有些類似，wxml類似于html，從圖中可以看到，將button放到view這個(gè)布局中，bindtab是點(diǎn)擊事件的調(diào)用名，其點(diǎn)擊效果會(huì)在對應(yīng)的js頁面中被觸發(fā)。
2.對應(yīng)上圖，我們可以找到j(luò)s中對應(yīng)的事件觸發(fā)及所調(diào)用的頁面
3.此時(shí)如果運(yùn)行，點(diǎn)擊按鈕，有可能并不會(huì)觸發(fā)頁面跳轉(zhuǎn)，而且還會(huì)報(bào)頁面不存在的錯(cuò)誤，這是由于觸發(fā)的跳轉(zhuǎn)頁面的事件中所寫的目標(biāo)頁面并沒有在app.json中注冊的原因，也就是這里。
4.按鈕或者頁面的樣式是什么樣的，寬的扁的圓的，就卸載對應(yīng)的wxss中就可以了。
如上所示四步，就可以寫出入門的簡單的button、text、tab等，還可以觸發(fā)事件，如果你的js很棒的話，那么就可以進(jìn)行稍微復(fù)雜的頁面和操作啦。
微信登錄
QQ登錄
微博登錄
售前咨詢
