├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── logo.png
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── screenshots
    ├── back.gif
    └── native.gif
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── common
    │   ├── app.js
    │   └── optimizeApp.js
    ├── components
    │   ├── HelloWorld.vue
    │   └── Sec.vue
    ├── main.js
    └── router
    │   └── index.js
└── static
    └── .gitkeep


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 前言
 2 | 
 3 | > vue和原生（ios和android）的交互封装
 4 | 
 5 | > 主要在项目中使用到vue和原生的交互，原生交互的方法必须挂载到window上，引入vue的作用域，挂载到vue的方法原生无法访问到，所以写一个app.js来完成原生和js的交互
 6 | 
 7 | > 目前主要使用的是监听安卓中的返回键事件
 8 | 
 9 | > 监听html中和native的webview的事件交互
10 |  
11 | 
12 | ## 说明
13 | 
14 | >  喜欢的别忘记了可以star一下的噢！  
15 | 
16 | >  开发环境 win10  Chrome 58.0.3029.110  nodejs 6.2.0 
17 | 
18 | ## 技术栈
19 | 
20 | > vue + vue-router + webpack
21 | 
22 | ## 效果图
23 | ## 原生调用组件中的事件演示
24 | <img src="https://github.com/lhb11/native-js-interactive-encapsulation/blob/master/screenshots/native.gif"/>
25 | 
26 | ## 回掉原生事件演示
27 | <img src="https://github.com/lhb11/native-js-interactive-encapsulation/blob/master/screenshots/back.gif"/>
28 | 
29 | 
30 | 
31 | ## 项目运行
32 | 
33 | ``` bash
34 | # install dependencies
35 | npm install
36 | 
37 | # serve with hot reload at localhost:8080
38 | npm run dev
39 | 
40 | # build for production with minification
41 | npm run build
42 | 
43 | # build for production and view the bundle analyzer report
44 | npm run build --report
45 | ```


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | require('./check-versions')()
 3 | 
 4 | process.env.NODE_ENV = 'production'
 5 | 
 6 | const ora = require('ora')
 7 | const rm = require('rimraf')
 8 | const path = require('path')
 9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 | 
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 | 
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 |   if (err) throw err
19 |   webpack(webpackConfig, (err, stats) => {
20 |     spinner.stop()
21 |     if (err) throw err
22 |     process.stdout.write(stats.toString({
23 |       colors: true,
24 |       modules: false,
25 |       children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 |       chunks: false,
27 |       chunkModules: false
28 |     }) + '\n\n')
29 | 
30 |     if (stats.hasErrors()) {
31 |       console.log(chalk.red('  Build failed with errors.\n'))
32 |       process.exit(1)
33 |     }
34 | 
35 |     console.log(chalk.cyan('  Build complete.\n'))
36 |     console.log(chalk.yellow(
37 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
38 |       '  Opening index.html over file:// won\'t work.\n'
39 |     ))
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const chalk = require('chalk')
 3 | const semver = require('semver')
 4 | const packageConfig = require('../package.json')
 5 | const shell = require('shelljs')
 6 | 
 7 | function exec (cmd) {
 8 |   return require('child_process').execSync(cmd).toString().trim()
 9 | }
10 | 
11 | const versionRequirements = [
12 |   {
13 |     name: 'node',
14 |     currentVersion: semver.clean(process.version),
15 |     versionRequirement: packageConfig.engines.node
16 |   }
17 | ]
18 | 
19 | if (shell.which('npm')) {
20 |   versionRequirements.push({
21 |     name: 'npm',
22 |     currentVersion: exec('npm --version'),
23 |     versionRequirement: packageConfig.engines.npm
24 |   })
25 | }
26 | 
27 | module.exports = function () {
28 |   const warnings = []
29 | 
30 |   for (let i = 0; i < versionRequirements.length; i++) {
31 |     const mod = versionRequirements[i]
32 | 
33 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 |       warnings.push(mod.name + ': ' +
35 |         chalk.red(mod.currentVersion) + ' should be ' +
36 |         chalk.green(mod.versionRequirement)
37 |       )
38 |     }
39 |   }
40 | 
41 |   if (warnings.length) {
42 |     console.log('')
43 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 |     console.log()
45 | 
46 |     for (let i = 0; i < warnings.length; i++) {
47 |       const warning = warnings[i]
48 |       console.log('  ' + warning)
49 |     }
50 | 
51 |     console.log()
52 |     process.exit(1)
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lhb11/native-js-interactive-encapsulation/d266d4043c639c5da733191c3ecb2971d5aa60f8/build/logo.png


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const config = require('../config')
  4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 | const packageConfig = require('../package.json')
  6 | 
  7 | exports.assetsPath = function (_path) {
  8 |   const assetsSubDirectory = process.env.NODE_ENV === 'production'
  9 |     ? config.build.assetsSubDirectory
 10 |     : config.dev.assetsSubDirectory
 11 | 
 12 |   return path.posix.join(assetsSubDirectory, _path)
 13 | }
 14 | 
 15 | exports.cssLoaders = function (options) {
 16 |   options = options || {}
 17 | 
 18 |   const cssLoader = {
 19 |     loader: 'css-loader',
 20 |     options: {
 21 |       sourceMap: options.sourceMap
 22 |     }
 23 |   }
 24 | 
 25 |   const postcssLoader = {
 26 |     loader: 'postcss-loader',
 27 |     options: {
 28 |       sourceMap: options.sourceMap
 29 |     }
 30 |   }
 31 | 
 32 |   // generate loader string to be used with extract text plugin
 33 |   function generateLoaders (loader, loaderOptions) {
 34 |     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 35 | 
 36 |     if (loader) {
 37 |       loaders.push({
 38 |         loader: loader + '-loader',
 39 |         options: Object.assign({}, loaderOptions, {
 40 |           sourceMap: options.sourceMap
 41 |         })
 42 |       })
 43 |     }
 44 | 
 45 |     // Extract CSS when that option is specified
 46 |     // (which is the case during production build)
 47 |     if (options.extract) {
 48 |       return ExtractTextPlugin.extract({
 49 |         use: loaders,
 50 |         fallback: 'vue-style-loader'
 51 |       })
 52 |     } else {
 53 |       return ['vue-style-loader'].concat(loaders)
 54 |     }
 55 |   }
 56 | 
 57 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 58 |   return {
 59 |     css: generateLoaders(),
 60 |     postcss: generateLoaders(),
 61 |     less: generateLoaders('less'),
 62 |     sass: generateLoaders('sass', { indentedSyntax: true }),
 63 |     scss: generateLoaders('sass'),
 64 |     stylus: generateLoaders('stylus'),
 65 |     styl: generateLoaders('stylus')
 66 |   }
 67 | }
 68 | 
 69 | // Generate loaders for standalone style files (outside of .vue)
 70 | exports.styleLoaders = function (options) {
 71 |   const output = []
 72 |   const loaders = exports.cssLoaders(options)
 73 | 
 74 |   for (const extension in loaders) {
 75 |     const loader = loaders[extension]
 76 |     output.push({
 77 |       test: new RegExp('\\.' + extension + '$'),
 78 |       use: loader
 79 |     })
 80 |   }
 81 | 
 82 |   return output
 83 | }
 84 | 
 85 | exports.createNotifierCallback = () => {
 86 |   const notifier = require('node-notifier')
 87 | 
 88 |   return (severity, errors) => {
 89 |     if (severity !== 'error') return
 90 | 
 91 |     const error = errors[0]
 92 |     const filename = error.file && error.file.split('!').pop()
 93 | 
 94 |     notifier.notify({
 95 |       title: packageConfig.name,
 96 |       message: severity + ': ' + error.name,
 97 |       subtitle: filename || '',
 98 |       icon: path.join(__dirname, 'logo.png')
 99 |     })
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const config = require('../config')
 4 | const isProduction = process.env.NODE_ENV === 'production'
 5 | const sourceMapEnabled = isProduction
 6 |   ? config.build.productionSourceMap
 7 |   : config.dev.cssSourceMap
 8 | 
 9 | module.exports = {
10 |   loaders: utils.cssLoaders({
11 |     sourceMap: sourceMapEnabled,
12 |     extract: isProduction
13 |   }),
14 |   cssSourceMap: sourceMapEnabled,
15 |   cacheBusting: config.dev.cacheBusting,
16 |   transformToRequire: {
17 |     video: ['src', 'poster'],
18 |     source: 'src',
19 |     img: 'src',
20 |     image: 'xlink:href'
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const utils = require('./utils')
 4 | const config = require('../config')
 5 | const vueLoaderConfig = require('./vue-loader.conf')
 6 | 
 7 | function resolve (dir) {
 8 |   return path.join(__dirname, '..', dir)
 9 | }
10 | 
11 | 
12 | 
13 | module.exports = {
14 |   context: path.resolve(__dirname, '../'),
15 |   entry: {
16 |     app: './src/main.js'
17 |   },
18 |   output: {
19 |     path: config.build.assetsRoot,
20 |     filename: '[name].js',
21 |     publicPath: process.env.NODE_ENV === 'production'
22 |       ? config.build.assetsPublicPath
23 |       : config.dev.assetsPublicPath
24 |   },
25 |   resolve: {
26 |     extensions: ['.js', '.vue', '.json'],
27 |     alias: {
28 |       'vue$': 'vue/dist/vue.esm.js',
29 |       '@': resolve('src'),
30 |     }
31 |   },
32 |   module: {
33 |     rules: [
34 |       {
35 |         test: /\.vue$/,
36 |         loader: 'vue-loader',
37 |         options: vueLoaderConfig
38 |       },
39 |       {
40 |         test: /\.js$/,
41 |         loader: 'babel-loader',
42 |         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
43 |       },
44 |       {
45 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
46 |         loader: 'url-loader',
47 |         options: {
48 |           limit: 10000,
49 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
50 |         }
51 |       },
52 |       {
53 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
54 |         loader: 'url-loader',
55 |         options: {
56 |           limit: 10000,
57 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
58 |         }
59 |       },
60 |       {
61 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
62 |         loader: 'url-loader',
63 |         options: {
64 |           limit: 10000,
65 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
66 |         }
67 |       }
68 |     ]
69 |   },
70 |   node: {
71 |     // prevent webpack from injecting useless setImmediate polyfill because Vue
72 |     // source contains it (although only uses it if it's native).
73 |     setImmediate: false,
74 |     // prevent webpack from injecting mocks to Node native modules
75 |     // that does not make sense for the client
76 |     dgram: 'empty',
77 |     fs: 'empty',
78 |     net: 'empty',
79 |     tls: 'empty',
80 |     child_process: 'empty'
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const webpack = require('webpack')
 4 | const config = require('../config')
 5 | const merge = require('webpack-merge')
 6 | const path = require('path')
 7 | const baseWebpackConfig = require('./webpack.base.conf')
 8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 | 
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 | 
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 |   module: {
18 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 |   },
20 |   // cheap-module-eval-source-map is faster for development
21 |   devtool: config.dev.devtool,
22 | 
23 |   // these devServer options should be customized in /config/index.js
24 |   devServer: {
25 |     clientLogLevel: 'warning',
26 |     historyApiFallback: {
27 |       rewrites: [
28 |         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 |       ],
30 |     },
31 |     hot: true,
32 |     contentBase: false, // since we use CopyWebpackPlugin.
33 |     compress: true,
34 |     host: HOST || config.dev.host,
35 |     port: PORT || config.dev.port,
36 |     open: config.dev.autoOpenBrowser,
37 |     overlay: config.dev.errorOverlay
38 |       ? { warnings: false, errors: true }
39 |       : false,
40 |     publicPath: config.dev.assetsPublicPath,
41 |     proxy: config.dev.proxyTable,
42 |     quiet: true, // necessary for FriendlyErrorsPlugin
43 |     watchOptions: {
44 |       poll: config.dev.poll,
45 |     }
46 |   },
47 |   plugins: [
48 |     new webpack.DefinePlugin({
49 |       'process.env': require('../config/dev.env')
50 |     }),
51 |     new webpack.HotModuleReplacementPlugin(),
52 |     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 |     new webpack.NoEmitOnErrorsPlugin(),
54 |     // https://github.com/ampedandwired/html-webpack-plugin
55 |     new HtmlWebpackPlugin({
56 |       filename: 'index.html',
57 |       template: 'index.html',
58 |       inject: true
59 |     }),
60 |     // copy custom static assets
61 |     new CopyWebpackPlugin([
62 |       {
63 |         from: path.resolve(__dirname, '../static'),
64 |         to: config.dev.assetsSubDirectory,
65 |         ignore: ['.*']
66 |       }
67 |     ])
68 |   ]
69 | })
70 | 
71 | module.exports = new Promise((resolve, reject) => {
72 |   portfinder.basePort = process.env.PORT || config.dev.port
73 |   portfinder.getPort((err, port) => {
74 |     if (err) {
75 |       reject(err)
76 |     } else {
77 |       // publish the new Port, necessary for e2e tests
78 |       process.env.PORT = port
79 |       // add port to devServer config
80 |       devWebpackConfig.devServer.port = port
81 | 
82 |       // Add FriendlyErrorsPlugin
83 |       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 |         compilationSuccessInfo: {
85 |           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 |         },
87 |         onErrors: config.dev.notifyOnErrors
88 |         ? utils.createNotifierCallback()
89 |         : undefined
90 |       }))
91 | 
92 |       resolve(devWebpackConfig)
93 |     }
94 |   })
95 | })
96 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 13 | 
 14 | const env = require('../config/prod.env')
 15 | 
 16 | const webpackConfig = merge(baseWebpackConfig, {
 17 |   module: {
 18 |     rules: utils.styleLoaders({
 19 |       sourceMap: config.build.productionSourceMap,
 20 |       extract: true,
 21 |       usePostCSS: true
 22 |     })
 23 |   },
 24 |   devtool: config.build.productionSourceMap ? config.build.devtool : false,
 25 |   output: {
 26 |     path: config.build.assetsRoot,
 27 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 28 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 29 |   },
 30 |   plugins: [
 31 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 32 |     new webpack.DefinePlugin({
 33 |       'process.env': env
 34 |     }),
 35 |     new UglifyJsPlugin({
 36 |       uglifyOptions: {
 37 |         compress: {
 38 |           warnings: false
 39 |         }
 40 |       },
 41 |       sourceMap: config.build.productionSourceMap,
 42 |       parallel: true
 43 |     }),
 44 |     // extract css into its own file
 45 |     new ExtractTextPlugin({
 46 |       filename: utils.assetsPath('css/[name].[contenthash].css'),
 47 |       // Setting the following option to `false` will not extract CSS from codesplit chunks.
 48 |       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
 49 |       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
 50 |       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
 51 |       allChunks: true,
 52 |     }),
 53 |     // Compress extracted CSS. We are using this plugin so that possible
 54 |     // duplicated CSS from different components can be deduped.
 55 |     new OptimizeCSSPlugin({
 56 |       cssProcessorOptions: config.build.productionSourceMap
 57 |         ? { safe: true, map: { inline: false } }
 58 |         : { safe: true }
 59 |     }),
 60 |     // generate dist index.html with correct asset hash for caching.
 61 |     // you can customize output by editing /index.html
 62 |     // see https://github.com/ampedandwired/html-webpack-plugin
 63 |     new HtmlWebpackPlugin({
 64 |       filename: config.build.index,
 65 |       template: 'index.html',
 66 |       inject: true,
 67 |       minify: {
 68 |         removeComments: true,
 69 |         collapseWhitespace: true,
 70 |         removeAttributeQuotes: true
 71 |         // more options:
 72 |         // https://github.com/kangax/html-minifier#options-quick-reference
 73 |       },
 74 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 75 |       chunksSortMode: 'dependency'
 76 |     }),
 77 |     // keep module.id stable when vendor modules does not change
 78 |     new webpack.HashedModuleIdsPlugin(),
 79 |     // enable scope hoisting
 80 |     new webpack.optimize.ModuleConcatenationPlugin(),
 81 |     // split vendor js into its own file
 82 |     new webpack.optimize.CommonsChunkPlugin({
 83 |       name: 'vendor',
 84 |       minChunks (module) {
 85 |         // any required modules inside node_modules are extracted to vendor
 86 |         return (
 87 |           module.resource &&
 88 |           /\.js$/.test(module.resource) &&
 89 |           module.resource.indexOf(
 90 |             path.join(__dirname, '../node_modules')
 91 |           ) === 0
 92 |         )
 93 |       }
 94 |     }),
 95 |     // extract webpack runtime and module manifest to its own file in order to
 96 |     // prevent vendor hash from being updated whenever app bundle is updated
 97 |     new webpack.optimize.CommonsChunkPlugin({
 98 |       name: 'manifest',
 99 |       minChunks: Infinity
100 |     }),
101 |     // This instance extracts shared chunks from code splitted chunks and bundles them
102 |     // in a separate chunk, similar to the vendor chunk
103 |     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
104 |     new webpack.optimize.CommonsChunkPlugin({
105 |       name: 'app',
106 |       async: 'vendor-async',
107 |       children: true,
108 |       minChunks: 3
109 |     }),
110 | 
111 |     // copy custom static assets
112 |     new CopyWebpackPlugin([
113 |       {
114 |         from: path.resolve(__dirname, '../static'),
115 |         to: config.build.assetsSubDirectory,
116 |         ignore: ['.*']
117 |       }
118 |     ])
119 |   ]
120 | })
121 | 
122 | if (config.build.productionGzip) {
123 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
124 | 
125 |   webpackConfig.plugins.push(
126 |     new CompressionWebpackPlugin({
127 |       asset: '[path].gz[query]',
128 |       algorithm: 'gzip',
129 |       test: new RegExp(
130 |         '\\.(' +
131 |         config.build.productionGzipExtensions.join('|') +
132 |         ')$'
133 |       ),
134 |       threshold: 10240,
135 |       minRatio: 0.8
136 |     })
137 |   )
138 | }
139 | 
140 | if (config.build.bundleAnalyzerReport) {
141 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
142 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
143 | }
144 | 
145 | module.exports = webpackConfig
146 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>native-js-interactive-encapsulation</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "native-js-interactive-encapsulation",
 3 |   "version": "1.0.0",
 4 |   "description": "vue和原生（ios和android）的交互封装",
 5 |   "author": "lhb",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "vconsole": "^3.1.0",
14 |     "vue": "^2.5.2",
15 |     "vue-router": "^3.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^7.1.2",
19 |     "babel-core": "^6.22.1",
20 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
21 |     "babel-loader": "^7.1.1",
22 |     "babel-plugin-syntax-jsx": "^6.18.0",
23 |     "babel-plugin-transform-runtime": "^6.22.0",
24 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
25 |     "babel-preset-env": "^1.3.2",
26 |     "babel-preset-stage-2": "^6.22.0",
27 |     "chalk": "^2.0.1",
28 |     "copy-webpack-plugin": "^4.0.1",
29 |     "css-loader": "^0.28.0",
30 |     "extract-text-webpack-plugin": "^3.0.0",
31 |     "file-loader": "^1.1.4",
32 |     "friendly-errors-webpack-plugin": "^1.6.1",
33 |     "html-webpack-plugin": "^2.30.1",
34 |     "node-notifier": "^5.1.2",
35 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
36 |     "ora": "^1.2.0",
37 |     "portfinder": "^1.0.13",
38 |     "postcss-import": "^11.0.0",
39 |     "postcss-loader": "^2.0.8",
40 |     "postcss-url": "^7.2.1",
41 |     "rimraf": "^2.6.0",
42 |     "semver": "^5.3.0",
43 |     "shelljs": "^0.7.6",
44 |     "uglifyjs-webpack-plugin": "^1.1.8",
45 |     "url-loader": "^0.5.8",
46 |     "vue-loader": "^13.3.0",
47 |     "vue-style-loader": "^3.0.1",
48 |     "vue-template-compiler": "^2.5.2",
49 |     "webpack": "^3.6.0",
50 |     "webpack-bundle-analyzer": "^2.9.0",
51 |     "webpack-dev-server": "^2.9.1",
52 |     "webpack-merge": "^4.1.0"
53 |   },
54 |   "engines": {
55 |     "node": ">= 6.0.0",
56 |     "npm": ">= 3.0.0"
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions",
61 |     "not ie <= 8"
62 |   ]
63 | }
64 | 


--------------------------------------------------------------------------------
/screenshots/back.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lhb11/native-js-interactive-encapsulation/d266d4043c639c5da733191c3ecb2971d5aa60f8/screenshots/back.gif


--------------------------------------------------------------------------------
/screenshots/native.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lhb11/native-js-interactive-encapsulation/d266d4043c639c5da733191c3ecb2971d5aa60f8/screenshots/native.gif


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'App',
11 |   data() {
12 |     return {
13 |       'key': '11'
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | #app {
21 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
22 |   -webkit-font-smoothing: antialiased;
23 |   -moz-osx-font-smoothing: grayscale;
24 |   text-align: center;
25 |   color: #2c3e50;
26 |   margin-top: 60px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lhb11/native-js-interactive-encapsulation/d266d4043c639c5da733191c3ecb2971d5aa60f8/src/assets/logo.png


--------------------------------------------------------------------------------
/src/common/app.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 封装和原生（ios和android）的交互类，
 3 | 可以在vue的类中访问交互，方法挂载到window上工给原生调用
 4 |  */ 
 5 | var hybrid = {
 6 |     // 默认是安卓，主要用于判断是安卓还是ios
 7 |     type: 'android',
 8 |     // 区分安卓和ios的不同调用方式
 9 |     native: window.app,
10 |     // 用于vue安装这个插件 这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:
11 |     install (Vue, options) {
12 |         // 把当前的对象挂载到vue的全局
13 |         Vue.prototype.$hybrid = this;
14 |         Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue({data:{'message':''}, template:'<div> {{message}} </ div>'});
15 |         this.$eventHub = Vue.prototype.$eventHub;
16 | 
17 |         Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性，如: vue-custom-element
18 |             // 逻辑...
19 |             console.log('我是全局的方法');
20 |         };
21 |         Vue.directive('my-directive', {  // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
22 |             bind (el, binding, vnode, oldVnode) {
23 |                 // 逻辑...
24 |                 console.log('我是全局的指令');
25 |                 el.style.color = binding.value.color;
26 |                 el.innerHTML = binding.value.text;
27 |             },
28 |             update (el, binding) {
29 |                 el.style.color = binding.value.color;
30 |                 el.innerHTML = binding.value.text;
31 |             }
32 |         });
33 |         Vue.mixin({
34 |             created: function () {  // 3. 通过全局 mixin方法添加一些组件选项，如: vuex
35 |                 // 逻辑...
36 |                 // 合并一些东西到引入的组件内
37 |                 this.message = "我在封装的类内声明的变量";
38 |             }
39 |         });
40 |         Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
41 |             // 逻辑...
42 |             console.log('我是实例上的一个方法');
43 |         }
44 |     },
45 |     // 主要用户初始化信息
46 |     initType (params) {
47 |         if (params == 'ios') {
48 |             hybrid.type = "ios";
49 |         }
50 |         console.log(hybrid.type);
51 |     },
52 |     // 发送给原生的方法,...params : 这个参数就是一个数组
53 |     send (...params) {
54 |         console.log(params);
55 |     },
56 |     // 注册原生发过来的方法,name需要注册的方法的名字
57 |     registerHandler (name, callBack) {
58 |         console.log(name + "js 处理原生发送的数据");
59 |         try {
60 |             // eval(this.native.callBack) 必须指定清楚那个对象的函数名字
61 |             if (typeof(eval(this.native.callBack)) == "function") {    
62 |                 eval("this.native." + callBack + "('js处理完成之后的结果回传给原生客户端');");
63 |             } else {
64 |                 // 函数不存在, 抛出异常提示函数不存在
65 |                 alert(callBack);
66 |             }
67 |         }catch(err){
68 |             alert(err) // 可执行
69 |         }
70 |     },
71 |     appGoBack(index) {
72 |         console.log("原生调用封装类" + index);
73 |         //调用$emit 方法, 来发送全局的函数
74 |         this.$eventHub.$emit('goBack', index);
75 |     }
76 | }
77 | // 把vue中绑定的对象挂载到window上
78 | window.Hybrid = hybrid;
79 | // if (window.Vue) { // 自动绑定
80 | //     window.Vue.use(hybrid);
81 | // }
82 | // 导出共给vue组件中引入使用
83 | export default hybrid


--------------------------------------------------------------------------------
/src/common/optimizeApp.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 对app.js做优化处理
 3 |  * 自执行匿名函数
 4 |  * 常见格式：(function(){  code  })();
 5 |     解释：包围函数(function(){  code  })的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。
 6 |     作用：可以用它创建命名空间，只要把自己的所有代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许（变量前加上window，这样该函数后变量就成为全局）。各JavaScript库的代码也基本上是这种组织形式。
 7 |     总结一下，执行函数的作用主要为匿名和自动执行，代码在被解释时就已经在运行了。
 8 | 
 9 |     写法总结：
10 |     (function(){ code  }());
11 |     !function(){ code  }();
12 |     ~function(){ code  }();
13 |     -function(){ code  }();
14 |     +function(){ code  }();
15 | 
16 |  * 到处一个自调用函数，让一个函数声明语句变成了一个表达式。
17 |  * 优点 ：()和加减号在chrome表现惊人，而且在其他浏览器下也普遍很快，相比感叹号效果更好。
18 |  */
19 | export default (() => {
20 |     window.$Hybrid = {}; // 声明一个window上的对象
21 |     +function (global) {
22 |         // 默认是安卓，主要用于判断是安卓还是ios
23 |         global.$type = 'android';
24 |         // 区分安卓和ios的不同调用方式
25 |         global.$native = window.app;
26 |         // 用于vue安装这个插件 这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:
27 |         global.install = function (Vue, options) {
28 |             // 把当前的对象挂载到vue的全局
29 |             Vue.prototype.$hybrid = this;
30 |             Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue({data:{'message':''}, template:'<div> {{message}} </ div>'});
31 |             this.$eventHub = Vue.prototype.$eventHub;
32 | 
33 |             Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性，如: vue-custom-element
34 |                 // 逻辑...
35 |                 console.log('我是全局的方法');
36 |             };
37 |             Vue.directive('my-directive', {  // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
38 |                 bind (el, binding, vnode, oldVnode) {
39 |                     // 逻辑...
40 |                     console.log('我是全局的指令');
41 |                     el.style.color = binding.value.color;
42 |                     el.innerHTML = binding.value.text;
43 |                 },
44 |                 update (el, binding) {
45 |                     el.style.color = binding.value.color;
46 |                     el.innerHTML = binding.value.text;
47 |                 }
48 |             });
49 |             Vue.mixin({
50 |                 created: function () {  // 3. 通过全局 mixin方法添加一些组件选项，如: vuex
51 |                     // 逻辑...
52 |                     // 合并一些东西到引入的组件内
53 |                     this.message = "我在封装的类内声明的变量";
54 |                 }
55 |             });
56 |             Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
57 |                 // 逻辑...
58 |                 console.log('我是实例上的一个方法');
59 |             }
60 |         };
61 |         // 主要用户初始化信息
62 |         global.initType = function (params) {
63 |             if (params == 'ios') {
64 |                 this.type = "ios";
65 |             }
66 |             console.log(this.type);
67 |         };
68 |         // 发送给原生的方法,...params : 这个参数就是一个数组
69 |         global.send = function (...params) {
70 |             console.log(params);
71 |         };
72 |         // 注册原生发过来的方法,name需要注册的方法的名字
73 |         global.registerHandler = function (name, callBack) {
74 |             console.log(name + "js 处理原生发送的数据");
75 |             try {
76 |                 // eval(this.native.callBack) 必须指定清楚那个对象的函数名字
77 |                 if (typeof(eval(this.native.callBack)) == "function") {    
78 |                     eval("this.native." + callBack + "('js处理完成之后的结果回传给原生客户端');");
79 |                 } else {
80 |                     // 函数不存在, 抛出异常提示函数不存在
81 |                     alert(callBack);
82 |                 }
83 |             }catch(err){
84 |                 alert(err) // 可执行
85 |             }
86 |         };
87 |         global.appGoBack = function (index) {
88 |             console.log("原生调用封装类" + index);
89 |             //调用$emit 方法, 来发送全局的函数
90 |             this.$eventHub.$emit('goBack', index);
91 |         }
92 |     }(window.$Hybrid);
93 | })();
94 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <button @click="showInfo()">原生调用js方法</button>
 5 |     <button @click="showParam('参数传递222')">原生调用js方法传递参数</button>
 6 |     <router-link to="sec">测试销毁</router-link>
 7 |     <button v-my-directive:foo.a.b="mymsg"></button>
 8 |     <div v-my-directive="{color: 'blue', text: '测试指令!'}"></div>
 9 |     <button @click="changeDirective()">修改指令绑定的对象</button>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'HelloWorld',
