• 备注Weex开发


    官网

    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];
  • 相关阅读:
    scrapy Request方法
    from lxml import etree报错
    python文件管道 下载图集
    scrapy基本爬虫,采集多页
    python操作excel xlwt (转)
    matplotlib 设置标题 xy标题等
    matplotlib 饼状图
    acwing 600. 仰视奶牛
    LeetCode 684. 冗余连接
    LeetCode 200. 岛屿数量
  • 原文地址:https://www.cnblogs.com/yuxiaoyiyou/p/14094466.html
Copyright © 2020-2023  润新知