騰訊DeepOcean原創文章：dopro.io/egame-weex-…

隨著電競業務的不斷髮展，頁面功能越來越多，互動邏輯更加複雜，類似無限滾動、上拉重新整理、橫豎切換滾動等形式在業務中已是標配，經過重重優化後在H5中的體驗一直達不到理想狀態，沒錯，種種卡，H5的效能太差! 是持續優化還是破而後立選擇新的技術方向呢？我們選擇了更有效的後者。

為什麼選擇weex

相對H5來說，weex帶來的使用者體驗更好，它結合了H5和Native各自的優勢，既能像H5一樣快速迭代，又能和Native一樣流暢。

	H5	Weex	Native
開發成本	低	中	高
維護更新	簡單	簡單	複雜
使用者體驗	差	優	優
發版稽核	不需要	不需要	需要
跨平臺性	優	優	差

專案中每一次嘗試新方案、新技術時都將面臨著許多問題，企鵝電競接入weex也不例外，我們在使用weex進行設計還原時並不是像H5一樣順利，為了避免小夥伴重複踩坑，本文將主要圍繞H5與weex的區別以及weex ui開發時遇到的問題進行說明。

H5與Weex的區別

• 專案結構
• 標籤
• 引入sass
• sass變數

weex ui開發踩坑

• 通用樣式
• 佈局
• 元件
• 動畫
• UI效能

 

H5與Weex的區別

專案結構

由於weex和H5是兩套不同的技術方案，程式碼組織方式、構建工具、和開發側對接方式都會不同。

下圖是電競重構稿H5與weex目錄結構對比，之前H5開發是基於jinja模版，採用grunt構建，在release中生成相應的html檔案，而weex則主要在src中開發元件，採用webpack編譯，最終會在dist中生成相對應地web和weex版jsbundle檔案，再由weex.html生成的二維碼檢視weex版頁面效果。

此外weex下的src目錄內容是與開發側保持一致的，這樣的好處在於開發人員只需要關注元件的結構變化，其它資源直接更新替換即可。

標籤

weex只提供了17個元件，如div、text、image等，其中text和H5中p標籤等同，文字只能放到text下，text中不能巢狀其他標籤。

引入sass

1、安裝sass依賴的npm包：sass-loader、node-sass、sass-loader、stylus-loader

2、在build資料夾下webpack.base.conf.js的rules裡面新增配置

1. rules:{
2. {
3. test: /\.(scss|css)$/,
4. loader: 'vue-style-loader!css-loader!sass-loader!stylus-loader?indentedSyntax',
5. }
6. }er-width:$border.width;
7. }

3、style中修改lang="stylus"

sass變數

weex中的sass變數類似於物件的寫法

1. //variable.scss
2. $border={
3. color: #E9E9E9
4. width:2px
5. }

1. @import "./variable.scss";
2. .border{
3. border-color:$border.color;
4. border-width:$border.width;
5. }
6.  

weex ui開發踩坑

通用樣式

1、border

weex不支援使用border建立三角形，web可以正常顯示，而ios和android上顯示的是矩形，建議使用圖片代替

web: ios、android: 

2、transform

1、rotate角度儘量避免設定負數，某些部分安卓機型會不生效

2、不支援transform:skew 對於這一類角標需要做傾斜處理可以採用 圖片加  漸變程式碼處理

3、圖片

1、weex提供了image元件，但只支援遠端圖片連結

2、避免在image標籤上使用v-for，否則會導致安卓上圖片渲染異常（如slider中的圖片）

4、透明度

以下是涉及到顏色的相關屬性對透明度的支援度列表，

注意：box-shadow (本身不支援android)，background-image不支援IOS透明

屬性	IOS	Android	H5
color	支援	支援	支援
opacity	支援	支援	支援
border-color	支援	支援	支援
box-shadow	支援	不支援	支援
background-color	支援	支援	支援
background-image	不支援	支援	支援

