webpack学习：uni运行时代码解读

uni的vue代码是如何在微信小程序里面执行的，对此比较感兴趣所以去调试学习了一波.

准备工作

// 在vue.config.js里打开非压缩的代码
module.exports = {
  configureWebpack: config => {
    config.devtool = 'none'
    config.mode = 'development'
  }
}
// 运行时代码路径  node_modules\@dcloudio\uni-mp-weixin\dist\index.js
// uni修改过后的vue代码路径  node_modules\@dcloudio\vue-cli-plugin-uni\packages\mp-vue\dist\mp.runtime.esm.js

页面初始化

不管是页面还是组件，uni都是通过微信提供的全局component方法来实现的，uni在原生的conponent基础上做了一层代理

const MPPage = Page;
const MPComponent = Component;

if (!MPPage.__$wrappered) {
  MPPage.__$wrappered = true;
  // page 也做了代理，但是没有使用（至少正常配置没有使用）
  Page = function (options = {}) {
    initHook('onLoad', options);
    return MPPage(options)
  };
  Page.after = MPPage.after;

  Component = function (options = {}) {
    initHook('created', options);
    return MPComponent(options)
  };
}

对外暴露了createComponent, createPage 这2个方法，在生成的vue文件里会调用这2个方法，这2个方法的核心都是parseComponent

function createPage (vuePageOptions) {
  {
    // Component 是被包裹一次的wx原生方法
    return Component(parsePage(vuePageOptions))
  }
}

function createComponent (vueOptions) {
  {
    return Component(parseComponent(vueOptions))
  }
}
function parseBasePage (vuePageOptions, {
  isPage,
  initRelation
}) {
  const pageOptions = parseComponent(vuePageOptions);

  initHooks(pageOptions.methods, hooks$1, vuePageOptions);

  pageOptions.methods.onLoad = function (query) {
    this.options = query;
    const copyQuery = Object.assign({}, query);
    delete copyQuery.__id__;
    this.$page = {
      fullPath: '/' + (this.route || this.is) + stringifyQuery(copyQuery)
    };
    this.$vm.$mp.query = query; // 兼容 mpvue
    this.$vm.__call_hook('onLoad', query);
  };

  return pageOptions
}

function parsePage (vuePageOptions) {
  return parseBasePage(vuePageOptions, {
    isPage,
    initRelation
  })
}

页面交互

推荐这些文章：

webpack学习：uni运行时代码解读三 (页面和组件交互)

prop传值给组件
// 页面的wxml，aa是组件 tabs是页面传给aa的prop，除此之外还会传过来一个vue-id的prop
// 还会绑定一个__l方法，在子组件的attached钩子内部会触发来建议vue实例之间的父子关系
<aa vue-id="8dd740cc-1" tabs="{{tabs}}" bind:__l="__l"></aa>

// 组件的js 第一节的componentOptions中
attached () {
// 在这里可以获取到自身的data和prop传过来的值，
const properties = this....

webpack学习：uni运行时代码解读二 (页面的交互)

页面点击触发vm（vue实例）的方法
uni里的vue代码
<template>
<view
class="content"
@click="qq"
@longpress='fq'
>
3345
</view>
</template>

经过uni转换后的小程序wxml代码
<view data-event-opts="{{[['tap',[['qq',['$eve...

npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js

// fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});
修改成
fs.write(fd, buf, 0, 'utf-8', function (err, written, buffer) {})

修改完成之后在运行

npm run init

...

uni-app 中扩展表示当前平台的环境变量

const webpack = require('webpack');
const env = process.env.UNI_SCRIPT || process.env.UNI_PLATFORM;
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.env': {
'APP_ENV': JSON.stringify(env),
...

uni-app判断运行的平台

1.编译期判断(条件编译,代码块中的代码只会编译到对应的发行包里)
　　例如：

// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif
// #ifndef H5
alert("除了h5平台之外的其他平台才有的方法")
// #endif

//#ifdef %PLATFORM% //#endif 可以使用的值

值生效条件

VUE3
HBuilderX 3.2.0+ 详情

APP-PLUS
App

APP-PLUS-NVUE或APP-NVUE
App nvue

H5
H5

MP-WEIXI...

代码分离：动态导入

当涉及到动态代码拆分时，webpack 提供了两个类似的技术。第一种，也是推荐选 择的方式是，使用符合 ECMAScript 提案 的 import() 语法 来实现动态导入。第二 种，则是 webpack 的遗留功能，使用 webpack 特定的 require.ensure 。让我们 先尝试使用第一种

function getComponent() {
return import('lodash')
.then(({
default: _
}) => {
const element = document.createElement('div')
element.innerHTML...

Vue 源码解读（2）—— Vue 初始化过程

当学习成为了习惯，知识也就变成了常识。 感谢各位的 点赞、收藏和评论。
新视频和文章会第一时间在微信公众号发送，欢迎关注：李永宁lyn
文章已收录到 github 仓库 liyongning/blog，欢迎 Watch 和 Star。
目标
深入理解 Vue 的初始化过程，再也不怕 面试官 的那道面试题：new Vue(options) 发生了什么？
找入口
想知道 new Vue(options) 都做了什么，就得先找到 Vue 的构造函数是在哪声明的，有两个办法：

从 rollup 配置文件中找到编译的入口，然后一步步找到 Vue 构造函数，这种方式 费劲

通过编写示例代码，然后...

vue 控制时间可选范围

computed: {
pickerOptions: function() {
const _this = this
return {
disabledDate(timeSt) {
if (_this.newBuiltForm.after) {
const timeEnd = new Date(_this.newBuiltForm.after)
return timeSt.getTime() >= timeEnd.getTime()
}
...

JS学习——异步

学习内容来源：JavaScript 回调、异步的 JavaScript、JavaScript Promise、JavaScript Async
JavaScript 回调

回调 (callback) 是作为参数传递给另一个函数的函数。
这种技术允许函数调用另一个函数。
回调函数可以在另一个函数完成后运行。

函数序列

JavaScript 函数按照它们被调用的顺序执行。而不是以它们被定义的顺序。

// txt = "Goodbye"
let txt;

function myDisplayer(some) {
txt = some;
}

function myFirst() {
...

vue: p24 项目打包相关配置：webpack.config.js 配置和 package.json

1.打包配置package.json
"scripts": {
"dev": "webpack serve", //冒号前可随意命名，冒号后必须固定
"build": "webpack --mode production" //【1】build可随便命名，直接用webpack也可成功打包，但不会压缩优化
}

webpack模式：main.js有354kb，时间相对短些
webpack --mode production 模式：main.js只有94kb，命令会覆盖webpack.config中的mode，时间也会更长
输出位置和文件名与webpack.config中的...