weex初探

前言

RN weex hippy taro

1.Weex與RN 比較

類型	React Native	Weex
思想	learn once, write anywhere	write once, run anywhere
擴展	不一樣平臺可自由擴展	爲了保證各平臺的一致性，一次擴展得在各個平臺都實現
組件豐富程度	除了自帶的，還有js.coach上社區貢獻的，仍是比較豐富的	基本只有自帶的10餘種
調式	有專門的調試工具，chrome調試，較爲完善	暫時log調試
性能	較好	較弱
上手難度	稍高	容易
核心理念	React	Vue
框架程度	較重	較輕
特色	適合開發總體App	適合單頁面
社區	豐富，Facebook維護	略殘念，目前託管apache
支持	Android、IOS	Android、IOS、Web
適應性	原生開學習成本低	Web開發學習成本低
JS引擎	JSCore	V8

2.weex性能

3.參考

1. IMWeb Conf2018 前端大會: Weex內核的原理和演進方向:
   https://www.codercto.com/a/32...
   http://www.itdks.com/Course/d...
2. Weex 在餓了麼前端的實踐
   https://www.jianshu.com/p/e14...

1、問題

1.安裝

如下針對於iOS，編譯和運行時報錯處理：

1. 添加特定平臺的項目
   weex platform add ios
2. 安裝cocopods
   $ sudo gem install cocoapods
3. 終端cd到ios項目，運行pod install 或者pod update
4. 安裝好後在執行
   $ weex run ios

2.編譯失敗

錯誤：

./src/index.vue
Module build failed: Error: 

Vue packages version mismatch:

- vue@2.5.21 (/Users/admin/.wx/modules/node_modules/_vue@2.5.21@vue/dist/vue.runtime.common.js)
- vue-template-compiler@2.6.10 (/Users/admin/.wx/modules/node_modules/_vue-template-compiler@2.6.10@vue-template-compiler/package.json)

解決：

$ weex repair @weex-cli/core@latest
$ weex update @weex-cli/doctor
$ weex doctor

3.調試

運行 weex debug 命令啓動調試控制檯,必須使用chrome 瀏覽器調試

4.編譯報錯

運行npm run dev，出現eslint報錯。
解決：在config.js文件中，useEslint: false,

5.多頁面配置

https://blog.csdn.net/u012182...

Weex默認是單頁面效果，首先，Weex真正運行的是，經過entry.js做爲入口文件文件，經過webpack，將.vue文件打包成index.js進行使用。多頁面的重點，就是將獨立頁面的.vue文件，生成多個js文件。
weexConfig的入口和出口配置（iOS/Android）:

1. 參考entry.js文件，建立一個listeEntry.js，做爲liste.vue的入口，用於webpack生成list.js頁面。

   const { router } = require('./router')
      const List = require('@/list.vue')
      
      /* eslint-disable no-new */
      new Vue(Vue.util.extend({el: '#root', router}, List))
      
      router.push('/')

2. 修改webpack.common.conf.js文件

   const weexEntry = {

   'index': helper.root('entry.js'),
    'list': helper.root('listEntry.js'),
   }

webConfig的入口和出口配置（web）

1.在configs/webpack.common.conf.js下修改getEntryFile()函數

const getEntryFile = () => {
    
      const entryFile = path.join(vueWebTemp, config.entryFilePath)
      const routerFile = path.join(vueWebTemp, config.routerFilePath)
      fs.outputFileSync(entryFile, getEntryFileContent(helper.root(config.entryFilePath), routerFile));
      fs.outputFileSync(routerFile, getRouterFileContent(helper.root(config.routerFilePath)));
    
      const listFilePath = 'listEntry.js'
      const listFile = path.join(vueWebTemp, listFilePath)
      fs.outputFileSync(listFile, getEntryFileContent(helper.root(listFilePath), routerFile));
     
      return {
        index: entryFile,
        list: listFile,
      }
    }

2.在.temp文件下建立listEntry.js的webConfig入口文件。

const { router } = require('./router')
        const List = require('@/list.vue')
        
        /* eslint-disable no-new */
        new Vue(Vue.util.extend({el: '#root', router}, List))
        
        router.push('/')

5.頁面

Weex僅有Flexbox佈局，text沒法嵌套，難以實現長文當中樣式的混合。
沒有Cookies.只能用storage來完成對應信息的存儲。

2、weex與原生交互

擴展：https://weex.apache.org/zh/gu...

const vvModule = weex.requireModule('VVWeexModule');    

vvModule.setGlobalCallback( res => {
    this.info = res;
    console.log(JSON.stringify(res));
        
})；
vvModule.logInNative('aaa');

3、經常使用命令

Weex Toolkit：https://weex.apache.org/zh/to...

1. npm run server:web 端的預覽
2. npm run dev :實時的壓縮編譯
3. $ weex compile [資源文件] [產物地址] <options> :編譯
4. $ weex preview [file | folder] <options> :編譯及預覽
5. $ weex debug <file|folder> :調試

4、參考

1. weex開發小記：https://blog.csdn.net/mht1829...
2. https://www.jianshu.com/p/ae1...
3. 使用 Devtools調試 Weex頁面 https://www.cnblogs.com/hehey...