vue技术体系开发必读

在平台中开发的前端页面都是有数据流data和组件构成的，数据流就是数据的提供者，提供的数据用来可被观察。对于vue技术体系的页面来说，组件通过ref、reactive引用数据，通过可被观察的方式进行渲染。即vue的渲染体系是，用可追踪的数据进行渲染，当数据变化后会根据追踪的数据重新渲染相关的组件。

vue体系的页面开发时如下划分：

设计：可视化设计页面

源码：.w源码(vue中的render函数)

js：设计可视部分的业务逻辑

data.js：纯数据逻辑

css：页面样式

主要是js和data.js的不同

js

js中是辅助页面的逻辑，setup scoped片段。主要有：

1.页面生命周期逻辑，如onLoad、onInitState等

2.用户操作产生的回调event、click，回调行等，如：按钮的onClick回调

3.页面中的简单逻辑，补充页面的动态效果,如：返回js片段

vue中是use型的API就是hooks，没有类的概念,定义的都是函数和局部变量，因此是没有this，页面page相关的，需要使用this时需要用$page,如下:

       $page.getUIUrl("$UI/XXX")//url转换

       $page.navigateTo({url:"XXXX"})//打开页面

       $page.getServiceUrl("/main/XXX")//API转换

       $page.request({})//发请求

       $page.comp("context1")//获取组件

若返回js片段,js与.w在同一个作用域,所以在.w中调用时直接写函数名即可.如下：

按钮的图标动态渲染，.w中的调用

    <antdv:Button text="按钮" id="button6" icon="{MyCompRender()}"></antdv:Button>

 js中的定义

    let MyCompRender = ()=>{
        return "down-circle,outlined";
    }

在js中如果要使用data需要用useData获取数据组件，然后在需要使用的地方就可以直接通过变量调用，注意不能在使用的函数中通过useData获取。如：

在实现渲染的js片段中使用

    let MyCompRender = ()=>{
        return <Layout><Layout.Content><Button>test render {mainData?.current?.fid}</Button></Layout.Content></Layout>
    }

在按钮事件中使用

    let onButton5Click = (event) => {
        mainData.setValue("state",1);
        mainData.getCurrentRow();
        mainData.next();
    }

data.js

data.js是在渲染之前执行的,不能操作ui，纯数据逻辑。

数据集组件的事件和规则函数都在data.js中实现，data.js中定义的规则函数在调试时通过$page调用，如下：

data.js中获取数据集组件用this.comp("data的id")，还可以获取上下文(wxContext)、服务组件(wxService)、工作流组件(wxWf)、序号组件(wxSn)等，都是用this.comp("组件id")获取。

如下：

    onMainDataBeforeSave(event){
        var wfmui = this.comp("wfmui");
        var wxContext = this.comp("wxContext0");
        var personFname = wxContext.getCurrentPersonMemberFName();
        var row = this.comp("restData0").getCurrentRow();
    }

注意：不能操作其他ui组件