vue页面引入js_在线开发AstroZero高级页面自定义组件-华为云

在线开发AstroZero高级页面自定义组件

组件所属分类，上传组件后，该组件将会在页面的该分类下进行展示。领域组件包应用的领域，一般保持默认“通用”。场景组件包的应用场景。高级页面：组件适用于高级页面开发场景。标准页面：组件适用于标准页面开发场景。业务大屏：组件适用于Astro Canvas大屏页面开发场景。业务小屏：组件适用于Astro

来自：帮助中心

查看更多 →
总体开发思路

用同样的逻辑和功能了。通过Webpack进行组件打包构建成为独立JS。独立JS能够被懒加载。在管理页面进行卡片创建，上传管理。创建卡片实例，关联独立JS包，进行版本控制。父主题：卡片配置指南

来自：帮助中心

查看更多 →
开发样例：JS页面集成样例

DOCTYPE html> <html> <head>  <script

来自：帮助中心

查看更多 →
新建并开发自定义组件

当系统预置的组件无法满足用户需求时，用户可自定义组件包进行上传，在页面中进行使用。场景描述本节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。如图1所示，页面中主要包含标签栏和详情展示两部分，通过切换标签栏来控制详情展示中的内容。图1 页面示例在页面开发中，通过两个自定义组件（标签

来自：帮助中心

查看更多 →
准备工作

如果安装成功，应该可以看到npm的版本号。安装Vue CLI Vue CLI是Vue.js的脚手架工具，可以帮助我们快速创建Vue.js应用。要使用它，我们需要先安装它。在命令行中输入以下命令来安装Vue CLI： npm install -g @vue/cli 这个命令会全局安装Vue CLI，所以安装

来自：帮助中心

查看更多 →
开发样例：JS页面集成样例

开发样例：JS页面集成样例环境要求 - 引用库 Jquery 1.8.0.js/Axios.min.js 集成样例 index.html 本文档所述Demo在提供服务的过程中，可能会涉及个人数据的使用，建议您遵从国家的相关法律采取足够的措施，以确保用户的个人数据受到充分的保护。

来自：帮助中心

查看更多 →
创建自定义标准组件

适用场景在不同的页面中，可重复使用的模块。复杂的页面拆分成多个低耦合的模块，有助于代码维护。使用语言 Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是可以自底向上逐层应用Vue。Vue易于上手，也便于与系统进行整合。开发自定义组件前，请先了解JS和Vue相关知识，具备一定的JS和Vue开发经验。

来自：帮助中心

查看更多 →
{widget}.js

{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。

来自：帮助中心

查看更多 →
提取/引入重构

提取/引入重构简介引入变量引入参数引入字段引入常量提取方法提取接口提取超类提取委托引入功能参数引入功能变量提取方法对象引入参数对象父主题：重构

来自：帮助中心

查看更多 →
引入字段

引入字段此重构允许您创建一个新的类字段，使用选定的表达式初始化它，并使用对创建的类字段的引用替换原始表达式。这与内联字段重构相反。执行重构在代码编辑器中，将光标放置在要提取到类字段的表达式上。在主菜单或编辑器上下文菜单中，选择Refactor>Introduce Fiel

来自：帮助中心

查看更多 →
引入功能参数

Functional Parameter对话框中，提供引入参数的名称和其他重构选项。在Parameters of type列表中，为提取的参数选择其中一种的类型。选择是否应将提取的参数声明为final参数。要保留原始方法并使用引入的参数定义新方法，请选中Delegate via overloading

来自：帮助中心

查看更多 →
引入参数对象

引入参数对象此重构允许您将方法的参数移动到新的包装类或某些现有的包装类。所有参数的用法都将替换为对包装类的相应调用。执行重构在代码编辑器中，将光标放置在要提取到包装类的参数上。在主菜单或编辑器上下文菜单中，选择Refactor>Introduce Parameter Object。

来自：帮助中心

查看更多 →
引入依赖库

引入依赖库支持的依赖库说明 FunctionGraph支持引入标准库及第三方依赖库。标准库对于标准库，无论是在线编辑或是线下开发打包上传至FunctionGraph，均可以直接在代码中引入，使用其功能。 FunctionGraph支持的非标准库 FunctionGraph内

来自：帮助中心

查看更多 →
{widget}.js

{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。

来自：帮助中心

查看更多 →
添加工具类

@vueuse/core @vueuse/shared axios pinia vue vue-i18n vue-router vue/server/renderer @opentiny/vue 父主题：使用工具类方法

来自：帮助中心

查看更多 →
JS错误

JS错误 JS错误展示站点的错误统计，包括：JS稳定性、JS错误列表以及JS错误率页面排行榜。操作步骤登录管理控制台。单击左侧，选择“管理与监管 > 应用性能管理 APM”，进入APM服务页面。在左侧导航栏选择“前端监控 >JS错误”，展示JS错误的性能数据。图1 JS错误

来自：帮助中心

查看更多 →
线下开发自定义登录组件

查看解压后的组件目录。目录结构如图3所示，其中userLogin.js文件是写vue业务逻辑的代码，userLogin.ftl用于写html代码，userLogin.css用于写样式代码，userLogin.editor.js以及packageinfo.json是配置文件。图3 目录结构

来自：帮助中心

查看更多 →
引入功能变量

引入功能变量此重构允许将选定的表达式转换为新的函数类型变量或匿名类。执行重构在代码编辑器中，选择要转换为函数变量的表达式。在主菜单或编辑器上下文菜单中，选择Refactor>Introduce Functional Variable。在打开的Introduce Functional

来自：帮助中心

查看更多 →
使用AstroZero自定义组件在页面中的属性

组件到页面时会提示如下报错。图4 界面报错在应用设计器中，单击左侧导航栏中的“设置”。在“高级设置”中，取消勾选“页面组件的渲染框架由Vue2升级为Vue3”开关。图5 取消选中在应用设计器中，选择“界面”，单击高级页面后的“+”，新建一个高级页面。在设计页面左上方单

来自：帮助中心

查看更多 →
场景三：通过URL地址集成（增加页面JS调用）

场景三：通过URL地址集成（增加页面JS调用）概述开发步骤开发前准备集成开发测试和验证附录-流程说明

来自：帮助中心

查看更多 →
核心代码简析

rowse.js，引用代码示例如图1所示。图1 JS框架引用示例 1、网页协同功能不支持打开新的页签后在新页签上进行协同操作。 2、引入网页协同的cobrowse.js和cobrowseCommon.js组件时，第三方页面中包含多层iframe嵌套时，仅引入了js组件的ifra

来自：帮助中心

查看更多 →