weex h5開發區別-實踐初級篇

html標簽

• weex中沒有標簽的概念，html中標簽對應於weex中的Components

• weex 無<span> 、<p> ，用<text>替代。但是<text>內部不能嵌入組件

• 在HTML中通常使用的 <img> 標簽在 Weex 中不支持，應該使用<image>。

• 內容部分有滾動效果，使用<scroller>。使用css的overflow屬性不能讓內容滾動。

css語法

• Weex 中只支持單個類名選擇器，不支持關系選擇器，也不支持屬性選擇器。

• 樣式默認是 scoped，即組件級別作用域。

• 視窗的寬度是750px(width=device-width)，設計稿給出的是375px，故寫css px 的時候要用2倍

• 布局，使用flexbox 布局

• box-shadow 安卓不支持, 目前官方最新的weex版本支持，需客戶端sdk升級

• iOS 如果寫外部陰影，ios 要加上一個background。

  box-shadow: 0px 0px 6px #cccccc;
  background: #ffffff;
  

• native, DOM設置position: absolute時， 不支持top、 left百分比, 要用px 寫死。

• 支持自定義font-family， 但是不支持自提文件放在服務器端，一般放在客戶端本地。

  把字體文件放在native的時候，注意下路徑，本地資源都采用'local:// '的方式加載，但是android需要加一個path，這個path隨便填，如rpd。
  

• 不支持z-index， 如果想要層級（如蒙層），請用position: absolute， 把你想要層級高的dom元素放在后邊

• 不支持css動畫，要動畫效果使用內建組件animation， 具體見https://weex-project.io/cn/references/modules/animation.html

• border不支持簡寫。style、width、color只能分開寫

  ​

關於DOM和BOM

• weex環境中沒有DOM，weex在native解析的html得到的是原生布局數

• weex沒有BOM，但是可以使用移動設備原生 API（即 Modules），通過注冊、調用模塊來實現。

  例如const storage = weex.requireModule('storage');

vue語法

• 事件修飾符 .prevent, .capture, .stop, .self在native不支持。鍵盤事件修飾符.enter, .tab, .ctrl, .shift同樣在native也不支持。

• 指令不支持 v-html 、v-show、v-clock

• options 不支持comments

• 實例方法不支持vm.$mount()

• 內置組件不支持transition

• 生命周期不支持activated和deactivated

• 使用組件，直接綁定click.native ，在web端會觸發兩次，用事件傳遞(事件名稱避免使用原生事件名稱)，可避免。

• 組件事件傳遞，最好不要和原生事件沖突。比如子組件this.$emit('click')，在web端 父組件@click會響應兩次，native卻沒有這個問題。

• :class="['verifyitem--' + verifyStatus]”, class 寫法不支持vue object的寫法，只支持數組式的寫法 , 而且只能寫一個自定義的類。 由於 Weex 在 native 上的渲染機制，從類名中取樣式會是一個高頻操作，簡化，具體見<https://github.com/alibaba/weex/issues/2303

• input and switch 組件不支持 click事件，使用change or input 替代。

• 不支持 document 和其他各種 DOM API。

• 沒有 window 、screen 、history 、location 、navigator 等變量。

• 關於蒙層， 安卓點透問題解決辦法：e.preventDefault && e.preventDefault();
  ​

  ​

  ​

配置

• 頁面

src/entry.js 執行的始端，相當於項目模版中的index.js

src/views/a.js 頁面a的配置，指定title和頁面入口

src/entries/a/ 頁面， 相當於項目模版中的src/webview/a

• 代碼在web端運行，需要依賴weex-vue-render（web端的vue DSL）。
• 解析.vue文件需要的loader，native端需要 weex-loader , web端需要Webpack + vue-loader

調試

• 本地運行的時候需要同時執行npm run dev 和 npm run serve

• ios調試小工具->Week DebugTool->掃描二維碼

  安卓調試小工具->功能->掃碼

動態更新機制

目前，打開的weex頁面的時候會向服務器請求js bundle，但是本次渲染的是本地的js bundle，要等到第二次打開才會渲染最新的。

這個更新機制不太友好，做不到h5的動態性。

其他

• 區分端 weex.config.env.platform = web/iOS/android

• 通過this.$route.push('/**') 打開另外一個weex頁面，回到上一個頁面的事件使用viewappear。具體見https://weex.apache.org/cn/references/common-event.html#Page-事件

• ajax請求，如果是native端， 避免跨域

• svg-icon 如果碰到顯示不全，請用圖片替代

一些參考的資料

• 中文文檔 https://weex-project.io/cn/

• 官方文檔 http://weex.apache.org/references/

• 阿里的weex-ui組件 https://github.com/alibaba/weex-ui/blob/master/README_cn.md

• Weex調試神器——Weex Devtools使用手冊 https://github.com/weexteam/article/issues/50

• https://juejin.im/tag/Weex

• https://segmentfault.com/t/weex

• https://stackoverflow.com/questions/tagged/weex

• http://fe.51.nb/blog/2

• https://segmentfault.com/a/1190000011027225

  ​