uni-app 打开utf8编码文件以gbk编码显示问题

uni-app 打开utf8编码文件以gbk编码显示问题

项目名称 值
产品分类 HbuilderX
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows 10
HBuilderX版本号 3.4.6

示例代码：

<template>
<view>
<u-navbar title="项"></u-navbar>
<u-cell-group>
<u-cell-item :title="project.projectName" v-for="(project,index) in projects" :key="index"
@click="tapDetail(project.projectId)">
</u-cell-item>
</u-cell-group>
</view>
</template>

操作步骤：

  1. 新建json文件，以utf8编码保存相关代码
  2. 重新打开1的json文件，文件中的中文乱码，hbuilderx以gbk编码打开
  3. 另建一个vue文件，文件内容和1相同，以utf8保存
  4. 再次打开3中的vue文件，同样以gbk编码打开
  5. 删除代码中的文字“项”，改为“我的目”，以utf8保存，再次打开，编码正常(utf8)，显示正常

预期结果：

如上述

实际结果：

如上述

bug描述：

如图所示

  1. 新建json文件，以utf8编码保存相关代码
  2. 重新打开1的json文件，文件中的中文乱码，hbuilderx以gbk编码打开
  3. 另建一个vue文件，文件内容和1相同，以utf8保存
  4. 再次打开3中的vue文件，同样以gbk编码打开
  5. 删除代码中的文字“项”，改为“我的目”，以utf8保存，再次打开，编码正常(utf8)，显示正常

经过测试，发现只要存在“项”这个字，并且代码相似（和文件后缀无关），就会被编辑器以gbk打开，下附相关代码

<template>  
    <view>  
        <u-navbar title="项"></u-navbar>  
        <u-cell-group>  
            <u-cell-item :title="project.projectName" v-for="(project,index) in projects" :key="index"  
                @click="tapDetail(project.projectId)">  
            </u-cell-item>  
        </u-cell-group>  
    </view>  
</template>


更多关于uni-app 打开utf8编码文件以gbk编码显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

发现在中文上面加一段中文注释就正常了…如： <template>

中文测试

</template>

更多关于uni-app 打开utf8编码文件以gbk编码显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢反馈，我们排查下，后期优化此类问题

什么时候修复呀？ 每次打开文件都是乱码，都要去改一次指定编码重新打开崩溃了！！

在 uni-app 中，如果你需要打开一个 UTF-8 编码的文件，并以 GBK 编码显示其内容，你可以使用以下步骤来实现：

1. 读取文件内容

首先，你需要使用 uni-app 提供的文件读取 API 来读取文件内容。假设你使用的是 uni.chooseFile 来选择文件，然后使用 uni.getFileSystemManager().readFile 来读取文件内容。

uni.chooseFile({
  success: (res) => {
    const filePath = res.tempFilePaths[0];
    uni.getFileSystemManager().readFile({
      filePath: filePath,
      encoding: 'utf8', // 以 UTF-8 编码读取文件
      success: (data) => {
        const utf8Content = data.data;
        // 将 UTF-8 内容转换为 GBK
        const gbkContent = utf8ToGbk(utf8Content);
        console.log(gbkContent);
      },
      fail: (err) => {
        console.error('读取文件失败', err);
      }
    });
  }
});

2. 将 UTF-8 编码转换为 GBK 编码

JavaScript 本身并不直接支持 GBK 编码，因此你需要使用第三方库来进行编码转换。常用的库有 iconv-lite 或 text-encoding。

使用 iconv-lite 进行转换

首先，安装 iconv-lite：

npm install iconv-lite

然后在代码中使用它进行编码转换：

import iconv from 'iconv-lite';

function utf8ToGbk(utf8Content) {
  // 将 UTF-8 字符串转换为 Buffer
  const buffer = Buffer.from(utf8Content, 'utf8');
  // 使用 iconv-lite 将 Buffer 转换为 GBK 编码的字符串
  const gbkContent = iconv.decode(buffer, 'gbk');
  return gbkContent;
}

使用 text-encoding 进行转换

如果你不想使用 iconv-lite，也可以使用 text-encoding 库。

首先，安装 text-encoding：

npm install text-encoding

然后在代码中使用它进行编码转换：

import { TextDecoder } from 'text-encoding';

function utf8ToGbk(utf8Content) {
  // 将 UTF-8 字符串转换为 Uint8Array
  const uint8Array = new TextEncoder().encode(utf8Content);
  // 使用 TextDecoder 将 Uint8Array 转换为 GBK 编码的字符串
  const gbkContent = new TextDecoder('gbk').decode(uint8Array);
  return gbkContent;
}

3. 显示转换后的内容

最后，你可以将转换后的 GBK 内容显示在页面上，或者进行其他处理。

// 假设你有一个 <text> 元素来显示内容
this.gbkContent = gbkContent;
回到顶部