實習第十四天

今天已是第十四天了

進步仍是太慢了

目前爲止到如今我一句HTML代碼沒寫，

有pc端和app端，

數據獲取，數據發送，數據請求，數據呈現，

如何一眼就能夠看錯誤在哪裏

要會使用工具

 

微信小程序：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

按照uni-app官網學習

 

須要學習的愈來愈多，可是基礎的卻沒有鞏固

h5c3 小程序開發 

 

 

mui、vue、hbuilder簡單介紹：https://www.jianshu.com/p/3519a7641753

0.3132017.02.17 12:54:25字數 1365閱讀 5322

HBuilder

• 1.HBuilder是一個極客工具，追求無鼠標的極速操做。不論是敲代碼的快捷設定，仍是操做功能的快捷設定，都融入了效率第一的設計思想。
• 2.查看、編輯代碼塊能夠在工具-自定義代碼塊中，選擇相應的代碼塊進行查看和編輯。也能夠在激活代碼塊的代碼助手中，點擊詳細信息右下角的修改圖標進行修改和查看。
• 3.HBuilder內嵌了jquery、bootstrap、angular、mui等經常使用框架的語法提示庫，而且這些框架語法同樣能夠享受到HBuilder的全時提示機制，提示圖片、顏色、id、class...
• 4.HBuilder的語法庫包括W3C的HTML、JAVASCRIPT、CSS的正式標準和推薦標準...，ECMAScript中瀏覽器支持的部分，還有各大瀏覽器的擴展語法，webkit、moz、ms，均實時更新到各瀏覽器的最新版本。信息欄中的瀏覽器品牌圖標，全亮表示無障礙支持該語法，全灰表示不支持，而半亮則表示該瀏覽器部分支持該語法。半亮時會下圖標下方顯示出來詳細的支持狀況，好比video標籤，從IE9纔開始支持。
• 5.HTML5一大用途就是App開發。HBuilder良好的支持手機App開發。包括新建移動App項目、run in device真機調試、本地及雲端打包。HBuilder開發的HTML5+ App，比普通的web App功能更強、性能更高，具體參考文檔 5+ App章節。
• 6.更多介紹http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/95

mui

1.mui是一個能夠方便開發出高性能App的框架，也是目前最接近原生App效果的框架。

2.其餘移動App框架比較

• 基於jq的jqmobile，性能低的沒法忍受
• 基於angular的ionic，都把pc端很重的東西引入到移動App中。angularjs自己設計是爲了pc端網頁的雙向數據綁定，作個移動App幹嗎用這麼重的東西。
• bootstrap這種響應式設計，性能在低端機不足，並且UI風格一看就是網頁，不是App的感受。
• framework7只能在iPhone上運行也沒法被接受。
  因而爲了方便廣大開發者，咱們基於ratchet框架製做了mui。

vue

Vue.js（讀音 /vju?/, 相似於 view） 是一套構建用戶界面的 漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。

渲染效果

在生產環境中的性能是相當重要的，目前爲止咱們所具體討論的即是針對此環境。但開發過程當中的表現也不容小視。不錯的是用 Vue 和 React 開發大多數應用的速度都是足夠快的。
當性能在生產中性能是直接與終端用戶體驗相關的更重要的指標時，表如今開發中仍然很重要,由於它是與開發相關經驗
然而，假如你要開發一個對性能要求比較高的數據可視化或者動畫的應用時，你須要瞭解到下面這點：在開發中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。
這是因爲 React 有大量的檢查機制，這會讓它提供許多有用的警告和錯誤提示信息。咱們一樣認爲這些是很重要的，可是咱們在實現這些檢查時，也更加密切地關注了性能方面。
更多性能對比：https://cn.vuejs.org/v2/guide/comparison.html

移動端web開發注意點

1.點擊事件

click 和 tap 比較二者都會在點擊時觸發，可是在手機WEB端，click會有 200~300 ms，因此請用tap代替click做爲點擊事件。

2.屏幕適配問題

使用自適應佈局模式，這樣作可讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都可以正常的顯示，你無需再次考慮設備的分辨率。某些特定的css屬性不推薦用於移動端佈局，好比float屬性。可是有些屬性須要咱們去增強，例如咱們瀏覽器上的a標籤，電腦是經過鼠標進行點擊，可是咱們手機是沒有鼠標功能的，因此爲了更好的體驗點擊效果，建議採用塊級標籤來處理。

3.低端機體驗效果問題

不一樣手機存在不一樣webview版本，因此會致使不一樣手機有不一樣的體驗效果，例如我在開發的時候曾經遇到太低端手機沒法監聽scroll的變化。所以，在測試屏幕適配的同時還要注意低端機功能效果是否實現。

 

Flex佈局：https://www.cnblogs.com/dreamperson/p/9367008.html

 

這個Flex佈局是能夠的

 

1、什麼是Flex佈局？

Flex是Flexible Box的縮寫，顧名思義爲「彈性佈局」，用來爲盒裝模型提供最大的靈活性。

任何一個容器均可以指定爲Flex 佈局。

1 2 3

.box{      display :flex; }

　　行內元素也可使用Flex佈局。

1 2 3

.box{      display :inline-flex; }

　　webkit內核的瀏覽器，必需加上-webkit前綴

1 2 3 4

.box{      display :-webkit-flex;      display :flex; }

　　須要注意的是，設爲flex佈局之後，子元素的float、clear和vertical-align屬性將失效