前言

最近有一些人反饋說在面試過程中常常被問到weex相關的知識，也側面反映的weex的發展還是很可觀的，可是目前weex的開發者大多數是中小型公司或者個人，大公司屈指可數，揪其原因可能是基於weex的開發正確的姿勢大家並沒有找到，而且市面上的好多輪子還是.we字尾的，眾所周知，weex和vue一直在努力的進行生態互通，而且weex實現web標準化是早晚的問題，今天和大家分享一下weex基於vue2.0的開發框架模板~

工作原理

先簡單熟悉一下weex的工作原理，這裡引用一下weex官網上的一直圖片，詳細資訊見官網

開發環境搭建

weex 開發環境搭建

android 、iOS 開發環境

框架說明

基於vue2.0搭建

像前面說的那樣weex和vue一直在努力的進行生態互通，而且weex實現web標準化是早晚的問題，所以也建議開發者不要在用.we做字尾來開發了

native端多頁模式、web端採用單頁模式

• 單頁形態對於原生可能體驗不夠好，所以android與ios端採用多頁模式
• web端沿用spa模式標準

整合三端（android、ios、h5平臺）

關於android、ios、h5平臺的整合與打包問題，在專案中都以解決~

整合eslint程式碼檢查

程式碼檢查是必要的操作，為了能夠擁有vue開發的體驗，將eslint整合進來~

提供開源元件庫OSC

weex-frame提供了，開源元件庫OSC，降低開發者入門門檻~

注：

由於weexpack暫不支援vue問題，打包相關後續會整合進來~

框架介紹

package.json依賴

"dependencies": {
    "vue": "^2.1.8",
    "vue-router": "^2.1.1",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.0.1",
    "weex-vue-render": "^0.1.4"
  },
  "devDependencies": {
    "babel-core"
 
: "^6.20.0",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.1",
    "eslint": "^3.15.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-html": "^2.0.1",
    "eslint-plugin-promise": "^3.4.2",
    "eslint-plugin-standard": "^2.0.1",
    "postcss-cssnext": "^2.9.0",
    "serve": "^1.4.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^1.14.0",
    "weex-devtool": "^0.2.64",
    "weex-loader": "^0.4.1",
    "weex-vue-loader": "^0.2.5"
  }

打包配置

1、 遍歷.vue檔案字尾，生成相應的entry.js檔案

function getEntryFileData (entryPath, vueFilePath) {
  const relativePath = path.relative(path.join(entryPath, '../'), vueFilePath);
  return 'let App = require("${relativePath}")
          // 全域性註冊元件
          Vue.component('root', require("components/root"))
          App.el = '#root'
          new Vue(App)'
}

...

2、通過weex-loader打包生成native jsbundle
3、 通過weex-vue-loader打包生成web jsbundle

...

const webConfig = getBaseConfig()
webConfig.entry = {
  entry: path.resolve('./src/entry.js')
}
webConfig.output = {
  path: 'dist/web',
  filename: '[name].js'
}
webConfig.module.loaders[1].loaders.push('vue')

const weexConfig = getBaseConfig()
weexConfig.output.filename = 'weex/[name].js'
weexConfig.module.loaders[1].loaders.push('weex')

專案結構

weex-frame
├── android (android專案)
│       
├── ios （ios專案程式碼）
│
├── src （weex模組）
│      ├── api (api模組)
│      ├── components（元件模組） 
│      ├── constants（常量配置）   
│      ├── utils （工具模組）   
│      └── views（檢視模組）  
│
└── dist （build輸出模組）
       ├── weex (native使用jsbundle)
       └── web（web使用jsbundle） 

元件庫介紹

osc-navbar

三端導航條

osc-navpage

三端導航頁，適配iOS頂部20px問題

程式碼示例：

<osc-navpage
    :title="title"
    leftItemSrc="https://gitlab.com/toonteam/weex/raw/ce656f79084ed9db357f8abd76c6e6c82dc5a28d/src/views/person-info/imgs/back.png"
    rightItemSrc="http://gtms02.alicdn.com/tps/i2/TB1ED7iMpXXXXXEXXXXWA_BHXXX-48-48.png"
    @naviBarLeftItemClick="onBack"
    @naviBarRightItemClick="onReload">
  <web class='web' ref='webview' :src='url' @pagestart='start' @pagefinish='finish'></web>
</osc-navpage>

介面根view，適配iOS頂部20px問題

程式碼示例：

<osc-root>
  <text>OsMartian Root</text>
</osc-root>

osc-tabbar

底部tabbar

程式碼示例：

<osc-tabbar :tabItems="tabItems" @tabBarOnClick="tabBarOnClick"></osc-tabbar>

osc-tabitem

底部tabbaritem元素

專案啟動

1. git clone [email protected]:osmartian/weex-frame.git
2. cd weex-frame
3. npm install
4. 執行 ./start

android 啟動

1. 開啟andorid studio
2. File -> New -> Import Project -> weex-frame/android -> 啟動

或

npm run dev:android

iOS 啟動

1. cd ios
2. pod install (未安裝pod，請先安裝)
3. open WeexFrame.xcworkspace

h5 啟動方式

專案示例

h5 端示例

android 端示例

iOS 端示例

結語

能看的出來上方的三端示例表現還是很一致的，本篇博文也是想給大家提供一個輪子，也歡迎大家多多提意見，共同促進weex生態成熟~

框架專案地址：