官网
https://weex.apache.org/zh/guide/use-vue-in-weex.html#支持的功能
安装环境
nodejs
npm
weex-cli
创建空项目(weex中命名使用小写)
weex create xxxx
cd到项目目录通过下面指令添加iOS工程项目
weex platform add ios
在iOS项目中配合写入环境配置、各类代理、自定义功能模块、自定义控件等
在Vue中实现布局样式,一些网络和计算JS的代码
在weex项目目录下,运行一下指令,在dist目录中提取iOS相关的JS文件,注意子文件夹层级保留,放入到iOS中的bundlejs目录下
npm run build
运行xcode项目,从默认index.js目录开始启动(也可以自定义为其他的路径)
备注:weex版本提醒了0.18找不到的问题
修改为引用
pod 'WeexSDK', :git => 'https://github.com/bmfe/WeexiOSSDK.git', :tag => '0.19'
一个基于weex的封装
#Eros iOS 基础库
pod 'ErosPluginBaseLibrary'
webpack.common.conf.js 文件配置(搜索Vue文件添加到webpack打包目录中)
const path = require('path'); const fs = require('fs-extra'); const webpack = require('webpack'); const config = require('./config'); const helper = require('./helper'); const glob = require('glob'); const vueLoaderConfig = require('./vue-loader.conf'); const vueWebTemp = helper.rootNode(config.templateDir); const hasPluginInstalled = fs.existsSync(helper.rootNode(config.pluginFilePath)); const isWin = /^win/.test(process.platform); const webEntry = {}; const weexEntry = {}; // Wraping the entry file for web. const getEntryFileContent = (entryPath, vueFilePath) => { let relativeVuePath = path.relative(path.join(entryPath, '../'), vueFilePath); let relativeEntryPath = helper.root(config.entryFilePath); let relativePluginPath = helper.rootNode(config.pluginFilePath); let contents = ''; let entryContents = fs.readFileSync(relativeEntryPath).toString(); if (isWin) { relativeVuePath = relativeVuePath.replace(/\/g, '\\'); relativePluginPath = relativePluginPath.replace(/\/g, '\\'); } if (hasPluginInstalled) { contents += ` // If detact plugins/plugin.js is exist, import and the plugin.js `; contents += `import plugins from '${relativePluginPath}'; `; contents += `plugins.forEach(function (plugin) { weex.install(plugin) }); `; entryContents = entryContents.replace(/weex.init/, match => `${contents}${match}`); contents = '' } contents += ` const App = require('${relativeVuePath}'); `; contents += `new Vue(Vue.util.extend({el: '#root'}, App)); `; return entryContents + contents; } // Retrieve entry file mappings by function recursion const getEntryFile = (dir) => { dir = dir || '.'; const directory = helper.root(dir); fs.readdirSync(directory).forEach((file) => { const fullpath = path.join(directory, file); const stat = fs.statSync(fullpath); const extname = path.extname(fullpath); if (stat.isFile() && extname === '.vue') { const name = path.join(dir, path.basename(file, extname)); if (extname === '.vue') { const entryFile = path.join(vueWebTemp, dir, path.basename(file, extname) + '.js'); fs.outputFileSync(entryFile, getEntryFileContent(entryFile, fullpath)); webEntry[name] = entryFile; } weexEntry[name] = fullpath + '?entry=true'; } else if (stat.isDirectory() && file !== 'build' && file !== 'include') { const subdir = path.join(dir, file); getEntryFile(subdir); } }); } // The entry file for web needs to add some library. such as vue, weex-vue-render // 1. src/entry.js // import Vue from 'vue'; // import weex from 'weex-vue-render'; // weex.init(Vue); // 2. src/router/index.js // import Vue from 'vue' getEntryFile(); /** * Plugins for webpack configuration. */ const plugins = [ /** * Plugin: webpack.DefinePlugin * Description: The DefinePlugin allows you to create global constants which can be configured at compile time. * * See: https://webpack.js.org/plugins/define-plugin/ */ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': config.dev.env } }), /* * Plugin: BannerPlugin * Description: Adds a banner to the top of each generated chunk. * See: https://webpack.js.org/plugins/banner-plugin/ */ new webpack.BannerPlugin({ banner: '// { "framework": "Vue"} ', raw: true, exclude: 'Vue' }) ]; // Config for compile jsbundle for web. const webConfig = { entry: Object.assign(webEntry, { 'vendor': [path.resolve('node_modules/phantom-limb/index.js')] }), output: { path: helper.rootNode('./dist'), filename: '[name].web.js' }, /** * Options affecting the resolving of modules. * See http://webpack.github.io/docs/configuration.html#resolve */ resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': helper.resolve('src') } }, /* * Options affecting the resolving of modules. * * See: http://webpack.github.io/docs/configuration.html#module */ module: { // webpack 2.0 rules: [ { test: /.js$/, use: [{ loader: 'babel-loader' }], exclude: config.excludeModuleReg }, { test: /.vue(?[^?]+)?$/, use: [{ loader: 'vue-loader', options: Object.assign(vueLoaderConfig({useVue: true, usePostCSS: false}), { /** * important! should use postTransformNode to add $processStyle for * inline style prefixing. */ optimizeSSR: false, compilerModules: [{ postTransformNode: el => { el.staticStyle = `$processStyle(${el.staticStyle})` el.styleBinding = `$processStyle(${el.styleBinding})` } }] }) }], exclude: config.excludeModuleReg } ] }, /* * Add additional plugins to the compiler. * * See: http://webpack.github.io/docs/configuration.html#plugins */ plugins: plugins }; // Config for compile jsbundle for native. const weexConfig = { entry: weexEntry, output: { path: path.join(__dirname, '../dist'), filename: '[name].js' }, /** * Options affecting the resolving of modules. * See http://webpack.github.io/docs/configuration.html#resolve */ resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': helper.resolve('src') } }, /* * Options affecting the resolving of modules. * * See: http://webpack.github.io/docs/configuration.html#module */ module: { rules: [ { test: /.js$/, use: [{ loader: 'babel-loader' }], exclude: config.excludeModuleReg }, { test: /.vue(?[^?]+)?$/, use: [{ loader: 'weex-loader', options: vueLoaderConfig({useVue: false}) }], exclude: config.excludeModuleReg } ] }, /* * Add additional plugins to the compiler. * * See: http://webpack.github.io/docs/configuration.html#plugins */ plugins: plugins, /* * Include polyfills or mocks for various node stuff * Description: Node configuration * * See: https://webpack.github.io/docs/configuration.html#node */ node: config.nodeConfiguration }; module.exports = [webConfig, weexConfig];