5、點選態

專案比較常見的點選態多半是透明度的變化，如按鈕、列表、連結等，css的做法是新增偽類 (:active)，weex中也同樣支援，但是weex需要在原樣式中新增 opacity:1,否則點選後回不到初始狀態；此外，:active使用時,background-image在ios下會失效。

1. <template>  
2.    <div class="ui-btn">
3.        <text class="ui-btn-text">下載</text>
4.    </div>
5. </template>
6. <style scoped>
7.    .ui-btn{
8.        opacity: 1; /*必須新增*/
9.    }
10.    .ui-btn:active{
11.        opacity: .5;
12.    }
13. </style>
14.  

6、文字截斷

文字從限制1行到不限制可以用lines:0;

1. <template>
2.    <text class="info-text"
3.          @click="textClick"
4.          :style="textStyle">城市賽戰報,《王者榮耀》城市賽鄭州站歡樂落幕城市賽戰報,《王者榮耀》城市賽鄭州站歡樂落幕城市賽戰報,《王者榮耀》城市賽鄭州站歡樂落幕城市賽戰報,《王者榮耀》城市賽鄭州站歡樂落幕</text>
5. </template>
6. <style scoped>
7.    .info-text{
8.        lines:1;
9.        text-overflow:ellipsis;
10.    }
11. </style>
12. <script>
13.    export default {
14.        data(){
15.            return {
16.                textStyle:{}
17.            };
18.        },
19.        methods:{
20.            textClick(){
21.                this.textStyle = {
22.                    lines:0
23.                }
24.            }
25.        }
26.    }
27. </script>
28. </style>
29.  

7、層級問題

例如有a、b、c、d 四層結構，其中a、b、c均為absolute定位,z-index由大到小，d為普通結構，我們知道在css中a層應該是處於最上方，d在最下方，那麼在weex中表現如何呢？

1. <div class="wrapper">
2. <div class="box a">a</div>
3. <div class="box b">b</div>
4. <div class="box c">c</div>
5. <div class="d">d</div>
6. </div>
7.  
8.  

web   native

可以看到web和ios、android的表現不一致，ios、android中是以程式碼中dom順序來依次新增的，和z-index無關，後面載入的檢視會覆蓋前面的檢視。

所以要保證web、ios、android三端表現一致，改變dom書寫順序即可。

1. <div class="d"></div>
2. <div class="box c"></div>
3. <div class="box b"></div>
4. <div class="box a"></div>
5.  

8、安卓下遮擋問題

安卓下容器如果設定了寬高，那麼子元素不能超出容器範圍

[cc lang="html"]

 

[/cc]

web、ios android 

建議：fixed定位不會受父容器影響，如果需要超出限制，子元素可以設定fixed

9、v-if問題

在做一些操作切換狀態時（如按鈕點選置灰），應儘量避免使用v-if，使用v-if會閃，且部分安卓機子會發生不可描述的事情（如部分三星機型會出現按鈕文字居頂），可採用新增class的方式

佈局

1、單行文字與圖片並排方案

目前專案中存在這樣的情形，暱稱與直播標籤並排，暱稱文字短時直播要跟隨，暱稱很長時要做溢位截斷（超出時加...）

這種佈局方式在css中要做到很容易，而在weex中利用提供的flex佈局確很難實現，最後的解決方案是通過js動態設定文字與標籤父級的寬度，從而控制文字的溢位

