微信小程序不支持中文方案解决

在 浏览器的环境下 可以使用 <view class="样式"> , {{ 对象.属性 }} ,v-if="f显示隐藏" ,但是在小程序里面不行,

虽然有翻译插件,难免还是需要按一下快捷键或者操作鼠标, 对于开发人员来说 要懒就 就要一劳永逸的懒懒下去

我以前是写个脚本来做转换, 但是调试微信小程序很痛苦, 然后看了 vue2和vue3的打包方式, 决定从打包方式入手, 在打包时 让中文变为小程序可兼容字母,

思路如下:

将中文单个拆分,然后对每个 字符进行转换, 转换方式为 unicode 的36进制来 替换中文,

let code= "中文".split("").map(v=> "_"   v.charCodeAt(0).toString(36)).join("");  

console.log(code); //   输出   '_ffx_k1z' ;

在每个值之前加上 下划线, 解决不能以数字开头的情况,

Vue2 和 Vue3 的打包方式不同,解决方式 不一样,不过Vue3 相对来说很简单,

我就先提供Vue2的解决方案,

最开始我计划使用 vue.config.js 来解决,但是 Vue2使用 打包方式并不能解决

最终无奈的只能从编译器下手了

首先 找到你的 Hbx 安装目录, 然后找到 plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader 这个文件
完成地址如下,(这是我的地址)

D:\develop\IDEA\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader

在这个目录中导入 附件中的 chineseSupport.js 文件

/webpack-preprocess-loader

• preprocess
• chineseSupport.js
• index.js

然后修改 index.js 文件, 这个文件就是对我们写的代码进行一次转义,在这里来处理 css , 以及 中文

当然 附加里面 也给你提供好了 index 文件, 不过 你可能需要稍加改造, 我的项目比较混杂 我是在.vue 文件中来指定哪些文件需要转义的,如果你希望全量转义 就把限制取消掉就可以了

附件里面还有一个 chinesefields.js 用于将对象的的所有 键 转换为 字母, 用来处理 {{ 对象.属性 }} , 这是处理后端返回的变量名是中文的情况

源文件 必须包含 <!-- 开启全量中文 -->

<template>  
  <!-- 开启全量中文 -->  
  <view class="con tent 哈哈哈 页面" :class="f名称 + '23'" :vvv="'22'">  
    <image class="logo" src="/static/logo.png" />  
    <view class="text-area" :title="f名称" name="名字">  
      <text class="title">{{ f名称 }}</text>  
    </view>  
    <button @click="m点击事件('名称', f名称)">  
      <span>点击 :{{ f名称 }}</span>  
    </button>  
    <view v-for="(item, index) in f数据列表" :key="index">  
      <view>{{ item.f名称 }}</view>  
    </view>  
  </view>  
</template>  

<script>  
import { chineseFields } from '../../assets/chinese-solution/chinesefields.js';  

export default {  
  data() {  
    return {  
      f名称: 'Hello',  
      f数据列表: [  
        {  
          f名称: '张三'  
        }  
      ]  
    };  
  },  
  onLoad() {},  
  mounted() {  
    this.m后端加载();  
  },  
  methods: {  
    m后端加载() {  
      setTimeout(() => {  
        //-> 假设  
        this.f数据列表 = chineseFields([  
          {  
            f名称: '李四'  
          }  
        ]);  
      }, 0);  
    },  
    m点击事件(a名称, fname) {  
      let f字段 = '输出值' + this.f名称;  
      console.log(f字段, a名称, fname);  
    }  
  }  
};  
</script>  

<style lang="scss">  
.哈哈哈 .title {  
  font-size: 40rpx;  
}  
.哈哈哈 {  
  background-color: aqua;  
}  
</style>

输出结果

<template>  
  <!-- 开启全量中文-->  
  <view class="con tent _gqw_gqw_gqw _u45_twi" :class="f_glp_o34   '23'" :vvv="'22'" >  
    <image class="logo" src="/static/logo.png" ></image>  
    <view class="text-area" :title="f_glp_o34" name="名字" >  
      <text class="title" >  
        {{ f_glp_o34 }}  
      </text>  
    </view>  
    <button @click="m_m9l_g6z_fij_fli('名称', f_glp_o34)" >  
      <span>  
        点击 :{{ f_glp_o34 }}  
      </span>  
    </button>  
    <view v-for="(item, index) in f_k1c_jn2_g7r_qy0" :key="index" >  
      <view>  
        {{ item.f_glp_o34 }}  
      </view>  
    </view>  
  </view>  
</template>  
<script>  
import { chineseFields } from '../../assets/chinese-solution/chinesefields.js';  

export default {  
  data() {  
    return {  
      f_glp_o34: 'Hello',  
      f_k1c_jn2_g7r_qy0: [  
        {  
          f_glp_o34: '张三'  
        }  
      ]  
    };  
  },  
  onLoad() {},  
  mounted() {  
    this.m_glq_oa7_gbk_scd();  
  },  
  methods: {  
    m_glq_oa7_gbk_scd() {  
      setTimeout(() => {  
        //-> _fuv_rlq  
        this.f_k1c_jn2_g7r_qy0 = chineseFields([  
          {  
            f_glp_o34: '李四'  
          }  
        ]);  
      }, 0);  
    },  
    m_m9l_g6z_fij_fli(a_glp_o34, fname) {  
      let f_i1j_l9x = '输出值'   this.f_glp_o34;  
      console.log(f_i1j_l9x, a_glp_o34, fname);  
    }  
  }  
};</script>  
<style lang="scss" >  
._gqw_gqw_gqw .title {  
  font-size: 40rpx;  
}  
._gqw_gqw_gqw {  
  background-color: aqua;  
}</style>