今天給大家發(fā)一篇剛哥的文章。這篇文章絕對火爆，超級干貨，不看必后悔
目錄
主要從以下幾個方面給大家總結(jié)一下微信小程序相關(guān)的知識!
1?前言
2.什么是小程序?
3.微信小程序在微信開發(fā)中的位置?
4.微信小程序框架–MINA
5.現(xiàn)代化前端技巧
6.MINA 是不是 HTML 5
7.小程序與傳統(tǒng)APP區(qū)別
8.小程序為開發(fā)者提供了什么?
9.微信小程序源碼結(jié)構(gòu)
10.MINA 組件
11.微信小程序案例
今天把之前收集的微信小程序案例,給大家共享出來,一起學(xué)習(xí)!學(xué)習(xí)的別人東西是自己技能增長最快的一種方式。 就像之前我們在寫程序時,主管或項目經(jīng)理,經(jīng)常提醒我們一樣,程序?qū)懙奶珌y,不簡潔,要多看別人寫的好的的程序源碼,看多了,模仿多了,自己寫代碼結(jié)構(gòu)和性能就提高很多了。
回歸正題,今天著重給大家15個微信小程序案例,需要的可以下載看看!首先在介紹源碼之前,還是給大家講講微信小程序相關(guān)的知識。
小程序是微信推出的一種新的公眾號的形態(tài)
不需要下載安裝即可在微信中使用的應(yīng)用
小程序、訂閱號、服務(wù)號、企業(yè)號是并行的體系
小程序融合了很多前端開發(fā)界的概念，但是并沒有采用任何一個框架，包括流行的REACT、VUE，還有CORDOVA。它不是三者中的任意一個，而是拼湊出一個新的框架。
盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)
具有原生 APP 體驗的服務(wù)
Virtual DOM：開發(fā)者寫 iOS 和原生的 h5 應(yīng)用的時候，很多時候是手動地去操作 UI，用戶按按鈕之后改變頁面。當(dāng)應(yīng)用很復(fù)雜的時候在改變的過程可能就會產(chǎn)生錯誤，Virtual DOM每次要去改變一個界面的時候，重新把界面做一次再進(jìn)行修改，避免出錯。
MVVM：分離邏輯和數(shù)據(jù)。
組件化：功能、風(fēng)格模塊化，每個風(fēng)格封裝在組件里就不會泄露。
微信小程序一出來，大家都在猜測是基于什么技術(shù)，是 H5 還是原生。它的框架看起來既像 H5，又像原生。小程序?qū)懙氖?H5 代碼，但是它又不遵從 H5 的標(biāo)準(zhǔn)寫法。它很多方面借用了 Web 技術(shù)，但很多細(xì)節(jié)又不一樣。
1.非標(biāo)準(zhǔn)標(biāo)簽（組件）
我們知道寫瀏覽器用的都是標(biāo)準(zhǔn)的主鍵，但是在 MINA 里面，小程序自成一個體系，雖然后臺還是一樣用瀏覽器的主鍵去實現(xiàn)的，但是在前面寫 HTML 的時候加上它自己的一套標(biāo)準(zhǔn)。
2.非標(biāo)準(zhǔn)CSS：
rpx單位是微信小程序中css的尺寸單位，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0。
3.非標(biāo)準(zhǔn)事件系統(tǒng)：
當(dāng)按下一個按鈕的時候分配一個事件，這個事件也是非標(biāo)準(zhǔn)的，但是跟非標(biāo)準(zhǔn)很像。包括冒泡階段和捕捉階段。
4.非標(biāo)準(zhǔn) JS API：
支持微信的接口，但是沒有任何標(biāo)準(zhǔn) JS接口。
5.不能操作 document 或者 DOM：
雖然是在瀏覽器里面運行，但是不能操作瀏覽器本身，不能操作原生文件本身，只能用Virtual DOM 去改變頁面。
6.有些組件有奇怪的默認(rèn)高寬(scroller,image)：
通常在 Web 瀏覽器里面，主鍵是按圖片內(nèi)容的高度，基本上所有組件默認(rèn)高寬都是0，小程序的image是按照background-image來實現(xiàn)的，所以所有圖像會得到一個初始寬高320 240，而且無法通過auto重置，只可以通過具體的值來重寫。
7.Require：
因為小程序自成一個體系，JS 的包、CSS 框架都不能用，全部都要重新開始。
8.1M打包上線：
能夠更快地下載。
7.小程序與傳統(tǒng)APP區(qū)別
微信小程序和傳統(tǒng)的APP存在較大的差異，所以在設(shè)計小程序時不能以傳統(tǒng)APP的思維來實現(xiàn)，要采用與之相匹配的小程序思維進(jìn)行設(shè)計。那么，可以從以下6個關(guān)鍵詞中思考：
1)輕量：
讓用戶便捷、迅速、簡單地獲取服務(wù)，不要挑戰(zhàn)微信的產(chǎn)品觀。
2)社交：
必須和微信生態(tài)融入，那就必須考慮到微信的生態(tài)基因。拋開社交關(guān)系鏈做的話，最大的可能性是過于平庸導(dǎo)致反響平平。
價值：小程序本身不是為了嘩眾取眾，必須對用戶有切實的價值，能夠讓用戶在有需要時主動進(jìn)入，主動喚醒。
3)引流：
對于第三方來說，微信必須是重要的流量入口。在微信允許的范圍內(nèi)，用可能的手段獲取用戶流量，是我們需要著重考慮的。
4)數(shù)據(jù)：
即便沒有引流成功，至少要獲取用戶數(shù)據(jù)，支持自有APP開展業(yè)務(wù)。
5)生態(tài)：
如果已經(jīng)有了微信公眾號、服務(wù)號，在微信生態(tài)內(nèi)考慮和小程序相互依托，互為補充。
小程序提供了一個框架，微信稱之為mina，這個框架主要分兩個層面，視圖層和邏輯層?？蚣艿暮诵氖且粋€響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data，這個數(shù)據(jù)綁定是單向的，只有數(shù)據(jù)發(fā)生變化，視圖才會做出相應(yīng)的調(diào)整。這種模式，讓開發(fā)者專注于事件處理上，改變對象狀態(tài)，實現(xiàn)視圖更新。 為了方便以及限制開發(fā)者開發(fā)，微信自己定義了一系列的基礎(chǔ)組件，就是視圖層的組成單元（表單組件，媒體組件，導(dǎo)航等），組件自帶一些功能與微信風(fēng)格的樣式，類似html標(biāo)簽。微信還提供了很多原生的微信api,用來調(diào)用微信內(nèi)部提供的功能，以及一個微信小程序開發(fā)者工具。
視圖層（將邏輯層的數(shù)據(jù)展現(xiàn)在視圖上）
邏輯層（通過改變數(shù)據(jù)[setData方法]來改變視圖）
配置文件
視圖層（將邏輯層的數(shù)據(jù)展現(xiàn)在視圖上）
邏輯層（通過改變數(shù)據(jù)[setData方法]來改變視圖）
配置文件
在小程序中，微信規(guī)定了界面的組成模式，由四個文件組成。
.wxml文件（頁面結(jié)構(gòu)文件）標(biāo)簽語言，類似html，真正負(fù)責(zé)頁面結(jié)構(gòu)的文件，可以綁定數(shù)據(jù)。
.wxss文件（樣式表文件）類似css，大部分css樣式都相同
.js文件（腳本文件）用來運行我們的邏輯，使用js語言
.json文件（配置文件）主要配置公用的樣式，比如tab欄，窗口樣式等。
基本：view,text 表單：button,input,radio,slider
媒體：image,video,audio,canvas 模態(tài)：action-sheet,modal,toast,loading 容器：swiper,scroller 導(dǎo)航：navigator,tabbar
1. 案例01–電影推薦
案例下載地址
https://github.com/liuyugang123/movie
2. 案例02–天氣查詢
案例下載地址
https://github.com/liuyugang123/tianqi
3.案例03–知乎日報
案例下載地址
https://github.com/liuyugang123/zhihuAPP
4.案例04–APP
案例下載地址
http://download.csdn.net/my
5.案例05–名片APP
案例下載地址
https://github.com/liuyugang123/CardAPP
6.案例06–聊天室
案例下載地址
https://github.com/liuyugang123/chatAPP
7.案例07–百思不得姐APP
案例下載地址
https://github.com/liuyugang123/BaisiSister
8.案例08–天氣預(yù)報查詢
案例下載地址
https://github.com/liuyugang123/Weather
9.案例08–APP
案例下載地址
https://github.com/liuyugang123/V2EX
10.案例10–zhixingAPP
案例下載地址
https://github.com/liuyugang123/kwonWhere
11.案例11–閱讀APP
案例下載地址
https://github.com/liuyugang123/MyRead