1. <template>
2.    <div class="wrapper"  @appear="onappear">
3.        <div class="info-container" ref='info-container'>
4.            <div class="info" ref='info' :class="isFullText?['info-full']:[]">
5.                <text class="nick-text">{{isFullText}}企鵝電競企鵝電競企鵝電競企鵝電競</text>
6.                <img src="http://119.29.8.64/vipstyle/egame/app/weex/tab/ERICKCHEN-MC0/dist/static/img/live.b467410.png" class="live-image">
7.            </div>
8.        </div>
9.    </div>
10. </template>
11.  
12. <style scoped lang="stylus">
13.    .info-full{
14.        width:300px;
15.    }
16. </style>
17.  
18. <script>
19. const dom = weex.requireModule('dom')
20.    export default {
21.        data(){
22.            return {
23.                isFullText:false
24.            };
25.        },
26.        methods:{
27.            onappear(){
28.                dom.getComponentRect(this.$refs['info'],option1=>{
29.  
30.                        dom.getComponentRect(this.$refs['info-container'],option2=>{
31.  
32.                            if(option1.size.width>=option2.size.width){
33.                                this.isFullText=true;
34.                            }
35.                        })
36.  
37.                    });
38.  
39.  
40.            }
41.        }
42.    }
43. </script>
44.  

2、多行文字與圖片並排方案

場景一：圖片位於段落左側

css的float可以做到圖文混排，而weex只提供了flex佈局，並且text元件之間也不能進行巢狀，無法做到這種圖文混排效果，不過weex的text元件比較奇特，那就是text元件中的空格是照程式碼原樣輸出的，如

1. <text>              戰國鬼才傳，這個名字想必很多人聽都沒有聽過吧，這個名字說實話真的不是很吸引人…</text>
2.  

文案效果：

所以解決的方案可以利用填充空格給圖片預留位置，先計算一個空格的寬度，再計算這張圖片所需要的空格數量，最後空格連線字串輸出。

ios、android效果如下（紅色色塊為圖片區域）：

結構

1. <template>
2.    <div class="wrapper">
3.      <scroller class="scroller">
4.        <div @appear="handleAppear">
5.            <text>空格寬度：{{spaceWidth}}-空格數量：{{spaceNum}}</text>
6.            <text class="demo-text" ref="demo-text1">          test</text>
7.            <text class="demo-text" ref="demo-text2">test</text>
8.        </div>
9.  
10.        <div class="rich">
11.          <div class="rich-icon"></div>
12.          <text class="rich-text" :style="textStyle">{{content}}</text>
13.        </div>
14.      </scroller>  
15.  
16.    </div>
17. </template>
18.  

樣式

1. <style scoped>
2.    .demo-text{
3.        position: absolute;
4.        font-size: 32px;/*文字大小與需要加空格文字大小保持一致*/
5.        opacity: 0;
6.    }
7.    .rich{
8.      position: relative;
9.    }
10.    .rich-icon{
11.      position: absolute;
12.      left:0;
13.      top:4px;
14.      width: 120px;
15.      height: 32px;
16.      background-color: red;
17.    }
18.    .rich-text{
19.      font-size: 32px;
20.    }
21. </style>
22.  

核心程式碼

