今天給大家發(fā)一篇?jiǎng)偢绲奈恼抡野＿@篇文章絕對(duì)火爆酝蜒，超級(jí)干貨吕粹，不看必后悔
目錄
主要從以下幾個(gè)方面給大家總結(jié)一下微信小程序相關(guān)的知識(shí)!
1?前言
2.什么是小程序?
3.微信小程序在微信開(kāi)發(fā)中的位置?
4.微信小程序框架–MINA
5.現(xiàn)代化前端技巧
6.MINA 是不是 HTML 5
7.小程序與傳統(tǒng)APP區(qū)別
8.小程序?yàn)殚_(kāi)發(fā)者提供了什么?
9.微信小程序源碼結(jié)構(gòu)
10.MINA 組件
11.微信小程序案例
今天把之前收集的微信小程序案例,給大家共享出來(lái),一起學(xué)習(xí)!學(xué)習(xí)的別人東西是自己技能增長(zhǎng)最快的一種方式巴席。 就像之前我們?cè)趯?xiě)程序時(shí),主管或項(xiàng)目經(jīng)理,經(jīng)常提醒我們一樣,程序?qū)懙奶珌y,不簡(jiǎn)潔,要多看別人寫(xiě)的好的的程序源碼,看多了,模仿多了,自己寫(xiě)代碼結(jié)構(gòu)和性能就提高很多了。
回歸正題,今天著重給大家15個(gè)微信小程序案例,需要的可以下載看看!首先在介紹源碼之前,還是給大家講講微信小程序相關(guān)的知識(shí)兰迫。
小程序是微信推出的一種新的公眾號(hào)的形態(tài)
不需要下載安裝即可在微信中使用的應(yīng)用
小程序、訂閱號(hào)炬称、服務(wù)號(hào)逮矛、企業(yè)號(hào)是并行的體系
小程序融合了很多前端開(kāi)發(fā)界的概念，但是并沒(méi)有采用任何一個(gè)框架转砖，包括流行的REACT须鼎、VUE，還有CORDOVA府蔗。它不是三者中的任意一個(gè)晋控，而是拼湊出一個(gè)新的框架。
盡可能簡(jiǎn)單姓赤、高效的方式讓開(kāi)發(fā)者可以在微信中開(kāi)發(fā)
具有原生 APP 體驗(yàn)的服務(wù)
Virtual DOM：開(kāi)發(fā)者寫(xiě) iOS 和原生的 h5 應(yīng)用的時(shí)候赡译，很多時(shí)候是手動(dòng)地去操作 UI，用戶按按鈕之后改變頁(yè)面不铆。當(dāng)應(yīng)用很復(fù)雜的時(shí)候在改變的過(guò)程可能就會(huì)產(chǎn)生錯(cuò)誤蝌焚，Virtual DOM每次要去改變一個(gè)界面的時(shí)候，重新把界面做一次再進(jìn)行修改誓斥，避免出錯(cuò)只洒。
MVVM：分離邏輯和數(shù)據(jù)。
組件化：功能劳坑、風(fēng)格模塊化毕谴，每個(gè)風(fēng)格封裝在組件里就不會(huì)泄露。
微信小程序一出來(lái)距芬，大家都在猜測(cè)是基于什么技術(shù)涝开，是 H5 還是原生。它的框架看起來(lái)既像 H5框仔，又像原生舀武。小程序?qū)懙氖?H5 代碼，但是它又不遵從 H5 的標(biāo)準(zhǔn)寫(xiě)法离斩。它很多方面借用了 Web 技術(shù)银舱，但很多細(xì)節(jié)又不一樣衷旅。
1.非標(biāo)準(zhǔn)標(biāo)簽（組件）
我們知道寫(xiě)瀏覽器用的都是標(biāo)準(zhǔn)的主鍵，但是在 MINA 里面纵朋，小程序自成一個(gè)體系柿顶，雖然后臺(tái)還是一樣用瀏覽器的主鍵去實(shí)現(xiàn)的，但是在前面寫(xiě) HTML 的時(shí)候加上它自己的一套標(biāo)準(zhǔn)操软。
2.非標(biāo)準(zhǔn)CSS：
rpx單位是微信小程序中css的尺寸單位嘁锯，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx聂薪。如在 iPhone6 上家乘，屏幕寬度為375px，共有750個(gè)物理像素藏澳，則750rpx = 375px = 750物理像素仁锯，1rpx = 0。
3.非標(biāo)準(zhǔn)事件系統(tǒng)：
當(dāng)按下一個(gè)按鈕的時(shí)候分配一個(gè)事件翔悠，這個(gè)事件也是非標(biāo)準(zhǔn)的业崖，但是跟非標(biāo)準(zhǔn)很像。包括冒泡階段和捕捉階段蓄愁。
4.非標(biāo)準(zhǔn) JS API：
支持微信的接口双炕，但是沒(méi)有任何標(biāo)準(zhǔn) JS接口。
5.不能操作 document 或者 DOM：
雖然是在瀏覽器里面運(yùn)行撮抓，但是不能操作瀏覽器本身妇斤，不能操作原生文件本身，只能用Virtual DOM 去改變頁(yè)面丹拯。
6.有些組件有奇怪的默認(rèn)高寬(scroller,image)：
通常在 Web 瀏覽器里面站超，主鍵是按圖片內(nèi)容的高度，基本上所有組件默認(rèn)高寬都是0乖酬，小程序的image是按照background-image來(lái)實(shí)現(xiàn)的死相，所以所有圖像會(huì)得到一個(gè)初始寬高320 240，而且無(wú)法通過(guò)auto重置剑刑，只可以通過(guò)具體的值來(lái)重寫(xiě)媳纬。
7.Require：
因?yàn)樾〕绦蜃猿梢粋€(gè)體系，JS 的包施掏、CSS 框架都不能用，全部都要重新開(kāi)始茅糜。
8.1M打包上線：
能夠更快地下載七芭。
7.小程序與傳統(tǒng)APP區(qū)別
微信小程序和傳統(tǒng)的APP存在較大的差異，所以在設(shè)計(jì)小程序時(shí)不能以傳統(tǒng)APP的思維來(lái)實(shí)現(xiàn)蔑赘，要采用與之相匹配的小程序思維進(jìn)行設(shè)計(jì)狸驳。那么，可以從以下6個(gè)關(guān)鍵詞中思考：
1)輕量：
讓用戶便捷、迅速堡纬、簡(jiǎn)單地獲取服務(wù)瞬痘，不要挑戰(zhàn)微信的產(chǎn)品觀。
2)社交：
必須和微信生態(tài)融入辩昆，那就必須考慮到微信的生態(tài)基因阅酪。拋開(kāi)社交關(guān)系鏈做的話，最大的可能性是過(guò)于平庸導(dǎo)致反響平平汁针。
價(jià)值：小程序本身不是為了嘩眾取眾术辐，必須對(duì)用戶有切實(shí)的價(jià)值，能夠讓用戶在有需要時(shí)主動(dòng)進(jìn)入施无，主動(dòng)喚醒辉词。
3)引流：
對(duì)于第三方來(lái)說(shuō)，微信必須是重要的流量入口猾骡。在微信允許的范圍內(nèi)瑞躺，用可能的手段獲取用戶流量，是我們需要著重考慮的兴想。
4)數(shù)據(jù)：
即便沒(méi)有引流成功隘蝎，至少要獲取用戶數(shù)據(jù)，支持自有APP開(kāi)展業(yè)務(wù)襟企。
5)生態(tài)：
如果已經(jīng)有了微信公眾號(hào)嘱么、服務(wù)號(hào)，在微信生態(tài)內(nèi)考慮和小程序相互依托顽悼，互為補(bǔ)充曼振。
小程序提供了一個(gè)框架，微信稱(chēng)之為mina蔚龙，這個(gè)框架主要分兩個(gè)層面冰评，視圖層和邏輯層∧靖框架的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)甲雅。WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data，這個(gè)數(shù)據(jù)綁定是單向的坑填，只有數(shù)據(jù)發(fā)生變化抛人，視圖才會(huì)做出相應(yīng)的調(diào)整。這種模式脐瑰，讓開(kāi)發(fā)者專(zhuān)注于事件處理上妖枚，改變對(duì)象狀態(tài)，實(shí)現(xiàn)視圖更新苍在。 為了方便以及限制開(kāi)發(fā)者開(kāi)發(fā)绝页，微信自己定義了一系列的基礎(chǔ)組件荠商，就是視圖層的組成單元（表單組件，媒體組件续誉，導(dǎo)航等）莱没，組件自帶一些功能與微信風(fēng)格的樣式，類(lèi)似html標(biāo)簽酷鸦。微信還提供了很多原生的微信api,用來(lái)調(diào)用微信內(nèi)部提供的功能饰躲，以及一個(gè)微信小程序開(kāi)發(fā)者工具。
視圖層（將邏輯層的數(shù)據(jù)展現(xiàn)在視圖上）
邏輯層（通過(guò)改變數(shù)據(jù)[setData方法]來(lái)改變視圖）
配置文件
視圖層（將邏輯層的數(shù)據(jù)展現(xiàn)在視圖上）
邏輯層（通過(guò)改變數(shù)據(jù)[setData方法]來(lái)改變視圖）
配置文件
在小程序中井佑，微信規(guī)定了界面的組成模式属铁，由四個(gè)文件組成。
.wxml文件（頁(yè)面結(jié)構(gòu)文件）標(biāo)簽語(yǔ)言躬翁，類(lèi)似html焦蘑，真正負(fù)責(zé)頁(yè)面結(jié)構(gòu)的文件，可以綁定數(shù)據(jù)盒发。
.wxss文件（樣式表文件）類(lèi)似css例嘱，大部分css樣式都相同
.js文件（腳本文件）用來(lái)運(yùn)行我們的邏輯，使用js語(yǔ)言
.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–知乎日?qǐng)?bào)
案例下載地址
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ù)報(bào)查詢
案例下載地址
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
