element模板框架_用 Vue 3.0 来写个小程序框架-CSDN博客

本文链接：https://blog.csdn.net/weixin_36484714/article/details/112088903

由于小程序的开发起来比较原始复杂且繁琐，跟我们主流的开发方式差距很大，所以为了提高我们开发小程序的效率，市面上出现过很多的小程序的框架：mpvue，Taro，uni-app 等等，这些框架或多或少地将我们带到现代化的开发方式中来，他们可以让你使用 React 或者 Vue 来开发小程序。今天就分享一个如何利用 Vue 3.0 来构建一个小程序的框架。

基础知识

Vue 3.0

简单看看 Vue 3.0 有哪些新特性：

Composition-API

Composition-API 是一套让你可以很方便抽取逻辑函数的 API，相比于之前的 Options API，其代码组织能力更强，相同的逻辑可以写在同一个地方，各个逻辑之间界限分明。

看下面的例子即可说明：

<template>
  <div>
    <div>Add todo list</div>
    <div class="field">
       <input @input="handleInput" :value="todo" />
    </div>
    <button @click="handleAdd">Add +</button>
  </div>
</template>
<script>
import { ref, reactive } from 'vue';
import { useMainStore } from '@/store';
export default {
  setup() {
    const todo = ref('');
    const state = reactive({
        a: 1,
        b: 'hello world'
    });
    const store = useMainStore();
    const handleInput = (e) => {
      todo.value = e.detail.value;
      state.a = 'dsdas';
    };
    const handleAdd = () => {
      store.addTodo(todo.value);
    };
    return {
      handleInput,
      todo,
      handleAdd,
    };
  },
};
</script>

Fragment, Teleport

有点类似于 React 的 Fragment，使得我们在写 Vue 的模板时不再限制于需要一个根节点，在 Vue3.0 里可以有多个根节点。

<Fragment>
   <component-1 />
   <component-2 />
</Fragment>

Teleport 用一种直接声明的方式来将子组件安装到 DOM 中的其他位置，类似于 React 的 Portal，但是功能更加强大。

<body>
  <div id="app" class="demo">
    <h3>Move the #content with the portal component</h3>
    <div>
      <teleport to="#endofbody">
        <p id="content">
          This should be moved to #endofbody.
        </p>
      </teleport>
      <span>This content should be nested</span>
    </div>
  </div>
  <div id="endofbody"></div>
</body>

更好的 TypeScript 支持

现在 Vue 3.0 的代码都是由 TS 来编写，加上 Composition-Api，再写业务代码的时候可以无缝切换到 TS 。

Custom Render API

利用这套 API 可以很方便的构建出自定义的渲染层，这个也是我们接下来需要重点讲的。

import {
  createRenderer,
  CreateAppFunction,
} from '@vue/runtime-core';
export const { render, createApp: baseCreateApp } = createRenderer({
  patchProp, // 修改 props 的函数
  ...nodeOps, // 修改 dom 节点的函数
});
render();

小程序

要开发一个小程序的页面基本上我们只需要四个文件：

index.js

index.js 就是我们写代码逻辑的地方。

有一个 Page 函数，里面是对象配置，类似于 Vue 的 options 配置一样，有一个 data 属性，存放着初始化的数据。
如果想要修改数据改变视图，又需要像 react 一样，需要调用 setData 去修改视图。

Page({
     data: {
       text: 'hello word'
    },
    onLoad() {
        this.setData({
            text: 'xxxxx'
        })
    },
    onReady() {},
    onShow() {},
    onHide() {},
    onUnload() {},
    handleClick() {
        this.setData({
            text: 'hello word'
        })
    }
})

index.ttml

index.ttml 是我们写视图模板的地方。

类似于 vue 的 template，我们需要先定义模板才能显示视图
注意： 不能直接在 index.js 里面去修改定义的模板的 DOM，只能先定义好，这是由于小程序架构双线程导致的，分为逻辑层和渲染层，我们写的 index.js 代码跑在逻辑层里面，index.ttml 跑在渲染层里面，两个线程就通过 setData 进行数据交换。