在 浏览器的环境下 可以使用 <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>
