页面出现中文乱码，该怎么解决？

相关推荐

• 前端

  如何在自有前端工程中使用gql请求？

  场景 客户在个性化程度比较高的h5工程中想使用平台的服务端能力，这个时候需要调用后端的gql请求，此时需要引入平台的请求库依赖 npm的package.json中加入依赖 此文档以4.x举例，使用其他版本的请自行修改版本号 "dependencies": { "@kunlun/request": "~4.3.0", "@kunlun/state": "~4.3.0" } 使用示例 import { HttpClient } from ‘@kunlun/request’ const http = HttpClient.getInstance() http.setBaseURL(”) export const login = (data) => { const gqlBody = `mutation { pamirsUserTransientMutation { login(user: {login: “${data.username}”, password: “${data.password}”}) { broken errorMsg errorCode errorField } } }` return http.mutate(‘user’, gqlBody) } 注意事项 开发环境记得配置oinone请求的路由转发规则，这里以vite.config.js举例 import { defineConfig } from ‘vite’ export default defineConfig({ server: { port: 8088, open: true, proxy: { ‘/pamirs’: { changeOrigin: true, // 服务端请求地址 target: ‘http://127.0.0.1:8091’ } } } })

  oinone

  2023年11月1日

  1.3K000
• 代码实践

  【前端】项目开发前端知识要点地图

  概述 下面整理了目前现有的所有文章，并提供了基本的学习路径。所有使用*标记的文章属于推荐必读文章。 目录 基础篇 【路由】浏览器地址栏url参数介绍 母版-布局-DSL 渲染基础（v4）* 组件SPI机制（v4）* 组件数据交互基础（v4）* 组件生命周期（v4） 入门篇 自定义视图组件（v4）* 如何通过浏览器开发者工具提高调试效率* 如何提高自定义组件的开发效率* 自定义组件之自动渲染（组件插槽的使用）（v4）* GraphQL请求详解（v4）* 上下文在字段和动作中的应用 如何实现页面间的跳转 如何自定义指定页面的样式 进阶篇 自定义组件之手动渲染基础（v4） 自定义组件之手动渲染弹出层（v4） 自定义组件之手动渲染任意视图（v4） 【前端】IOC容器（v4） 最佳实践篇 【前端】工程结构最佳实践（v4）* 【前端】移动端工程结构最佳实践（v4）* 界面设计器实战篇 基础篇 【界面设计器】模型增删改查基础 【界面设计器】他表字段 【界面设计器】左树右表 【界面设计器】树形表格 【界面设计器】树下拉/级联选择 【界面设计器】自定义字段组件基础 展示篇 【界面设计器】自定义字段组件实战——轮播图 【界面设计器】自定义字段组件实战——表格字段组合展示 【界面设计器】自定义字段组件实战——表格字段内嵌表格 交互篇 【界面设计器】自定义字段组件实战——千分位输入框 其他 前端低无一体使用教程 如何自定义表格字段？ 【界面设计器】组件开发常见问题 【前端】低无一体部署常见问题 【前端】生产环境性能调优 API文档 OioProvider详解（v4.3.0）* 前端环境配置（v4）* 默认布局模板（v4） 表格主题配置（v4） 运行时上下文API文档（v4） Class Component(ts)（v4）

  数式-海波

  2024年5月25日

  4.4K000
• 前端

  前端 SPI 注册 + 渲染

  在阅读本篇文章之前，您需要学习以下知识点： 1: TS 结合 Vue 实现动态注册和响应式管理 前端开发者在使用 oinone 平台的时候会发现，不管是自定义字段还是视图，对应的 typescript 都会用到@SPI.ClassFactory(参数)，然后在对用的class中重写initialize方法`: @SPI.ClassFactory(参数) export class CustomClass extends xxx { public initialize(props) { super.initialize(props); this.setComponent(FormString); return this; } } 本文将带您熟悉 oinone 前端的 SPI 注册机制以及 TS + Vue 的渲染过程。 不管是自定义字段还是视图@SPI.ClassFactory(参数)都是固定写法，区别在于参数不同，这篇文章里面详细描述了参数的定义。 SPI 注册机制 有自定义过字段、视图经验的开发者可能会发现，字段(表单字段)SPI 注册用的是FormFieldWidget.Token生成对应的参数，视图 SPI 注册用的是BaseElementWidget.Token，那么为什么要这样定义呢？ 大家可以想象成现在有一个大的房子，房子里面有很多房间，每个房间都有自己的名字，比如FormFieldWidget就是房间的名字，BaseElementWidget也是房间的名字，这样一来我们就可以根据不同的房间存放不同的东西。 下面给大家展示下伪代码实现： class SPI { static container = new Map<string, WeakMap<object, object>>() static ClassFactory(token) { return (target) => { if(!SPI.container.get(token.type)) { SPI.container.set(token.type, new WeakMap()) } const services = SPI.container.get(token.type) services?.set(token, target) } } } class FormFieldWidget { static Token(options) { return { …options, type: 'Field' } } static Selector(options) { const fieldWidgets = SPI.container.get('Field') if(fieldWidgets) { return fieldWidgets.get(options)! } return null } } @SPI.ClassFactory(FormFieldWidget.Token({ viewType: 'Form', ttype: 'String', widget: 'Input' })) class StringWidget { } // 字段元数据 const fieldMeta = { name: "name", field: "name", mode: 'demo.model', widget: 'Input', ttype: 'String', viewType: 'Form' } // 找到对应的widget const widget = FormFieldWidget.Selector({ viewType: fieldMeta.viewType, ttype: fieldMeta.ttype, widget: fieldMeta.widget, }) 在上述代码中，我们主要是做了这么写事情： 1.SPI class class SPI { static container = new Map<string, WeakMap<object, object>>() } SPI 类是一个静态类，用于管理服务的注册和获取。 container 是一个静态属性，类型是 Map，它的键是字符串，值是 WeakMap。这个结构允许我们为每个服务类型（例如，Field）管理多个服务实例。 2.ClassFactory 方法 static ClassFactory(token) { return (target) => { if…

  汤乾华

  2024年9月26日

  1.5K000

• 自定义组件之手动渲染弹出层（v4）

  阅读之前 你应该： 了解自定义组件相关内容。 自定义组件之手动渲染基础（v4） 弹出层组件 我们内置了两个弹出层组件，弹窗(Dialog)和抽屉(Drawer)，以下所有内容全部围绕弹窗(Dialog)进行描述，抽屉相关内容与弹窗完全一致。 下面这个对照表格可以帮助你区分两个弹出层组件的异同： 弹出层相关功能 弹窗(Dialog) 抽屉(Drawer) API方法 Dialog#create Drawer#create 内置组件 DialogWidget DrawerWidget 内置插槽 header, default, footer header, default, footer 渲染弹出层的方式 我们提供了三种渲染弹出层组件的方式，根据不同的情况使用不同的方式可以让实现变得更简单。 使用Dialog#createAPI方法创建弹窗：一般用于简单场景，动作区无法进行自定义。 使用DSL渲染能力创建弹窗 调用ActionWidget#click方法打开弹窗（适用于自动渲染场景） 使用createWidget创建DialogWidget并打开弹窗（适用于手动渲染场景） 使用第三方组件创建弹窗：一般用于弹窗需要自定义的场景中，性能最优，可用于任何场景。 使用Dialog#createAPI方法创建弹窗 以下是一个自定义组件的完整示例，其使用ViewCache#compule方法获取视图。 view.ts export const template = `<view> <field data="id" invisible="true" /> <field data="code" label="编码" /> <field data="name" label="名称" /> </view>`; ManualDemoWidget.ts import { BaseElementWidget, createRuntimeContextForWidget, Dialog, FormWidget, MessageHub, RuntimeView, SPI, ViewCache, ViewType, Widget } from '@kunlun/dependencies'; import ManualDemo from './ManualDemo.vue'; import { template } from './view'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'ManualDemo' })) export class ManualDemoWidget extends BaseElementWidget { public initialize(props) { super.initialize(props); this.setComponent(ManualDemo); return this; } @Widget.Method() public async openPopup() { // 获取运行时视图 const view = await this.fetchViewByCompile(); if (!view) { console.error('Invalid view'); return; } // 创建运行时上下文 const runtimeContext = createRuntimeContextForWidget(view); const runtimeContextHandle = runtimeContext.handle; // 获取初始化数据 const formData = await runtimeContext.getInitialValue(); // 创建弹窗 const dialogWidget = Dialog.create(); // 设置弹窗属性 dialogWidget.setTitle('这是一个演示弹窗'); // 创建所需组件 dialogWidget.createWidget(FormWidget, undefined, { metadataHandle: runtimeContextHandle, rootHandle: runtimeContextHandle, dataSource: formData, activeRecords: formData, template: runtimeContext.viewTemplate, inline: true }); dialogWidget.on('ok', () => { MessageHub.info('click ok'); // 关闭弹窗 dialogWidget.onVisibleChange(false); }); dialogWidget.on('cancel', () => { MessageHub.info('click cancel'); // 关闭弹窗 dialogWidget.onVisibleChange(false); }); // 打开弹窗…

  nation

  前端 2023年11月1日

  1.2K000
• 前端

  如何自定义表格字段？

  目录 一、表单字段注册vue组件实现机制 二、表格字段注册vue组件实现机制 三、机制对比分析 四、表格字段完整案例 表单字段注册vue组件实现机制 核心代码 public initialize(props) { super.initialize(props); this.setComponent(VueComponent); return this; } 表格字段注册vue组件实现机制 核心代码 @Widget.Method() public renderDefaultSlot(context: RowContext) { const value = this.compute(context); return [createVNode(CustomTableString, { value })]; } 因为表格有行跟列，每一列都是一个单独的字段（对应的是TS文件），但是每列里面的单元格承载的是Vue组件，所以通过这种方式可以实现表格每个字段对应的TS文件是同一份，而单元格的组件入口是通过renderDefaultSlot函数动态渲染的vue组件，只需要通过createVNode创建对应的vue组件，然后将props传递进去就行 上下文接口 interface RowContext<T = unknown> { /** * 当前唯一键, 默认使用__draftId, 若不存在时，使用第三方组件内置唯一键（如VxeTable使用{@link VXE_TABLE_X_ID}） */ key: string; /** * 当前行数据 */ data: Record<string, unknown>; /** * 当前行索引 */ index: number; /** * 第三方组件原始上下文 */ origin: T; } 机制对比分析 表单字段 vs 表格字段渲染机制对比表 对比维度 表单字段实现方案 表格字段实现方案 绑定时机 initialize 阶段静态绑定 renderDefaultSlot 阶段动态创建 组件声明方式 this.setComponent(Component) createVNode(Component, props) 上下文传递 通过类成员变量访问 显式接收 RowContext 参数 渲染控制粒度 字段级（表单控件） 单元格级 表格字段完整案例 import { SPI, ViewType, BaseFieldWidget, Widget, TableNumberWidget, ModelFieldType, RowContext } from '@kunlun/dependencies'; import CustomTableString from './CustomTableString.vue'; import { createVNode } from 'vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ ttype: ModelFieldType.String, viewType: [ViewType.Table], widget: 'CustomTableStringWidget' }) ) export class CustomTableStringWidget extends BaseTableFieldWidget { @Widget.Method() public renderDefaultSlot(context:RowContext) { const value = this.compute(context); // 当前字段的值 const rowData = context.data // 当前行的数据 const dataSource = this.dataSource // 表格数据 if (value) { // 自定义组件入口在此处 return [createVNode(CustomTableString, { value })]; } return []; } } <template> <div>当前值： {{value}}</div> </template> <script lang="ts"> import { defineComponent } from 'vue'…

  汤乾华

  2023年11月6日

  1.8K000