Weex多页面配置

Posted 2022-04-19 Jsen_Wang

前言
Weex是使用Vue和WebPack进行项目配置的。Weex创建的项目默认是只有一个入口的，也就是说，是单页面应用。对于移动开发来说，使用单页面（使用vue-router）是没有原生的页面跳转效果。在Weex的官方文档中，Weex提供了navigator内置模块来实现Web端前进、后退页面，以及ios/android的navigator导航效果。

Weex的多页面配置
我使用的是最近的weex创建的项目，下面是weex的项目结构。

我们打开weebpack.config.js。

// You can see all the config in `./configs`.
const  buildPlugins = require('./configs/plugin');
let webpackConfig;
module.exports = env =>
  switch (env.NODE_ENV)
    case 'prod':
    case 'production':
      webpackConfig = require('./configs/webpack.prod.conf');
      break;
    case 'test':
    case 'testing':
      webpackConfig = require('./configs/webpack.test.conf');
      break;
    case 'plugin':
      buildPlugins();
    case 'common':
      webpackConfig = require('./configs/webpack.common.conf');
      break;
    case 'release':
      webpackConfig = require('./configs/webpack.release.conf');
      break;
    case 'dev':
    case 'development':
    default:
      webpackConfig = require('./configs/webpack.dev.conf');
 
  return webpackConfig;

可以看到webpackConfig的配置根据特定环境放在不同的文件。

我们打开configs文件夹下的webpack.common.conf.js，这个文件是配置weex和web的入口。weex把移动端和web端的webpack入口和出口配置分为weex和web。

weexConfig的入口和出口配置（iOS/Android）
我们在configs/webpack.common.conf.js下找到weexEntry。

const weexEntry =
  'index': helper.root('entry.js'),
  'login': helper.root('login.js'),

这里我已经创建了src/login.js文件，这个文件和src/entry.js的内容是一样的，只是对应的vue不同。和entry.js一样都会在使用web/index.html作为页面渲染。下面是src/login.js。

/*global Vue*/
 
/* weex initialized here, please do not move this line */
const router = require('./router');
const App = require('@/login.vue');
/* eslint-disable no-new */
new Vue(Vue.util.extend(el: '#root', router, App));
router.push('/');

以上就是weexConfig的入口配置（iOS/Android的webpack入口配置）。weex已经帮我们配置好weexConfig的出口配置。

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
     
    ]
  ,
webConfig的入口和出口配置（web）
我们在configs/webpack.common.conf.js下找到webEntry。

// 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'
const webEntry = getEntryFile();
上面有一些注释，说明webConfig的入口文件需要导入Vue和weex-vue-render模块。我们找到getEntryFile()函数。

const getEntryFile = () =>
  const entryFile = path.join(vueWebTemp, config.entryFilePath)
  const routerFile = path.join(vueWebTemp, config.routerFilePath)
  fs.outputFileSync(entryFile, getEntryFileContent(helper.root(config.entryFilePath), routerFile));
  fs.outputFileSync(routerFile, getRouterFileContent(helper.root(config.routerFilePath)));
  const loginFilePath = 'login.js'
  const loginFile = path.join(vueWebTemp, loginFilePath)
  fs.outputFileSync(loginFile, getEntryFileContent(helper.root(loginFilePath), routerFile));
 
  return
    index: entryFile,
    login: loginFile,
 

这个函数的entryFile使用的是path/vueWebTemp/config.entryFilePath的文件，routerFile使用的是path/vueWebTemp/config.routerFilePath的文件。

我们找到vueWebTemp和config.entryFilePath。

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);
config是当前目录下的config.js文件。下面是config.js的部分代码。

const path = require('path');
const ROOT = path.resolve(__dirname, '..');
const ip = require('ip').address();
const config =
  root: ROOT,
  // webpack-dev-server
  pluginConfigPath: 'plugins/plugins.json',
  pluginFilePath: 'plugins/plugins.js',
  // router
  routerFilePath: 'router.js',
  // common
  templateDir: '.temp',
  entryFilePath: 'entry.js',
  // Module exclude from compile process
  excludeModuleReg: /node_modules(?!(\\/|\\\\).*(weex).*)/,
我们看到templateDir是项目中的.temp文件，entryFilePath是entry.js，routerFilePath是router.js。

在getEntryFile()的entryFile就是项目下的.temp/entry.js。routerFile就是项目下的.temp/router.js。

我们按照上面的例子，创建login.js的webConfig入口文件。下面是login.js代码，它和entry.js的代码是一样的，只是对于的vue不同。

import Vue from 'vue'
import weex from 'weex-vue-render'
/*global Vue*/
 
weex.init(Vue)
/* weex initialized here, please do not move this line */
const router = require('./router');
const App = require('@/login.vue');
/* eslint-disable no-new */
new Vue(Vue.util.extend(el: '#root', router, App));
router.push('/');
我们看到之前注释说明需要导入的vue和weex-vue-render模块。

按照getEntryFile()函数的指示，我们需要把入口文件和router文件同步到src目录的入口文件和router文件内容。（helper的root是src文件夹）。以下是helper.js的代码内容。

// Helper functions
const path = require('path');
const ROOT = path.resolve(__dirname, '..');
 
const root = (args) =>
  return path.join(ROOT, 'src', args);

const rootNode = (args) =>
  return path.join(ROOT, args);

 
const resolve = (dir) =>
  return path.join(__dirname, '..', dir)

 
module.exports =
  root,
  rootNode,
  resolve

由于weex之前已经帮我们在src创建了entry.js和router.js，我们之前在配置weexConfig时已经创建了login.js。所以这段代码是把.temp文件和src的文件内容同步。最后我们在getEntryFile()返回我们的loginFile入口文件。

以上就是webConfig的入口配置，weex已经帮我们配置好webConfig的出口配置。

// 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'
  ,
编译src文件到dist文件
我们需要编译src文件到dist文件才能生效。在命令行输入weex compile src dist编译src文件夹到dist文件夹。

进行navigator跳转
由于web和iOS/Android是分开配置的，所以它们的URL分别对应web的http跳转和iOS/Android生成的本地文件的js跳转。

methods:
    login ()
      navigator.push(url:this.getJumpBaseUrl('login'))
    ,
    getJumpBaseUrl(toUrl)  
        var bundleUrl = weex.config.bundleUrl;  
        bundleUrl = new String(bundleUrl);  
        var nativeBase;  
        var native;  
        if (WXEnvironment.platform === 'Android')  
            nativeBase = 'file://assets/dist/';  
            native = nativeBase + toUrl + ".js";  
        else if (WXEnvironment.platform === 'iOS')  
            nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);  
            native = nativeBase + toUrl + ".js";  
        else  
            var host = 'localhost:8081';  
            var matches = /\\/\\/([^\\/]+?)\\//.exec(bundleUrl);  
            if (matches && matches.length >= 2)  
                host = matches[1];  
             
  
            //此处需注意一下,tabbar 用的直接是jsbundle 的路径,但是navigator是直接跳转到新页面上的.  
            if (typeof window === 'object')  
                nativeBase = 'http://' + host + '/';  
            else  
                nativeBase = 'http://' + host + '/';  
             
  
            native = nativeBase + toUrl + ".html";  
         
        return native;  
     
 

--------------------- 
作者：xuemiyang 
来源：CSDN 
原文：https://blog.csdn.net/u012182853/article/details/80559363