微信小程序
在文章的結尾會給出一些視頻和項目源碼供大家交流學習
好了接下來就要進入微信小程序的學習階段了, 微信小程序並不難, 但是由於我們並沒有接觸過前端的開發, 所以可能不太好理解, 練習一個小案例, 會有更深的印象。在開始之前, 有一點需要強調, 雖然微信小程序使用了大量的前端開發的技術, 但是微信小程序是原生的, 並且這些代碼無法在瀏覽器中執行。
環境
Windows32位IDE下載
http://dldir1.qq.com/WechatWebDev/010101401/wechat_web_devtools_0.10.101400_ia32.exe
![]()
![]()
![]()
![]()
流程
![]()
環境
1.獲取微信小程序的AppID
由於現在微信小程序還是內側階段, 所以大家應該都沒有內側資格, 包括我也沒有, 所以這一步可以省略
由於現在微信小程序還是內側階段, 所以大家應該都沒有內側資格, 包括我也沒有, 所以這一步可以省略
2.安裝IDE
1.下載
Windows64位IDE下載
http://dldir1.qq.com/WechatWebDev/010101401/wechat_web_devtools_0.10.101400_x64.exeWindows64位IDE下載
Windows32位IDE下載
http://dldir1.qq.com/WechatWebDev/010101401/wechat_web_devtools_0.10.101400_ia32.exe
2.一路下一步即可
3.新建項目
1.打開已經安裝的程序
2.在手機上使用微信掃描二維碼登錄
![]()
3.點擊加號創建一個新的項目
3.點擊加號創建一個新的項目
3.填寫信息, 第一個輸入框點無AppId
4.點擊添加項目, 到此爲止已經成功創建了一個微信小程序的工程
編輯器的選擇
在JS的領域, 一般情況下不會使用集成開發環境, 也就是我們常說的IDE, 類似Eclipse, AndroidStudio, IntelliJ IDEA等；
前端開發者更多的會去選擇Atom, Sublime, EditPlus等附帶一些快捷功能的編輯器, 這是因爲JS是一個動態語言, 並且本身無需編譯執行，我們在做微信小程序的開發過程中, 可以使用微信提供的工具中的編輯器進行開發, 也可以選擇任何一個你想用的編輯器, 直接編輯文本即可，微信提供的工具中所附帶的編輯器是VS Code的核心編輯器。
核心概念
編輯器的選擇
在JS的領域, 一般情況下不會使用集成開發環境, 也就是我們常說的IDE, 類似Eclipse, AndroidStudio, IntelliJ IDEA等；
前端開發者更多的會去選擇Atom, Sublime, EditPlus等附帶一些快捷功能的編輯器, 這是因爲JS是一個動態語言, 並且本身無需編譯執行，我們在做微信小程序的開發過程中, 可以使用微信提供的工具中的編輯器進行開發, 也可以選擇任何一個你想用的編輯器, 直接編輯文本即可，微信提供的工具中所附帶的編輯器是VS Code的核心編輯器。
核心概念
一個微信小程序其實類似於一個Android應用, 開發模式也很類似, 所使用到的組件也很類似, 接下來簡單的闡述一下開發一個微信小程序的過程
1.創建工程
2.編寫app.js文件, 類似於Android中的Application類
3.編寫app.json配置文件, 類似於我們Android中的Manifest清單文件, 用於配置工程, 註冊頁面
4.編寫具體的頁面
公共文件
小程序中的公共文件主要指的是三個 app.js, app.json, app.wxss, 分別來看一下這三個文件分別的作用
app.js
類似於Android中的Manifest清單文件, 用於獲取程序的聲明週期事件, 聲明全局共享的方法和數據
類似於Android中的Manifest清單文件, 用於獲取程序的聲明週期事件, 聲明全局共享的方法和數據
app.json
我們使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等
我們使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等
app.wxss
小程序公共樣式表, 類似於我們Android中的Manifest裏的application節點配置的theme
分層
小程序公共樣式表, 類似於我們Android中的Manifest裏的application節點配置的theme
微信小程序開發的核心概念中, 分層是一個很重要的部分, 現在先來回顧一下Android中的分層
·邏輯層, 也就是平常我們所寫的Activity
·視圖層, 也就是我們平常所寫的layout文件
在進行下面的列舉之前, 先簡單解釋一下小程序開發中的模塊, 或者在我們Android中稱之爲組件
之所以小程序中叫做模塊, 是因爲小程序並不像Android那樣複雜, 並沒有Service, Provider, BroadcastRevicer等組件, 模塊只是一個頁面, 類似於Android中的Activity
之所以小程序中叫做模塊, 是因爲小程序並不像Android那樣複雜, 並沒有Service, Provider, BroadcastRevicer等組件, 模塊只是一個頁面, 類似於Android中的Activity
上面也就是我們Android中常說的系統提供的MVC分層, 在微信小程序提供的開發框架(Framework)中, 也借鑑了很多現有的JS框架(React,
Vue), 由於JS本身的一些特性, 以及微信小程序的量級也比較輕, 所以在工程化上, 微信小程序做的更徹底一些, 分層也更明確
微信團隊對現有的大部分程序做了一些分析, 發現常見的邏輯層次有: 數據邏輯, 頁面（數據呈現）以及（頁面間的）導航
比如我們拿新浪微博 APP 舉例：
比如我們拿新浪微博 APP 舉例：
數據邏輯：我關注的人，我的粉絲，微博用戶所發的微博，以及這些微博數據的組織，比如按關注人分組等等這類跟數據相關的部分。
頁面：對數據的呈現，比如我關注的人的微博列表，某個用戶的微博主頁，長微博文章頁等等。
導航：頁面間的跳轉。比如從微博列表頁面可以進入到微博詳情頁，點擊微博發帖人頭像可以進入個人主頁等等。
頁面：對數據的呈現，比如我關注的人的微博列表，某個用戶的微博主頁，長微博文章頁等等。
導航：頁面間的跳轉。比如從微博列表頁面可以進入到微博詳情頁，點擊微博發帖人頭像可以進入個人主頁等等。
由於這些思考, 微信給出了一個開發框架, 這個框架名字叫做MINA, 這個框架在頁面部分有如下的部分:
邏輯層
js文件
視圖層
wxml文件存放HTML代碼, 但是這個部分的HTML並不是原生的HTML代碼, 而是微信提供了自己的一套標籤體系
wxss文件存放CSS代碼, 此處的CSS代碼基本上就是原生的CSS, 可以支持CSS3
wxss文件存放CSS代碼, 此處的CSS代碼基本上就是原生的CSS, 可以支持CSS3
簡單介紹了一下核心的一些概念, 下面通過一個小例子, 來示例如何開發微信小程序
豆瓣電影界面
流程
1.建立工程文件和配置文件
創建app.js全局對象, 在全局對象中提供獲取豆瓣服務器數據的方法
1.配置清單
2.在全局提供訪問豆瓣服務器的方法
2.新建電影列表頁面
1.創建wxml文件來編寫頁面結構
2.創建wxss文件來描述頁面中元素的樣式
3.創建js文件從豆瓣的服務器中獲取數據, 並顯示在界面上
豆瓣開放API
豆瓣網是一個著名的網站, 其中有電影相關的信息, 我們這個例子所完成的功能就是拉取豆瓣服務器中的熱映電影信息, 然後通過列表的方式呈現出來
獲取豆瓣服務器數據的方法
豆瓣電影提供了開放API, 調用一個接口便可以獲取
參數
參數封裝在一個json字符串中, 包含在請求體中發送
支持的參數有:
參數封裝在一個json字符串中, 包含在請求體中發送
支持的參數有:
·start 從哪一條開始
·count 數據的總長度
你可以查看豆瓣官方詳細文檔https://developers.douban.com/
工程結構你可以查看豆瓣官方詳細文檔https://developers.douban.com/
根目錄, 根目錄中存放一些工程文件, 和全局文件, 一般情況下有如下三個
app.js 中有App函數, 用於獲取整個小程序的實例, 生命週期等, 類似於Android中的Application類
app.json 是整個小程序的註冊文件, 類似於Anroid中的Manifest
app.wxss 是整個正序的公共CSS, 類似於Android中Application的Theme
pages目錄, pages目錄用於存放所有的頁面
pages目錄, pages目錄用於存放所有的頁面
movies 文件夾, 熱映電影列表
movies.js 電影數據獲取邏輯寫在這個文件中, 類似於Android中的Activity
movies.wxml 電影頁面的空間結構文件, 類似於Android中的Layout
movies.wxss 存放電影頁面的CSS, 也就是Layout的裝飾
小程序開發中, 每一個頁面都對應三個文件, js, wxml, wxss, 這是一開始就要創建好的。
創建工程
在這個步驟中, 主要是爲了創建工程文件, 以及一些配置文件, 類似於我們Android中的Application, manifest等
app.js
先來看一下app.js, 這個文件主要用途就是獲取小程序的實例, 獲取小程序的聲明週期
1.App({
2. onLaunch: function() {
3.
4. }
5.})
app.json
這個文件主要用於配置小程序, 有如下一些配置, 每個配置對應超鏈接是詳細的介紹
接下來來看一下這個示例的配置文件代碼
1.{
2. "pages" : [
3. "pages/movies/movies"
4. ],
5.
6. "window" : {
7. "backgroundTextStyle":"light",
8. "navigationBarBackgroundColor": "#000000",
9. "navigationBarTitleText": "熱映電影",
10. "navigationBarTextStyle":"white"
11. },
12.
13. "networkTimeout": {
14. "request": 10000,
15. "connectSocket": 10000,
16. "uploadFile": 10000,
17. "downloadFile": 10000
18. },
19.
20. "debug": true
21.}
可以是用生成工具來生成配置文件
官方生成工具地址：https://weapptool.com/start.html
由以上得知, 這個程序只有一個頁面, 就是pages中配置的movies頁面, "pages/movies/movies" 這個配置的含義是, pages目錄下,
有一個movies目錄, movies中是具體的頁面代碼, 一共有三個文件, 分別是movies.wxml, movies.wxss, movies.js
app.wxss
app.wxss 是全局的樣式表文件, 全局所有頁面都會應用到這個樣式表中所描述的樣式
1.page {
2. font-family: -apple-system-font, 'Helvetica Neue', Helvetica, 'Microsoft
YaHei', sans-serif;
3. height: 100%;
4. width: 100%;
5. background-color: #fff;
6. display: flex;
7. flex-direction: column;
8.}
這個文件主要描述了全局所有的頁面的基本主題, 包括字體, 寬高, 背景顏色等, 具體的CSS語法請參照W3C的css手冊（http://www.w3cschool.cn/css/），其實這個文件中的語法就是標準的CSS3語法。
movies頁面
movies頁面
每一個頁面對應的都有三個文件
·js文件, 其中存放js代碼, 用於獲取頁面的生命週期, 請求網絡等
·wxml文件, 其中是html的語法, 但是不是標準的html, 是微信自己的一套標籤體系, 用來描述頁面的結構, 控件之間的關係等
·wxss文件, 其中是標準的css語法, 用來描述頁面上的控件的長相, 類似於字體, 顏色等。
js文件
js文件
下面來看一下這個電影列表的js文件
1.// 調用Page方法, 傳入一個匿名對象, 這個對象中可以包含頁面的生命週期回調函數, 可以包含默認的用於顯示的數據
2.Page({
3. // 用於顯示的數據
4. data: {
5. items: []
6. },
7.
8. // 當頁面加載完成時被調用
9. onLoad: function() {
10. // 頁面加載完成的時候, 請求網絡數據, 並設置給頁面
11.
12. var page = this;
13.
14. getDoubanMovies(function(res) {
15. // 通過這個方法, 可以將數據設置給頁面
16. page.setData({items: res.data.subjects});
17. }, function() {
18.
19. });
20. }
21.})
22.
23.// 獲取網絡數據, 傳入兩個函數, 分別是成功和失敗的回調
24.function getDoubanMovies(onSuccess, onFailed) {
25. var API_URL = "https://api.douban.com/v2/movie/";
26. var params = {
27. count : 20
28. };
29.
30. // wx.request是微信提供的網絡請求框架, 小程序開發的時候只能使用wx提供的api, 而不能使用ajax調用
31. wx.request({
32. url: API_URL + `in_theaters`,
33. data: params,
34. header: {'Content-Type': 'application/json'},
35. success: onSuccess,
36. fail: onFailed
37. })
38. }
和Android開發時最大的不同是, 小程序中可以將數據提供給layout(wxml, html), 在layout中寫簡單的js代碼來獲取數據並顯示
接下來, 頁面已經獲取到數據了, 一起來看一下如何將這些數據顯示在頁面上。
wxml文件
wxml文件
在看代碼之前, 大家一定要知道一件事, 通過在js中調用Page.setData()方法, 可以將一個對象傳給wxml文件, 在wxml文件中可以獲取這個傳入的數據,
並且可以通過{{ html中的代碼 }}這種方式來在wxml文件中包含簡單的js代碼, 接下來簡單的看一下如下代碼
1.<scroll-view class="container_scroll" scroll-y="true">
2. <block wx:for="{{items}}">
3. <view class="item">
4. <image class="poster" src="{{item.images.small}}"></image>
5. <view class="meta">
6. <text class="title">{{item.title}}</text>
7. <text class="sub-title">{{item.original_title}}({{item.year}})</text>
8. <view class="artists"><text>導演：</text><text wx:for="{{item.directors}}">
{{item.name}} </text></view>
9. </view>
10. <view class="rating">
11. <text>{{item.rating.average}}</text>
12. </view>
13. </view>
14. </block>
15.</scroll-view>
以上就是整個佈局文件, 這裏面使用了很多組件, 類似於Android中的控件, 微信小程序提供了很多組件, 便於我們進行開發, 基本能夠滿足日常的開發需求,
組件列表請查看官方組件文檔（https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=1476197480996)
·scroll-view, 類似Android中的ScrollView
·block, 是語句控制標籤
·view, 是類似於Android中的四大布局, 但是這個地方只有一個佈局
這個地方不是特別容易理解, 請參照微信官方說明(https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html?t=1476197492981)
來仔細練習一下, 並且通過這個代碼的運行, 思考一下這個地方
wxss文件
來仔細練習一下, 並且通過這個代碼的運行, 思考一下這個地方
wxss文件
這個文件不是很重要, 這個文件主要用於描述佈局中的元素的長相, 這個也是前端開發中的慣用技巧, 和我們在Android開發的時候直接在layout描述頁面長相不同,
前端開發中佈局和樣式是分離的, 便於修改和控制
這個部分內容比較多, CSS本身也比較複雜, 酌情瞭解就可以
1..container_scroll {
2. display: flex;
3. flex: 1;
4. flex-direction: column;
5.}
6.
7..item {
8. display: flex;
9. padding: 20rpx 40rpx;
10. border-bottom: 1rpx solid #eee;
11. cursor: pointer;
12.}
13.
14..item .poster {
15. width: 128rpx;
16. height: 128rpx;
17. margin-right: 20rpx;
18.}
19.
20..item .meta {
21. flex: 1;
22.}
23.
24..item .meta .title,
25..item .meta .sub-title {
26. display: block;
27. margin-bottom: 15rpx;
28.}
29.
30..item .meta .title {
31. font-size: 32rpx;
32.}
33.
34..item .meta .sub-title {
35. font-size: 22rpx;
36. color: #c0c0c0;
37.}
38.
39..item .meta .artists {
40. font-size: 26rpx;
41. color: #999;
42.}
43.
44..item .rating {
45. font-size: 28rpx;
46. font-weight: bold;
47. color: #f74c31;
48.}
以上就是這個小例子的代碼, 到此爲止已經全部實現
項目完成
和Android開發中不同的是, 在一個項目完結的時候, 並不需要編譯, 因爲前端動態語言本就是交給程序直接執行的, 也無需混淆啊之類的, 那我們就繼續看一下如何提交。由於我也沒有開發者賬號,
大家也不會有人有, 微信小程序這個時候還沒有公測, 所以大致知道如何提交即可, 在公測以後可以再行聯繫。
最後的話
微信小程序使用了一整套前端開發的技術, 所以理解起來可能比較麻煩,任何一個新的技術, 最佳的方式就是通過官方文檔學習, 但是由於大家可能並不是很清楚前端技術, 所以希望能通過一些不完整的, 簡單的描述, 一個小例子, 帶領大家進入這扇門, 但是希望大家一定要多看官方文件。
小程序一些源碼分享鏈接：http://pan.baidu.com/s/1c2IbPpI 密碼：5lxk
小程序一些視頻分享鏈接：http://pan.baidu.com/s/1i5bUjU9
密碼：y82x最後的話
微信小程序使用了一整套前端開發的技術, 所以理解起來可能比較麻煩,任何一個新的技術, 最佳的方式就是通過官方文檔學習, 但是由於大家可能並不是很清楚前端技術, 所以希望能通過一些不完整的, 簡單的描述, 一個小例子, 帶領大家進入這扇門, 但是希望大家一定要多看官方文件。
小程序一些源碼分享鏈接：http://pan.baidu.com/s/1c2IbPpI 密碼：5lxk