本文目錄一覽:
WeChat小程序基礎篇-js事件
js負責頁面與用戶的交互,動態修改頁面的內容。使用js腳本來處理用戶的操作。
操作解釋: 點擊button按鈕(點我),修改界面的msg顯示為”BeiJing佩奇”
綁定事件: bindtap定義了”點擊事件”
j s 函數: Page({定義函數對應bindtap})
例如開頭示例一樣,組件綁定事件,js編寫事件函數。
這裡大概介紹下log打印的內容
☞ 小生不才,附上 博客地址 ☜
事件分為冒泡事件和非冒泡事件
1.冒泡事件:當一個組件被觸發後,該事件以此向父節點傳遞。
2.非冒泡事件:當一個組件觸發後,該事件不會向父節點傳遞。
解釋:當點擊子節點時,會依次觸發”bind事件2,bind事件1″
解釋:當點擊子節點時,只觸發”bind事件2″,而沒有觸發”bind事件1″
自基礎班1.5.0起,觸摸類事件支持捕獲階段。捕獲階段位於冒泡階段之前。事件到達節點的順序與冒泡相反。捕獲事件採用的關鍵字為capture-bind、capture-catch,當然catch還是中斷,取消冒泡階段。
1. 示例1,執行順序為hand2,hand4,hand3,hand1
2. 示例2,加入capture-catch捕獲事件,只執行hand2
小程序app.js是配置什麼
app.js是編寫小程序邏輯的,比如登錄啊,獲取權限啊什麼的。app.json才是配置文件。(網頁鏈接)
小程序JS和普通瀏覽器JS的區別
語法上是一樣的,但小程序的js是不能直接操作DOM對象的(因為不存在DOM),只能通過數據綁定的方式由小程序去渲染界面。
重磅:微信小程序發佈WeUI.js 官方視覺組件庫!
12月16日,微信正式發佈了WeUI.js動態視覺組件庫。WeUI是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信內網頁和微信小程序量身設計,可以讓用戶的使用感知更加統一。WeUI.js動態視覺組件庫包含了button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。
一、weui.js是什麼?
weui.js是WeUI的輕量級JS封裝,不需要依賴其它庫,GZIP後僅有9.0 KB。
二、weui.js包含哪些組件?
actionsheet
alert
confirm
dialog
form
gallery
loading
picker
searchbar
slider
tab
toast
toptips
uploader
三、使用方式:
Github:
詳細文檔:
四、微信團隊為何在此時公布官方視覺組件庫:
1、為了更像微信OS
微信團隊和之前的輕應用平台相比,不是簡單為了給開發者和用戶之間提供一個平台連接、也不是只為了做一個流量入口平台那麼簡單,而是為了打造一個完美的微信OS生態。當年百度、UC等平台推出的輕應用,更多的只是起到了一個平台倒流和連接的作用,並沒有對開發框架和設計規範進行過如此統一的規範和要求。現在看來,最好的生態,當然是類似蘋果安卓OS那樣,所有的應用具備統一的開發框架和接近OS生態的完美體驗。
2、為了極致的用戶體驗
從小程序內測到公測已經過去了三個月,我們有理由相信微信團隊已經接到了不少小程序開發者的審核需求,這其中最讓微信團隊頭疼的應該就是開發設計規範不符合微信團隊的要求,達不到微信團隊想要的那種用戶體驗。微信官方進一步推出Weui就是為了讓所有開發者提交的小程序都能夠接近微信APP的體驗效果,從而給微信用戶帶去最佳的用戶體驗,這也是未來小程序生態能否提高8億用戶使用熱度和頻率的一個重要指標。
3、倒逼第三方服務商轉型
微信團隊在早年推出公眾號的時候曾經推出過「開發者模式」,當時,微信團隊鼓勵第三方公司利用微信公眾號開放的接口進行各種微應用的開發,比如:微網站、微商城,微工具等各種應用。但是,微信團隊早期並沒有對這些接入應用的開發框架和設計規範進行統一的定義和嚴格要求,導致每一個服務接入商基本都是按照自己的開發框架和設計標準進行開發來設計,使得市面上看到的這些應用頁面呈現五花八門,用戶體驗極其糟糕,這也就造成了早期的應用服務被用戶的接受度過低,同時無法給企業帶來實際價值的癥結所在。隨着微信小程序的出現,微信團隊重塑統一的開發框架和設計規範,倒逼這些第三方服務機構重新定義自己的跟隨策略,按照新的開發規範重新提供新的平台服務。或許,現有的微信第三方服務機構格局將被打破,第三方服務機構將面臨新一輪的洗牌。
五、WeUI.js給小程序開發者帶來了哪些好處?
1、使用Weui設計出來的小程序如同用戶使用微信客戶端一樣的視覺效果,可以讓小程序的體驗感更強。
2、使用Weui設計小程序更夠提高開發者的開發效率,降低開發者的開發成本,從而讓開發者更快的開發出符合規範的小程序。
3、使用Weui設計小程序如同您僱傭一支國內頂尖的設計團隊幫您打造一個接近完美的視覺框架。
六、微信小程序給前端設計領域帶來了那些影響和推動:
1、全平台兼容
微信小程序重新定義了APP,使得一款應用能夠在android、iphone以及windows
phone中都能運行,對於前端來說實現了「一次編譯,到處運行」的理念。
2、前端開發思維的改變
設計理念需要從傳統的PC思維需要轉向到以移動為先的思維,這其中主要考慮的差異化在於屏幕尺寸、網絡帶寬、輸入設備等幾個方面的不同。同時很多之前可以用於iOS與Android的控件需要在小程序上重新調整和創新。
3、推動前端技術的發展
微信小程序以其簡單的開發環境,使以Javascript和HTML5為主的前端技術成為真正的主流,越來越多的人開始接觸前端開發,為前端技術的發展貢獻力量。
4、前端投入成本的增加
原本一家傳統企業的前端開發人員需要覆蓋PC端、移動端、APP應用等各種平台,微信小程序的出現會導致未來的前端開發人員還需要涉及小程序的前端開發設計,這在一定程度增加了前端開發人員學習和工作成本,同時也會給企業帶來更多的人才投入成本。
5、前端人才的競爭更加明顯
微信小程序的誕生會吸引一大批後台開發、APP開發的程序猿們加入前端開發大軍,進一步衝擊現有的前端開發人員的的知識結構,加劇前端開發崗位的競爭格局,迫使一些低端且知識結構不全面的前端開發人員面臨被淘汰或者失業的風險。
6、全棧工程師會越來越吃香
隨着微信小程序的出現,既懂後台,又懂前端的人才會越來越受到企業的重視和擁抱,特別對於創業團隊和互聯網企業來說,一個擁有全局思維、熟悉各種技術的人才非常重要。身為技術人員,我們需要不斷擁抱變化,不斷get新技能,努力成為一個全棧工程師。
微信正式發佈WeUI.js動態視覺組件庫,這意味着,大家可以在小程序裏面,直接使用在官方設計文檔附錄中的視覺組件(而不需要額外引入其他庫)。微信團隊真的是用心在打造小程序生態,筆者也是真的在用心給大家帶來更多乾貨,這也是筆者第一時間給大家帶來的解讀。碼字不易,如果本文對你和你身邊的朋友有所啟發,感謝轉發,你的支持是我們碼字員最大的動力。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/246974.html