【原】微信小程序開發(fā)實踐入門教程

程序IT圈 2021-01-16

展開全文

程序IT圈

在去年2017年1月9日，張小龍在2017微信公開課Pro上發(fā)布的小程序正式上線。時至今日，小程序已經(jīng)有整整一年時間了。在2017年12月28日，微信更新的 6.6.1 版本開放了小游戲，「跳一跳」小游戲在那一晚徹底火了。由于微信的流量龐大，所以很多開發(fā)者看好小程序，我也不例外。

1、什么是小程序？

微信小程序是一種全新的連接用戶與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時具有出色的使用體驗。
小程序是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。

（小程序短視頻介紹，建議wifi下觀看）

2、開發(fā)小程序

了解完小程序到底是什么，接下來是本文的重點。對于沒接觸過小程序編程的，可以看過來。小編帶大家入坑。這篇文章大致說一下如何一步一步創(chuàng)建個簡單的小程序出來。

首先，先看一下效果圖。因為是個學(xué)習(xí)案例，所以功能非常簡單，就是一個簡單的頁面展示功能。后面有時間和精力，會再去完善功能的。

搭建小程序環(huán)境

目前最新的工具是2017.12.15 更新的，版本號（1.01.1712150）

下載地址：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

安裝環(huán)境，是很簡單的，下載完安裝包直接安裝即可。

我們的開發(fā)環(huán)境如下：

如何創(chuàng)建第一個小程序

可以先不用注冊小程序ID

點擊確定，第一個小程序"Hello World"已經(jīng)可以運行了，簡不簡單哈！

介紹一下項目結(jié)構(gòu)

從上面項目結(jié)構(gòu)圖，可以看到一個頁面構(gòu)成主要有三大部分構(gòu)成 index.wxml 、index.wxss 、index.js 。一看，怎么跟前端的這么類似。認(rèn)真一看，這功能還真是沒差別。對于會一點前端知識的，我想，要入門小程序開發(fā)，應(yīng)該是很簡單的。

一個網(wǎng)頁主要 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當(dāng)前這個頁面的結(jié)構(gòu)，CSS 用來描述頁面的樣子，JS 是用來處理這個頁面和用戶的交互。小程序的頁面跟這個完全相同，不一樣的就是改了個名字。

除了以上頁面的三大構(gòu)成，還有項目的根目錄還有一個 app.json 和 project.config.json 。

app.json 是對當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時時間、底部 tab 等。

project.config.json 可以針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等。

（附上一張官方文檔截圖）

配置項目的底部導(dǎo)航

介紹完小程序的具體目錄，接下來，帶大家看看如何配置項目的底部導(dǎo)航。

小程序要實現(xiàn)這個底部導(dǎo)航其實很簡單，我們只要在根目錄下的app.json文件中配置：

具體屬性值可以看底下這張截圖，很明確的說明了：

具體官方文檔：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

如何創(chuàng)建個新頁面

小程序的頁面創(chuàng)建，都是需要在配置文件中配置一下路徑，不然無法訪問。配置也非常簡單，只需要在app.json文件下找到一個pages的屬性值。

pages屬性：接受一個數(shù)組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應(yīng)頁面的【路徑+文件名】信息，數(shù)組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數(shù)組進(jìn)行修改。

注意：文件名不需要寫文件后綴，而且路徑不能寫錯！

重點：頁面如何加載數(shù)據(jù)

介紹完如何創(chuàng)建一個新頁面，下面就開始重點介紹，我們?nèi)绾谓o一個頁面加上內(nèi)容。還是以一開始的例子，效果圖如下。我們發(fā)現(xiàn)這個頁面就是上面一個橫向列表+底部是個縱向列表組成。

要實現(xiàn)上圖這個頁面，首先你要先學(xué)習(xí)一下小程序開發(fā)組件。小程序提供了一系列基礎(chǔ)組件，組件是視圖層的基本組成單元，一個組件通常包括開始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來修飾這個組件，內(nèi)容在兩個標(biāo)簽之內(nèi) 。這部分，肯定需要你花功夫自己去學(xué)習(xí)小程序的官方文檔，這個不是簡單一句兩句就能講明白的。

官方文檔：

https://mp.weixin.qq.com/debug/wxadoc/dev/component/

學(xué)習(xí)完基本組件后，這還不夠。因為上圖的數(shù)據(jù)都是網(wǎng)絡(luò)請求過來展示的，所以你還需要繼續(xù)學(xué)習(xí)小程序提供的原生API 。比如下面的例子用網(wǎng)絡(luò)如何請求數(shù)據(jù) 等等。

學(xué)習(xí)官方文檔如何使用API：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/

源碼獲取方式

1、源碼已經(jīng)上傳到github，喜歡的可以點Star一下，后續(xù)看情況維護(hù) 。

地址：

https://github.com/llpdev/ToutiaoWechat