TOMMYHU

类似vue中的template
组件没有实际的意义，可以理解为一个用来配合wx:if或者wx:for 渲染一个或多个view的块组件。
1.

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
[codes=javascript]

   view1
   view2

[/codes]

2.

类似 block wx:if ，也可以将 wx:for 用在 标签上，以渲染一个包含多节点的结构块。例如：
[codes=javascript]

   {{index}}:
   {{item}}

[/codes]

 Vue2中的语法糖.sync：

在父组件中的
<div :title.sync="visible" ></div>
等同于: / .sync将针对于title的监听事件缩写 /
<div :title="visible" @update:title="visible = $event" ></div>
在子组件的methods中使用如下将新的value传给父级：

` handleClose() {        this.$emit('update:title', newValue)    }`

Vue3中用v-model替代了.sync修饰符和组件的model选项 / 不兼容 /：

针对于有参数的：<div v-model:title="visible" ></div>
等同于：<div :title="visible" @update:title="visible = $event" ></div>

Vue3中还针对于没有参数的v-model：

<div v-model="visible" ></div>
没有参数但却实际上在父组件内传入modelValue，类似于：
v-model:modelValue="visible" @updata:modelValue="visible =$event"
在父组件里是运用visible,在子组件里传入的props里的是modelValue.
更改参数，传入父级也是用modelValue
this.$emit('update:modelValue', newValue)

详情可以看Vue3的官方

.sync在Vue3的转变

先来看看Vue3的几种组件通信方式：
[codes=c#]
props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
[/codes]
下面分别介绍这几种方式的写法：

1、props
[codes=c#]
父组件



子组件

[/codes]
2、$emit

父组件
[codes=c#]



子组件


[/codes]
3、expose / ref

父组件
[codes=c#]



子组件

[/codes]
4、attrs

父组件
[codes=c#]



子组件

[/codes]
5、v-model

父组件(v-model可省略)
[codes=c#]



子组件


[/codes]
6. provide / inject

父组件
[codes=c#]


子组件

[/codes]
接下来是Vue2.x 组件通信使用方法：
1、 props

父组件
[codes=c#]


子组件
export default {
  props:{
      msg:{
          type:String,
          default:'这是默认数据'
      }
  },
  mounted(){
      console.log(this.msg)
  }
[/codes]
2、.sync
[codes=c#]
父组件


[/codes]
3、v-model
[codes=c#]
父组件


[/codes]
4、ref
[codes=c#]
子组件
export default {
    data(){
        return {
            name:""
        }
    },
    methods:{
        someMethod(msg){
            console.log(msg)
        }
    }
}

父组件


[/codes]
5、$emit / v-on
[codes=c#]
子组件
export default {
  data(){
      return { msg: "这是发给父组件的信息" }
  },
  methods: {
      handleClick(){
          this.$emit("sendMsg",this.msg)
      }
  },
}
父组件


export default {
    methods:{
        getChildMsg(msg){
            console.log(msg) // 这是父组件接收到的消息
        }
    }
}
6、children/parent
[codes=c#]
父组件
export default{
    mounted(){
        this.$children[0].someMethod() // 调用第一个子组件的方法
        this.$children[0].name // 获取第一个子组件中的属性
    }
}

子组件
export default{
    mounted(){
        this.$parent.someMethod() // 调用父组件的方法
        this.$parent.name // 获取父组件中的属性
    }
}
[/codes]
7、EventBus
[codes=c#]
// 方法一
// 抽离成一个单独的 js 文件 EventBus.js ，然后在需要的地方引入
// EventBus.js
import Vue from "vue"
export default new Vue()

// 方法二 直接挂载到全局
// main.js
import Vue from "vue"
Vue.prototype.$bus = new Vue()
[/codes]
8、Vuex（这个就不举例子了........懂的都懂！）

[codes=c#]
//testCp


//use testCp

[/codes]

https://github.com/midwayjs/midway

Midway 是一个适用于构建 Serverless 服务，传统应用、微服务，小程序后端的 Node.js 框架。

Midway 可以使用 Koa，Express 或 Egg.js 作为基础 Web 框架。它还提供了独立使用的基本解决方案，例如 Socket.io，GRPC，Dubbo.js 和 RabbitMQ 等。

此外，Midway 也适用于前端/全栈开发人员的 Node.js 无服务器框架。构建下一个十年的应用程序。可在 AWS，阿里云，腾讯云和传统 VM /容器上运行。与 React 和 Vue 轻松集成。

[codes=c#]
               :columns="columns"
               :data-source="list"
               :rowKey="
          (record, index) => {
            return index;
          }
        ">

[/codes]

[codes=c#]
import { defineAsyncComponent } from "vue"

// simple usage
const AsyncFoo = defineAsyncComponent(() => import("./demo.vue"))

// with options
const AsyncFooWithOptions = defineAsyncComponent({
  loader: () => import("./demo.vue"),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})

[/codes]

声明
[codes=c#]
export declare interface AsyncComponentOptions {
    loader: AsyncComponentLoader;
    loadingComponent?: Component;
    errorComponent?: Component;
    delay?: number;
    timeout?: number;
    suspensible?: boolean;
    onError?: (error: Error, retry: () => void, fail: () => void, attempts: number) => any;
}
[/codes]

package.json
[codes=c#]
  "dependencies": {
    "@ffmpeg-installer/ffmpeg": "^1.0.13",
    "fluent-ffmpeg": "^2.1.2"
  }
[/codes]

lib.js
[codes=c#]
const ffmpegInstaller = require('@ffmpeg-installer/ffmpeg');
const ffmpeg = require('fluent-ffmpeg');

ffmpeg.setFfmpegPath(ffmpegInstaller.path);
// console.log(ffmpegInstaller.path, ffmpegInstaller.version);

module.exports = ffmpeg;
[/codes]

app.js
[codes=c#]
const ffmpeg = require('./lib');

// cmd: ffmpeg -stream_loop -1 -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 video.ts
const inputVideo = './video.mp4';
const outputVideo = './demo/video.ts';

var command = ffmpeg(inputVideo)
// set video bitrate
//  .videoBitrate(1024)
// set aspect ratio
//  .aspect('16:9')
// set size in percent
//  .size('50%')
// set fps
//  .fps(24)
.videoCodec('mpeg1video')
// set audio bitrate
.audioBitrate('128k')
// set audio codec
.audioCodec('mp2')
// 去掉声音
.noAudio()
// set number of audio channels
//  .audioChannels(2)
// set custom option
//  .addOption('-vtag', 'DIVX')
// set output format to force
.format('mpegts')
// setup event handlers
.on('end', function() {
  console.log('file has been converted succesfully');
})
.on('error', function(err) {
  console.log('an error happened: ' + err.message);
})
// save to file
.save(outputVideo);
[/codes]

代码见附件

JAVA版本https://github.com/freedomdebug/ffmpeg

[codes=c#]
Parsing error: Must use import to load ES Module: F:\project\xxx\node_modules\eslint-scope\lib\definition.js
require() of ES modules is not supported.
require() of F:\project\xxx\node_modules\eslint-scope\lib\definition.js from F:\project\xxx\node_modules\babel-eslint\lib\require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from F:\project\xxx\node_modules\eslint-scope\package.json.eslint
[/codes]

nodejs版本过高？？

[codes=javascript]

[/codes]