小程序開發

思捷智聯 > 小程序開發 > 微信小程序開發實踐入門教程

微信小程序開發實踐入門教程

編輯時間:03-09 09:24 瀏覽次數:77

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


1、什么是小程序?


微信小程序是一種全新的連接用戶與服務的方式,它可以在微信內被便捷地獲取和傳播,同時具有出色的使用體驗 。

小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用 。

2、開發小程序


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


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


微信小程序開發實踐入門教程

搭建小程序環境

目前最新的工具是2017.12.15 更新的,版本號(1.01.1712150)

下載地址:

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

安裝環境,是很簡單的,下載完安裝包直接安裝即可。

我們的開發環境如下:


微信小程序開發實踐入門教程

如何創建第一個小程序

可以先不用注冊小程序ID


微信小程序開發實踐入門教程

點擊確定,第一個小程序"Hello World"已經可以運行了,簡不簡單哈!


微信小程序開發實踐入門教程

介紹一下項目結構

微信小程序開發實踐入門教程

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


一個網頁主要 HTML + CSS + JS 這樣的組合,其中 HTML 是用來描述當前這個頁面的結構,CSS 用來描述頁面的樣子,JS 是用來處理這個頁面和用戶的交互。小程序的頁面跟這個完全相同 ,不一樣的就是改了個名字 。


除了以上頁面的三大構成,還有項目的根目錄還有一個 app.json 和 project.config.json 。

app.json 是對當前小程序的全局配置,包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。

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


微信小程序開發實踐入門教程

(附上一張官方文檔截圖)

配置項目的底部導航

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

小程序要實現這個底部導航其實很簡單,我們只要在根目錄下的app.json文件中配置:


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

具體官方文檔:

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

如何創建個新頁面

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

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

   注意:文件名不需要寫文件后綴 ,而且路徑不能寫錯!


重點:頁面如何加載數據

介紹完如何創建一個新頁面,下面就開始重點介紹,我們如何給一個頁面加上內容 。還是以一開始的例子 ,效果圖如下 。我們發現這個頁面就是上面一個橫向列表+底部是個縱向列表組成 。


微信小程序開發實踐入門教程

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

官方文檔:

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

學習完基本組件后,這還不夠。因為上圖的數據都是網絡請求過來展示的,所以你還需要繼續學習小程序提供的原生API 。比如下面的例子用網絡如何請求數據 等等。


微信小程序開發實踐入門教程

學習官方文檔如何使用API:

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


源碼獲取方式

1、源碼已經上傳到github,喜歡的可以點Star一下,后續看情況維護 。

地址:

https://github.com/llpdev/ToutiaoWechat


2、代碼也已經上傳到微信公眾號,后臺回復【123】,獲取源碼 。


3、總結

小編也只是剛接觸小程序開發,目前也只會一些簡單的,遇到不懂的,就多研究一下官方文檔和官方提供的學習案例 。如果上面有錯誤,請在評論區留言 。學習小程序開發,最好你要有一些前端開發網頁的基本知識,這樣學起來一定會更加輕松 。

本文屬于原創,如有轉載,請標注原作者,版權歸本公眾號所有。如果你喜歡我寫的文章請關注 程序IT圈  ,歡迎大家繼續關注本公眾號的技術博文。如果您覺得這篇文章對你有所幫助的話,不妨點個贊或給個贊賞哈,您的支持就是我堅持原創的動力~~

免責聲明:我司網站轉載此文,不代表本網的觀點和立場。不以盈利為目的,如有侵犯公司或個人權益,我司會第一時間刪除文章,歡迎咨詢免費獲取思維導圖!
感受專業服務,從來電咨詢開始
15821967367158-2196-7367
cache
Processed in 0.004891 Second.
浙江20选5几点开奖