16 |   data () {
17 |     return {
18 |       msg: 'vue 和 原生的交互测试',
19 |       mymsg: {color: 'green', text: '我是自定义指令的value!'}
20 |     }
21 |   },
22 |   created() {
23 |     console.log(this.message); // 获取app中mixin合并的内容
24 |     this.$myMethod(this); // 调用app中挂载到vue的全局函数
25 |     // 监听app中发出的事件
26 |     this.$eventHub.$on('goBack', (index)=>{
27 |       this.goBack(index); // 调用组件内容函数处理
28 |     });
29 |   },
30 |   methods: {
31 |     showInfo(){
32 |       alert("提供给原生调用的方法");
33 |       // 调用app中的返回函数，模拟原生调用
34 |       this.$hybrid.appGoBack(10);
35 |     },
36 |     showParam(p) {
37 |       alert(p);
38 |     },
39 |     goBack(index) {
40 |       console.log('组件之内的返回事件' + index);
41 |     },
42 |     changeDirective() {
43 |       this.mymsg.color = 'orange';
44 |       this.mymsg.text = '修改指令内容';
45 |     }
46 |   },
47 |   destroyed () {
48 |     console.log('移除监听的事件');
49 |     // 在组件销毁时移除监听事件
50 |     this.$eventHub.$off('goBack');
51 |   }
52 | }
53 | </script>
54 | 
55 | <!-- Add "scoped" attribute to limit CSS to this component only -->
56 | <style scoped>
57 | h1, h2 {
58 |   font-weight: normal;
59 | }
60 | ul {
61 |   list-style-type: none;
62 |   padding: 0;
63 | }
64 | li {
65 |   display: inline-block;
66 |   margin: 0 10px;
67 | }
68 | a {
69 |   color: #42b983;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/components/Sec.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <button @click="showInfo()">原生调用js方法</button>
 5 |     <button @click="showParam('参数传递222')">原生调用js方法传递参数</button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'HelloWorld',
12 |   data () {
13 |     return {
14 |       msg: '我是路由的第二个页面，测试销毁事件'
15 |     }
16 |   },
17 |   created() {
18 |     // this.hybrid.show = this.showInfo;
19 |     // this.hybrid.showp = this.showParam;
20 |     console.log(this.message);
21 |     this.$eventHub.$on('goBack', (index)=>{
22 |       this.goBack(index);
23 |     });
24 |   },
25 |   methods: {
26 |     showInfo(){
27 |       alert("提供给原生调用的方法");
28 |       this.$hybrid.appGoBack(10);
29 |     },
30 |     showParam(p) {
31 |       alert(p);
32 |     },
33 |     goBack(index) {
34 |       console.log('组件之内的返回事件' + index);
35 |     }
36 |   }
37 | }
38 | </script>
39 | 
40 | <!-- Add "scoped" attribute to limit CSS to this component only -->
41 | <style scoped>
42 | h1, h2 {
43 |   font-weight: normal;
44 | }
45 | ul {
46 |   list-style-type: none;
47 |   padding: 0;
48 | }
49 | li {
50 |   display: inline-block;
51 |   margin: 0 10px;
52 | }
53 | a {
54 |   color: #42b983;
55 | }
56 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | import vConsole from 'vconsole'
 7 | 
 8 | 
 9 | // 导入封装的组件