1. <script>
2.    const dom = weex.requireModule('dom');
3.    export default {
4.        data(){
5.            return {
6.                spaceWidth:0,//空格寬度
7.                spaceNum:0,//所需空格數量
8.                opacity:0,//初始透明度為0，避免文案抖動
9.                content:'王者榮耀遊戲中的鑽石用來做什麼最合算?王者榮耀鑽石用來幹什麼最好？在王者榮耀中鑽石並不是唯一通用的貨幣，在遊戲中還有金幣和點券，小編個人覺得鑽石在遊戲中並沒有其他兩種貨幣有優勢。'
10.            };
11.        },
12.        computed:{
13.                textStyle(){
14.                  return {
15.                    opacity:this.opacity
16.                  }
17.                }
18.        },
19.        methods:{
20.            handleAppear(){
21.                setTimeout(()=>{
22.                    this.setTextContent();
23.                },30)
24.            },
25.            async setTextContent(){
26.                const text1El = this.$refs['demo-text1'];
27. 相關推薦

    企鵝電競weex實踐——UI開發篇

    騰訊DeepOcean原創文章：dopro.io/egame-weex-… 隨著電競業務的不斷髮展，頁面功能越來越多，互動邏輯更加複雜，類似無限滾動、上拉重新整理、橫豎切換滾動等形式在業務中已是標配，經過重重優化後在H5中的體驗一直達不到理想狀態，沒錯，種種卡，H5的效能太差! 是持續優化還是破而後立選

    ［iOS］關於 App 混合（Hybrid）開發的優化，包括H5、Weex等（本篇博客主要針對 iOS 應用講解，但該思想同樣適用於Android）

    color 數據 後臺 lib 新版 生成 下載地址 代碼 版本 　　我們知道混合開發，可以節省很多成本（時間成本，經濟成本等等），所以有很多公司比較鐘愛這種開發形式，今天所講的優化方式，也是我在我們公司的應用中實際用了的，而且我寫的這個優化的 SDK 已經開源到 gith

    weex 項目開發（三） weex + weex-ui

    too set http one exp pos 效果圖 left light github地址：weex-ui https://github.com/alibaba/weex-ui 官網： https://alibaba.github.io/weex-ui/#/cn

    iOS開發·runtime原理新葡京網站開發與實踐: 基本知識篇

    方法 流程 oot 發的 以及 soc 實例方法 desc 描述 運行時新葡京網站開發 haozbbs.com Q1446595067 1.1 基本概念: 運行時 Runtime 的概念 Runtime 又叫運行時，是一套底層的 C 語言 API，其為 iOS 內部的核心

    《JavaScript設計模式與開發實踐》模式篇（3）—— 代理模式

    代理模式是為一個物件提供一個代用品或佔位符，以便控制對它的訪問 故事背景： 假設當 A 在心情好的時候收到花，小明表白成功的機率有 60%，而當 A 在心情差的時候收到花，小明表白的成功率無限趨近於 0。 小明跟 A 剛剛認識兩天，還無法辨別 A 什麼時候心情好。如果不合時宜地把花送給 A，花

    《JavaScript設計模式與開發實踐》模式篇（6）—— 命令模式

    命令模式是最簡單和優雅的模式之一，命令模式中的命令(command)指的是一個執行某些特定事情的指令。 應用場景     有時候需要向某些物件傳送請求，但是並不知道請求的接收者是誰，也不知道被請求的操作是什麼。此時希望用一種鬆耦合的方式來設計程式，使得請求

    《JavaScript設計模式與開發實踐》模式篇（11）—— 中介者模式

    中介者模式的作用就是解除物件與物件之間的緊耦合關係。增加一箇中介者物件後，所有的 相關物件都通過中介者物件來通訊，而不是互相引用，所以當一個物件發生改變時，只需要通知 中介者物件即可。中介者使各物件之間耦合鬆散，而且可以獨立地改變它們之間的互動。中介者模式使網狀的多對多關係變成了相對簡單的一對多關係

    《JavaScript設計模式與開發實踐》模式篇（12）—— 裝飾者模式

    在傳統的面嚮物件語言中，給物件新增功能常常使用繼承的方式，但是繼承的方式並不靈活， 還會帶來許多問題:一方面會導致超類和子類之間存在強耦合性，當超類改變時，子類也會隨之 改變;另一方面，繼承這種功能複用方式通常被稱為“白箱複用”，“白箱”是相對可見性而言的， 在繼承方式中，超類的內部細節是對子類可見的，

    《JavaScript設計模式與開發實踐》原則篇（2）—— 最少知識原則

    最少知識原則(LKP)說的是一個軟體實體應當儘可能少地與其他實體發生相互作用。這 裡的軟體實體是一個廣義的概念，不僅包括物件，還包括系統、類、模組、函式、變數等。 單一職責原則指導我們把物件劃分成較小的粒度，這可以提高物件的可複用性。但越來越 多的物件之間可能會產生錯綜複雜的聯絡，如果修改了其中一個物件

    最佳實踐（2）：iOS開發篇

    這份文件就像軟體專案一樣，如果我們不維護它就會逐漸腐壞。歡迎大家跟我們一起來維護它——只需提交 issue 或者發 pull request 即可！ 為什麼要寫這篇文件？ iOS 開發在上手時可能會有些令人生畏。無論是 Objective-C 還是 Swift 在別處都沒有廣

    Android UI開發第三十一篇——Android的Holo Theme

            好長時間沒寫Android UI方面的文章了，今天就閒扯一下Android的Holo主題。一直做android開發的可能都知道，Android 系統的UI有過兩次大的變化，一次是andr

    Android UI開發第十四篇——可以移動的懸浮框

              工作中遇到一些專案需要把窗體顯示在最上層，像來電彈窗顯示電話號碼等資訊或攔截簡訊資訊顯示給使用者，我們想這些資料放在最上層，activity就滿足不了我們的需求了，有些開發者使用了迴圈顯示Toast的方式，toast是不能獲得焦點的，這種方法是不可取的。這

    .NET Core實戰專案之CMS 第十三章 開發篇-在MVC專案結構介紹及應用第三方UI

    原文: .NET Core實戰專案之CMS 第十三章 開發篇-在MVC專案結構介紹及應用第三方UI 作為後端開發的我來說，前端表示真心玩不轉，你如果讓我微調一個位置的樣式的話還行，但是讓我寫一個很漂亮的後臺的話，真心做不到，所以我一般會選擇套用一些開源UI模板來進行系統UI的設計。那如何套用呢？今天就以我們

    《JavaScript設計模式與開發實踐》原則篇（3）—— 開放-封閉原則

    在面向物件的程式設計中，開放封閉原則(OCP)是最重要的一條原則。很多時候，一個程式具有良好的設計，往往說明它是符合開放封閉原則的。 當需要改變一個程式的功能或者給這個程式增加新功能的時候，可以使用增加程式碼的方式，但是不允許改動程式的原始碼。 故事背景 假設我們是一個大型 Web 專案的維護人

    Android UI開發第二十五篇——分享一篇自定義的 Action Bar

           Action Bar是android3.0以後才引入的，主要是替代3.0以前的menu和tittle bar。在3.0之前是不能使用Action Bar功能的。這裡引入了自定義的Actio

    Android UI開發第四十篇——ScrollTricks介紹

    ScrollTricks是一個開源控制元件，實現了兩個簡單功能：1、Quick Return:向上滑動時，View也向上滑動並且消失，當向下滑動時，View馬上出現。例如Google Now的搜尋功能。

    Android UI開發第十五篇——分享一個登入緩衝介面

          今天在網上發現了一個很漂亮的緩衝介面，在這裡分享一下。主要還是用的android Anim。java code：public class Main extends Activity { private Animation anm; private int ma

    Android UI開發第三十篇——使用Fragment構建靈活的桌面

    http://www.lupaworld.com/article-222973-1.html 當我們設計應用程式時，希望能夠盡最大限度的適配各種裝置，包括4寸屏、7寸屏、 10寸屏等等，Android開發文件給了我們參考，而且Google IO的app（如圖二）也實現了

    web開發效能優化---UI介面篇

    1、儘量採用div+css佈局 DIV+CSS相比較與表格佈局的優勢： a.程式碼精簡 使用DIV+CSS佈局，頁面程式碼精簡，這一點對XHTML有所瞭解的都知道。程式碼精簡所帶來的直接好處有兩點：一是提高蜘蛛爬行效率，能在最短的時間內爬完整個頁面，這樣對收錄質量有一定好處

    使用Asp.Net Core MVC 開發項目實踐[第四篇:基於EF Core的擴展2]

    拉姆達表達式 接下來 col ron private cte 使用 下載 成員 上篇我們說到了基於EFCore的基礎擴展,這篇我們講解下基於實體結合拉姆達表達式的自定義更新以及刪除數據. 先說下原理:其實通過實體以及拉姆達表達式生成SQL語句去執行 第一種更新擴展: