|
在去年2017年1月9日，張小龍?jiān)?017微信公開(kāi)課Pro上發(fā)布的小程序正式上線 。時(shí)至今日，小程序已經(jīng)有整整一年時(shí)間了 。在2017年12月28日，微信更新的 6.6.1 版本開(kāi)放了小游戲，「跳一跳」小游戲在那一晚徹底火了。由于微信的流量龐大，所以很多開(kāi)發(fā)者看好小程序，我也不例外 。 微信小程序是一種全新的連接用戶(hù)與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn) 。 小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶(hù)掃一掃或者搜一下即可打開(kāi)應(yīng)用 。
（小程序短視頻介紹，建議wifi下觀看） 了解完小程序到底是什么，接下來(lái)是本文的重點(diǎn) 。對(duì)于沒(méi)接觸過(guò)小程序編程的，可以看過(guò)來(lái) 。小編帶大家入坑 。這篇文章大致說(shuō)一下如何一步一步創(chuàng)建個(gè)簡(jiǎn)單的小程序出來(lái) 。 首先，先看一下效果圖 。因?yàn)槭莻€(gè)學(xué)習(xí)案例，所以功能非常簡(jiǎn)單，就是一個(gè)簡(jiǎn)單的頁(yè)面展示功能 。后面有時(shí)間和精力，會(huì)再去完善功能的 。 目前最新的工具是2017.12.15 更新的，版本號(hào)（1.01.1712150） 下載地址： https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 安裝環(huán)境，是很簡(jiǎn)單的，下載完安裝包直接安裝即可。 我們的開(kāi)發(fā)環(huán)境如下： 點(diǎn)擊確定，第一個(gè)小程序"Hello World"已經(jīng)可以運(yùn)行了，簡(jiǎn)不簡(jiǎn)單哈！ 
介紹一下項(xiàng)目結(jié)構(gòu)
從上面項(xiàng)目結(jié)構(gòu)圖，可以看到一個(gè)頁(yè)面構(gòu)成主要有三大部分構(gòu)成 index.wxml 、index.wxss 、index.js 。一看，怎么跟前端的這么類(lèi)似 。認(rèn)真一看，這功能還真是沒(méi)差別 。對(duì)于會(huì)一點(diǎn)前端知識(shí)的，我想，要入門(mén)小程序開(kāi)發(fā)，應(yīng)該是很簡(jiǎn)單的 。 一個(gè)網(wǎng)頁(yè)主要 HTML + CSS + JS 這樣的組合，其中 HTML 是用來(lái)描述當(dāng)前這個(gè)頁(yè)面的結(jié)構(gòu)，CSS 用來(lái)描述頁(yè)面的樣子，JS 是用來(lái)處理這個(gè)頁(yè)面和用戶(hù)的交互。小程序的頁(yè)面跟這個(gè)完全相同 ，不一樣的就是改了個(gè)名字 。 除了以上頁(yè)面的三大構(gòu)成，還有項(xiàng)目的根目錄還有一個(gè) app.json 和 project.config.json 。 app.json 是對(duì)當(dāng)前小程序的全局配置，包括了小程序的所有頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。 project.config.json 可以針對(duì)各自喜好做一些個(gè)性化配置，例如界面顏色、編譯配置等 。 
（附上一張官方文檔截圖） 介紹完小程序的具體目錄，接下來(lái)，帶大家看看如何配置項(xiàng)目的底部導(dǎo)航 。 
小程序要實(shí)現(xiàn)這個(gè)底部導(dǎo)航其實(shí)很簡(jiǎn)單，我們只要在根目錄下的app.json文件中配置： 
具體屬性值可以看底下這張截圖，很明確的說(shuō)明了： 
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html 小程序的頁(yè)面創(chuàng)建，都是需要在配置文件中配置一下路徑，不然無(wú)法訪問(wèn) 。配置也非常簡(jiǎn)單，只需要在app.json文件下找到一個(gè)pages的屬性值 。 pages屬性：接受一個(gè)數(shù)組，每一項(xiàng)都是字符串，來(lái)指定小程序由哪些頁(yè)面組成。每一項(xiàng)代表對(duì)應(yīng)頁(yè)面的【路徑+文件名】信息，數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面。小程序中新增/減少頁(yè)面，都需要對(duì) pages 數(shù)組進(jìn)行修改。 注意：文件名不需要寫(xiě)文件后綴 ，而且路徑不能寫(xiě)錯(cuò)！
重點(diǎn)：頁(yè)面如何加載數(shù)據(jù)介紹完如何創(chuàng)建一個(gè)新頁(yè)面，下面就開(kāi)始重點(diǎn)介紹，我們?nèi)绾谓o一個(gè)頁(yè)面加上內(nèi)容 。還是以一開(kāi)始的例子 ，效果圖如下 。我們發(fā)現(xiàn)這個(gè)頁(yè)面就是上面一個(gè)橫向列表+底部是個(gè)縱向列表組成 。 要實(shí)現(xiàn)上圖這個(gè)頁(yè)面，首先你要先學(xué)習(xí)一下小程序開(kāi)發(fā)組件 。小程序提供了一系列基礎(chǔ)組件，組件是視圖層的基本組成單元，一個(gè)組件通常包括開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來(lái)修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之內(nèi) 。這部分，肯定需要你花功夫自己去學(xué)習(xí)小程序的官方文檔，這個(gè)不是簡(jiǎn)單一句兩句就能講明白的 。 官方文檔： https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 學(xué)習(xí)完基本組件后，這還不夠。因?yàn)樯蠄D的數(shù)據(jù)都是網(wǎng)絡(luò)請(qǐng)求過(guò)來(lái)展示的，所以你還需要繼續(xù)學(xué)習(xí)小程序提供的原生API 。比如下面的例子用網(wǎng)絡(luò)如何請(qǐng)求數(shù)據(jù) 等等。
https://mp.weixin.qq.com/debug/wxadoc/dev/api/ 1、源碼已經(jīng)上傳到github，喜歡的可以點(diǎn)Star一下，后續(xù)看情況維護(hù) 。 地址： https://github.com/llpdev/ToutiaoWechat
|
