前言
最近有一些人反饋說在面試過程中常常被問到weex相關的知識，也側面反映的weex的發展還是很可觀的，可是目前weex的開發者大多數是中小型公司或者個人，大公司屈指可數，揪其原因可能是基于weex的開發正確的姿勢大家并沒有找到，而且市面上的好多輪子還是.we后綴的，眾所周知，weex和vue一直在努力的進行生態互通，而且weex實現web標準化是早晚的問題，今天和大家分享一下weex基于vue2.0的開發框架模板~
工作原理
先簡單熟悉一下weex的工作原理，這里引用一下weex官網上的一直圖片，詳細信息見官網
開發環境搭建
weex 開發環境搭建
關于weex開發環境搭建問題見官方文檔
android 、iOS 開發環境
關于native開發環境搭建問題見官方文檔
框架說明
基于vue2.0搭建
像前面說的那樣weex和vue一直在努力的進行生態互通，而且weex實現web標準化是早晚的問題，所以也建議開發者不要在用.we做后綴來開發了
多頁模式（拋棄vue-router）
單頁形態對于原生可能體驗不夠好，目前在 native App 里單頁模式不太合適
集成三端（android、ios、h6平臺）
關于android、ios、h6平臺的集成與打包問題，在項目中都以解決~
集成eslint代碼檢查
代碼檢查是必要的操作，為了能夠擁有vue開發的體驗，將eslint集成進來~
注：
由于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 getEntryFileContent (entryPath, vueFilePath) {
const relativePath = path.relative(path.join(entryPath, '../'), vueFilePath);
return 'var App = require(\'' + relativePath + '\')\n'
+ 'App.el = \'#root\'\n'
+ 'new Vue(App)\n'
}
function walk (dir) {
dir = dir || '.'
let directory = path.join(__dirname, './src', dir)
let entryDirectory = path.join(__dirname, './src/entry');
fs.readdirSync(directory)
.forEach(file => {
let fullpath = path.join(directory, file)
let stat = fs.statSync(fullpath)
let extname = path.extname(fullpath)
if (stat.isFile() && extname === '.vue') {
let entryFile = path.join(entryDirectory, dir, path.basename(file, extname) + '.js')
fs.outputFileSync(entryFile, getEntryFileContent(entryFile, fullpath))
let name = path.join(dir, path.basename(file, extname))
entry[name] = entryFile + '?entry=true'
} else if (stat.isDirectory()) {
let subdir = path.join(dir, file)
walk(subdir)
}
})
}
walk()
2、通過weex-loader打包生成native jsbundle
3、 通過weex-vue-loader打包生成web jsbundle
function getBaseConfig () {
return {
entry: entry,
output: {
path: 'dist'
},
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, './node_modules')],
alias: {
'assets': path.resolve(__dirname, './src/assets/'),
'components': path.resolve(__dirname, './src/components/'),
'constants': path.resolve(__dirname, './src/constants/'),
'api': path.resolve(__dirname, './src/api/'),
'router': path.resolve(__dirname, './src/router/'),
'store': path.resolve(__dirname, './src/store/'),
'views': path.resolve(__dirname, './src/views/'),
'config': path.resolve(__dirname, './config'),
'utils': path.resolve(__dirname, './src/utils/')
}
},
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
exclude: /node_modules/
}
],
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.vue(\?[^?]+)?$/,
loaders: []
}
]
},
vue: {
postcss: [cssnext({
features: {
autoprefixer: false
}
})]
},
plugins: [bannerPlugin]
}
}
const webConfig = getBaseConfig()
webConfig.output.filename = 'web/[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）
項目啟動
android 啟動
iOS 啟動
h6 啟動方式
打開 http://localhost:12580/weex.html
項目示例
android 端示例
iOS 端示例
結語
能看的出來上方的三端示例表現還是很一致的，本篇博文也是想給大家提供一個輪子，也歡迎大家多多提意見，共同促進weex生態成熟~
框架項目地址：weex-frame_jb51.rar
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
