前言
最近有一些人反饋說在面試過程中常常被問到weex相關的知識，也側面反映的weex的發(fā)展還是很可觀的，可是目前weex的開發(fā)者大多數(shù)是中小型公司或者個人灌灾，大公司屈指可數(shù)卿嘲，揪其原因可能是基于weex的開發(fā)正確的姿勢大家并沒有找到玉凯，而且市面上的好多輪子還是.we后綴的，眾所周知，weex和vue一直在努力的進行生態(tài)互通喘先，而且weex實現(xiàn)web標準化是早晚的問題楷扬，今天和大家分享一下weex基于vue2.0的開發(fā)框架模板~
工作原理
先簡單熟悉一下weex的工作原理解幽，這里引用一下weex官網上的一直圖片，詳細信息見官網
開發(fā)環(huán)境搭建
weex 開發(fā)環(huán)境搭建
android 烘苹、iOS 開發(fā)環(huán)境
關于native開發(fā)環(huán)境搭建問題見官方文檔
框架說明
基于vue2.0搭建
像前面說的那樣weex和vue一直在努力的進行生態(tài)互通躲株，而且weex實現(xiàn)web標準化是早晚的問題，所以也建議開發(fā)者不要在用.we做后綴來開發(fā)了
native端多頁模式镣衡、web端采用單頁模式
- 單頁形態(tài)對于原生可能體驗不夠好霜定，所以android與ios端采用多頁模式
- web端沿用spa模式標準
集成三端（android、ios廊鸥、h5平臺）
關于android望浩、ios、h5平臺的集成與打包問題黍图，在項目中都以解決~
集成eslint代碼檢查
代碼檢查是必要的操作曾雕，為了能夠擁有vue開發(fā)的體驗奴烙，將eslint集成進來~
提供開源組件庫OSC
weex-frame提供了助被，開源組件庫OSC，降低開發(fā)者入門門檻~
注：
由于weexpack暫不支持vue問題切诀，打包相關后續(xù)會集成進來~
框架介紹
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>
osc-root詳細示例
界面根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元素
項目啟動
- git clone git@github.com:osmartian/weex-frame.git
- cd weex-frame
- npm install
- 執(zhí)行 ./start
android 啟動
- 打開andorid studio
- File -> New -> Import Project -> weex-frame/android -> 啟動
或
npm run dev:android
iOS 啟動
- cd ios
- pod install (未安裝pod褒墨，請先安裝)
- open WeexFrame.xcworkspace
h5 啟動方式
打開 http://localhost:12580/weex.html
項目示例
h5 端示例
android 端示例
iOS 端示例
結語
能看的出來上方的三端示例表現(xiàn)還是很一致的，本篇博文也是想給大家提供一個輪子擎宝，也歡迎大家多多提意見郁妈，共同促進weex生態(tài)成熟~
框架項目地址：
https://github.com/SyswinAE/weex-frame
本文已在版權印備案，如需轉載請訪問版權印绍申。53688340