10 | // import hybrid from './common/app';
11 | // 使用组件绑定
12 | // Vue.use(hybrid, this);
13 | 
14 | // 导入优化的封装类
15 | import opApp from './common/optimizeApp'
16 | console.log(window.$Hybrid);
17 | Vue.use(window.$Hybrid, this);
18 | 
19 | Vue.config.productionTip = false
20 | // 手机页面上显示调试控制台
21 | var vConsole22 = new vConsole();
22 | 
23 | /* eslint-disable no-new */
24 | new Vue({
25 |   el: '#app',
26 |   router,
27 |   components: { App },
28 |   template: '<App/>'
29 | })
30 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import HelloWorld from '@/components/HelloWorld'
 4 | import Sec from '@/components/Sec'
 5 | 
 6 | Vue.use(Router)
 7 | 
 8 | const routers =  new Router({
 9 |   routes: [
10 |     {
11 |       path: '/',
12 |       name: 'HelloWorld',
13 |       component: HelloWorld
14 |     },
15 |     {
16 |       path: '/sec',
17 |       name: 'Sec',
18 |       component: Sec
19 |     }
20 |   ]
21 | })
22 | 
23 | routers.beforeEach((to, from, next) => {
24 | //   console.log(to.path + '---' + from.path);
25 | // debugger
26 | //   const dd =  decodeURIComponent(to.path)
27 | //   console.log(to.query);
28 | //   console.log(dd);
29 |   next();
30 | })
31 | 
32 | routers.afterEach((to, from) => {
33 |   // ...
34 | })
35 | 
36 | export default routers;
37 | 
38 | 
39 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lhb11/native-js-interactive-encapsulation/d266d4043c639c5da733191c3ecb2971d5aa60f8/static/.gitkeep


--------------------------------------------------------------------------------