摘要:如果你對微應用感興趣,也在開發著微信小程序,不妨來看看為了讓你減少顧慮而準備的技術對比表格,是的,開發釘釘的微應用是如此的簡單。訪問這個鏈接閱讀釘釘微應用與微信小程序技術對比表格。與內存管理由于運行在中,此與有較大差異。
</>復制代碼
在自己的業務環境中使用,并開放給第三方isv,企業開發者使用,這是一篇有內涵有故事的文章。
如果你對weex微應用感興趣,也在開發著微信小程序,不妨來看看為了讓你減少顧慮而準備的技術對比表格,是的,開發釘釘的weex微應用是如此的簡單。
訪問這個鏈接閱讀: 釘釘Weex微應用與微信小程序技術對比表格 。
技術概述weex是阿里開源的一套構建高性能移動界面的原生跨平臺技術框架,它的上層由Vue,Rax(非常類似React的開發框架)實現數據驅動,底層由iOS,Android實現render engine來驅動界面的最終落地。類比React Native它的優勢在于難得的一次編寫,多端運行,是的,它也很好的支持著移動Web端。
構建-buildNative使用weex-loader,Web則需要使用vue-loader,在Web端上vue-loader目前僅支持^11.3.3版本,以及weex-vue-render需要>= 0.11.50,并且vue-loader的配置做如下修改:
webpack 1.x
</>復制代碼
module: {
loaders: [
{
test: /.vue(?[^?]+)?$/,
loaders: ["vue-loader"]
}
]
},
vue: {
/**
* important! should use postTransformNode to add $processStyle for
* inline style normalization.
*/
compilerModules: [
{
postTransformNode: el => {
el.staticStyle = `$processStyle(${el.staticStyle})`
el.styleBinding = `$processStyle(${el.styleBinding})`
}
}
]
}
webpack 2.x
</>復制代碼
module: {
rules: [
{
test: /.vue$/,
loader: "vue-loader",
options: {
compilerModules: [
{
postTransformNode: el => {
el.staticStyle = `$processStyle(${el.staticStyle})`
el.styleBinding = `$processStyle(${el.styleBinding})`
}
}
]
}
}
]
}
最佳的實踐是推薦你使用目前為止我們內部評價最高的一份腳手架工程(支持三端一致,意味著處理了降級。):dingtalk-templates/webpack,你可以直接下載它,自行修改package.json文件中的{{}} 配置,或者安裝 open-dingtalk/weex-dingtalk-cli 這個命令行工具來玩轉腳手架,這個命令行工具就像你使用vue-cli一樣的簡單:
</>復制代碼
$ npm install -g weex-dingtalk-cli
樣式-style
</>復制代碼
weex支持的樣式屬于css子集
必須寫完整,如background:#000需要寫成background-color:#000
樣式不允許提取文件,必須寫在Vue的單組件中
原則上不推薦使用預處理器,因為無法預期轉譯出來的樣式符合weex的css子集
布局只能使用Flexbox
如果要顯示文本必須使用text組件,并且你想改變字體大小必須寫在text組件上
只支持class,不允許繼承
單位只支持px
不支持背景圖片
基于750px進行縮放,會有浮點級別的誤差
樣式需要聲明 scoped 屬性
Android上處理圓角,必須在外層div中設置border-radius
如果你想動態的替換class,只能使用數組表達式,
如果你想使用預處理器(只是不推薦),可以如下配置:
</>復制代碼
{
test: /.vue$/,
loader: "vue-loader",
options: {
loaders: {
scss: "vue-style-loader!css-loader!sass-loader"
}
}
}
</>復制代碼
如果你想使用更精準的適配(無法忍受浮點級別的誤差),可以獲取scale,deviceWidth自行進行適配,推薦在loader階段去處理(自行開發轉換工具)。
JavaScript與內存管理-JavaScript and memory manage</>復制代碼
由于JS運行在JavaScriptCore/V8中,此與Web有較大差異。
如下:
jquery,axios 之類的原來Web開發領域的庫都不可以使用
不支持DOM操作
雖然提供了Native DOM可以操作界面的渲染,原則上不推薦使用,方法與DOM操作類似
既然不支持DOM操作,更改界面的方式應該使用數據驅動
僅支持部分事件
weex SDK >= 0.10.0 的才支持事件冒泡
沒有window,document,location,history等對象
runtime是一個“全局環境”,不允許往全局環境中掛載對象,因為無法釋放且所有weex頁面共享
只有scroller和list組件可以滾動
不允許在Vue中操作style,遍歷是很耗性能的
Vue中的v-show等原來操作Dom的指令或Api都不可以使用
vue-router 只允許使用 abstract 模式
vuex必須在初始化之前使用Vue.use注入
native端只能使用網絡圖片,解決的方式是在最后上線時統一替換成CDN
熱更新以及增量更新的方式都可以參考React Native目前成熟的方案
iOS由于使用了同一套URL System,UIWebView的cookie是會共享到weex中的,同理weex中的cookie也是會共享的,只有WKWebView不會。原則上,你不應該使用cookie來處理用戶體系的問題
</>復制代碼
weex native 與 weex web 之間的差異較大,那么怎么辦?
我們提供了一套抹平一些常見差異的庫,你也可以在weex環境中使用,https://github.com/open-dingtalk/weex-dingtalk-journey。
在說內存(memory)之前,大家先來看一副圖,weex的內存分布:
正常情況下,Native memory 業務開發人員是無法處理的,而運行在js core 中的內存,我們知道如果不斷開引用,js是無法回收釋放內存的。
不允許往 runtime 里去掛載對象
業務代碼中的一些引用在beforeDestroy 中斷開設置為null
學會使用工具分析內存泄漏的問題,https://webkit.org/downloads/
不要隨意的使用函數遞歸,縮短對象方法的執行路徑(傳統JS領域的內存管理最佳實踐也適用一部分)
由于界面的渲染需要依賴createInstance(id, code, config, data),sendTasks(id, tasks),receiveTasks(id, tasks)發送指令的方式進行通信,你應該減少通信的次數,在更新界面時,合并不必要的通信指令的發送。
如果你使用vue-router的方式,盡量減少組件之間的共享。
轉場方式-navigator由于weex的特殊性,它的轉場方式有幾種構成。
weex to weex,如果你需要支持釘釘js-api,那么你應該使用openLink。(如果是你自己實現,使用weex自帶的navigator模塊)
weex to h5 依然使用openLink,(如果是你自己實現,那么可以通過module的方式來打開一個WebViewController| UIWebView or WKWebView)
native to weex 直接alloc weex 容器的Controller傳入Url即可
如果你使用vue-router,那么配置好你的路由path,使用push,go方法即可,唯一可惜的是使用vue-router的方式較為生硬。
頁面級別的數據傳輸-Page level data transfer</>復制代碼
頁面級別的數據傳輸基本很少會發生,釘釘的開發者推薦統一使用domainStorage方案。
weex to weex 通過URL傳參數(攜帶的數據量有限),通過weex storage module
weex to h5,h5 to weex 通過URL傳參數
native to weex 通過alloc weex 容器中的option或者data傳入,前者可以在weex.config中獲取,后者可以在vm上下文中獲取
weex to native 定義一個跳轉native的module,使用native的屬性或者init時傳入
調試工具-Debug Kit usedweex的調試工具需要額外安裝weex-toolkit,weex-devtool,以及在你的Native工程中集成對應的WXDevtool(iOS)。
如果你運行weex debug遇到如下的錯誤:
</>復制代碼
Error: EACCES: permission denied, open "/Users/xxx/.xtoolkit/node_modules/weex-devtool/frontend/weex/weex-bundle.js"
at Error (native)
(非Windows用戶)使用sudo即可。
不集成 WXDevtool SDK
首先,你需要安裝Weex Playground,可自行在各大市場中下載安裝。
不需要指明文件路徑,在終端輸入:
</>復制代碼
$ weex debug
先使用 Weex Playground 掃碼(啟動成功后會彈出一個界面),然后將你的業務代碼貼到 這里,注意:
不允許出現import等導入模塊的語法
安裝了Weex Playground的設備和你的電腦必須在同一局域網內
最后用安裝了Weex Playground的設備掃碼(業務代碼貼過去那里的右側會出現的二維碼)。
集成 WXDevtool SDK
</>復制代碼
[WXDevTool setDebug:YES];
[WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.1.108:8088/debugProxy/native"];
ws:// xxx.xx..x 這個地址是在用weex debug 在終端里給你輸出出來的,如果setDebug為YES會開啟debugger模式,反之亦然。
注意setDebug設置為YES。
原生開發-Native請直接閱讀 技術 | Weex入坑之旅 ,這是用iOS視角寫的一篇文章,大概在半年之前。
寫在最后希望大家可以用一個開放的心態來看待weex,它的設計,實現有很多是值得學習的地方,比如多framework支持,共享runtime,module,component,handler等等,非常的自由領域,相當于它設計好了一個render engine,理論上你可以學習它的幾個關鍵接口,知道Native DOM指令后,也能開發出替代Vue的上層框架,不信?你看看Rax即明白了。
weex也有一些不足的地方,開發者數量少,社區活躍度不高,很多問題并不一定能被google搜錄到。文檔確實有一點不完善,native的實現也有一定的bug數量,你看react這么多年了,依然有bug,只要在逐步改進迭代修復,我覺得它就是非常棒的,萬事沒有十全十美,美中不足的一點瑕疵,說不定才是完美呢。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83796.html
摘要:問題,你可以在中文討論板塊提交問題,地址。文字展現必須使用標簽關于端的點透事件需要在上層視圖上加上,如果上層視圖有事件,多加一個中間層,把加在空事件視圖上關于事件注意僅支持和,暫不支持。事件會在頁面就要關閉時被觸發。 好吧,我知道你來看這個文章,一定是遇到坑了,所以,把這幾個放在最開始吧 現在,如果你的團隊的技術棧是react,請嘗試這個吧,跟react很像,如果你的團隊一直使用rea...
閱讀 2179·2021-11-24 09:39
閱讀 2795·2021-07-29 13:49
閱讀 2327·2019-08-29 14:15
閱讀 2240·2019-08-29 12:40
閱讀 3318·2019-08-26 13:42
閱讀 638·2019-08-26 12:13
閱讀 2073·2019-08-26 11:41
閱讀 3352·2019-08-23 18:32