1.在main.js中引入vue-i18n

//引入中英文
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
const i18n = new VueI18n({locale: 'zh',  // 默认选择的语言silentFallbackWarn: true, //在初始化VueI18n实例时禁止设置这些警告（同时保留那些警告给定键完全没有翻译的警告）。// 加载语言文件的内容messages: {'zh': require('./lang/zh.js').lang,'en': require('./lang/en.js').lang}
})
Vue.prototype._i18n = i18n//微信tabbar调用函数
Vue.mixin({methods:{setTabBarIndex(index) {if (typeof this.$mp.page.getTabBar === 'function' &&this.$mp.page.getTabBar()) {this.$mp.page.getTabBar().setData({selected: index,list:i18n.t('tabbar.list')})}},}
})//记得导出
const app = new Vue({store,i18n,...App
})
app.$mount()export default i18n

2.新建lang文件夹，新建zh.js和en.js(中英文对应)

3.在页面中调用

//template中
<template>
<view>
<!-- 切换中英文 -->
<view class="lang flex vertical-center" @click="changeLang"><image class="langImg" :src="isZh?'../../static/images/zh.png':'../../static/images/en.png'" mode="widthFix"></image>
</view><!-- 重置 --><view class="flex-1 flex level-center vertical-center" @click="reset">{{$t('wechat.w114')}}</view><!-- 确定 --><view class="flex-1 flex level-center vertical-center font-color-0 bg-1A8CFF" @click="confirm">{{$t('wechat.w38')}}</view>
<view/>
</template>export default {data() {return {isZh: true,//data数据中需要加thisstateList3: [{value: '',label: this.$t('wechat.w91'), //所有平台isSelect: true},{value: 1,label: '萤石云', //萤石云isSelect: false}],}},onShow() {//初始化为英文/中文if (uni.getStorageSync('lang') === 'en') {this.isZh = falsethis.$i18n.locale = 'en'uni.setStorageSync('lang', 'en')} else {this.isZh = truethis.$i18n.locale = 'zh'uni.setStorageSync('lang', 'zh')}}，methods: {changeLang() {let lang = uni.getStorageSync('lang')// console.log('切换', lang)if (lang === 'zh') {this.$i18n.locale = 'en'this.isZh = falseuni.setStorageSync('lang', 'en')} else {this.$i18n.locale = 'zh'this.isZh = trueuni.setStorageSync('lang', 'zh')}uni.reLaunch({url: '/pages/login/index'})}}

4.修改tabbar-->使用微信官方的自定义tabbar

 "tabBar": {"custom": true, //自定义导航栏"color": "#7A7E83","selectedColor": "#1A8CFF","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/facility/index","iconPath": "static/images/equipment_02.png","selectedIconPath": "static/images/equipment_01.png","text": "设备"}, {"pagePath": "pages/alarm/index","iconPath": "static/images/alarm_02.png","selectedIconPath": "static/images/alarm_01.png","text": "报警"},{"pagePath": "pages/my/index","iconPath": "static/images/my_02.png","selectedIconPath": "static/images/my_01.png","text": "我的"}]},

5.在每个tabbar页面

onShow() {this.setTabBarIndex(0);//数字对应tabbar的位置// 修改头部标题uni.setNavigationBarTitle({title: this.$t('tabbar.my')});// 修改底部导航（也可以直接换自定义tabbar）uni.setTabBarItem({index: 0,text: this.$t('tabbar.my')});
},

6.建立自定义的tabbar文件（名字不可错）

7.custom-tab-bar--->index.js

Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#1A8CFF",list: [{pagePath: "/pages/facility/index",iconPath: "/static/images/equipment_02.png",selectedIconPath: "/static/images/equipment_01.png",text: "设备"}, {pagePath: "/pages/alarm/index",iconPath: "/static/images/alarm_02.png",selectedIconPath: "/static/images/alarm_01.png",text: "报警"},{pagePath: "/pages/my/index",iconPath: "/static/images/my_02.png",selectedIconPath: "/static/images/my_01.png",text: "我的"}]},attached() {},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})// 解决微信小程序闪烁问题// this.setData({//    selected: data.index// })}}
})

custom-tab-bar--->index.json

{"component": true
}

custom-tab-bar--->index.wxml

<cover-view class="tab-bar"><cover-view class="tab-bar-border"></cover-view><cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}"data-index="{{index}}" bindtap="switchTab"><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image><cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view></cover-view>
</cover-view>

custom-tab-bar--->index.wxss

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);cursor: pointer;
}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5);
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;
}.tab-bar-item cover-image {width: 22px;height: 22px;/* border: 1px solid red; */margin: 6px 0 4px 0;}.tab-bar-item cover-view {width: 36px;font-size: 10px;/* border: 1px solid red; */
}

微信小程序中英文国际版相关推荐

WordPress版微信小程序2.6版发布
WordPress版微信小程序的完善和升级的工作一直都在进行中,我争取保证一个月可以出一个版本,希望通过一点点的改进,让这个开源产品日趋完美. 同时,pro版WordPress微信小程序也在紧锣密鼓的 ...
h5app多功能商城源码可二开微信小程序商城开源版分享
基于ThinkPhp6.0+uniapp 开发的一套新零售商城系统.集客户关系管理+营销电商系统,能够真正帮助企业基于微信公众号.小程序.wap.pc等,实现会员管理.数据分析,精准营销的电子商务管理 ...
wordpress rest api 登录_WordPress版微信小程序3.5版发布
最近花时间对WordPress版微信小程序做了一些完善和调整,修复不少程序的问题.一个程序的完善是持续和渐进的,没有最好,只有更完善.虽然会采纳一些用户的建议和意见,但我会从一个产品角度去考虑,哪些功 ...
vue中进行判断不同字段的判断，主要是区分于微信小程序和网页版之间写法
1 网页版的vue字段的判断的写法如下: v-if="item.scoreItemState == 0" v-if="item.scoreItemState == 1&q ...
小程序 pc版缓存路径_WordPress版微信小程序3.5版发布
最近花时间对WordPress版微信小程序做了一些完善和调整,修复不少程序的问题.一个程序的完善是持续和渐进的,没有最好,只有更完善.虽然会采纳一些用户的建议和意见,但我会从一个产品角度去考虑,哪些功 ...
校园服务小程序源代码分享园服务微信小程序全开源版源码-包含服务端
2021年4月17日更新严正声明: [请一定勿将程序用户商业用途且包括用此程序去参加各类学校的竞赛或者其他以获取名利而参与的竞赛等,一旦被原作者发现将会面临严重的侵权责任后果,特别是被获奖后会遭 ...
如何使用框架进行微信小程序开发(详细版！)
一.mpVue(Vue in Mini Program) 1.1 简介 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架 2.融合了原生小程序和Vue.js的特点 3.可完全组件化开发 ...
用云开发做的校园跑腿微信小程序（商用版、毕设版），有视频教程
部分效果截图简约风格篇幅有限,就不一一的展示了后台数据管理界面教程讲解视频本项目主要是使用云开发技术实现.云开发技术对于开发微信小程序有很多优势.比如免运维.无需搭建服务器等等.特别适合小型 ...
[抓包] 微信小程序（PC版）如何抓包
本文抓包环境: Win10,微信(PC版本) v3.9.2.20,Burp Suite v1.7.32,Proxifier v3.42 不需要使用安卓模拟器一.下载安装好Burp Suite,Pro ...

微信小程序中英文国际版

1.在main.js中引入vue-i18n

2.新建lang文件夹，新建zh.js和en.js(中英文对应)

3.在页面中调用

4.修改tabbar-->使用微信官方的自定义tabbar

5.在每个tabbar页面

6.建立自定义的tabbar文件（名字不可错）

7.custom-tab-bar--->index.js

微信小程序中英文国际版相关推荐

最新文章

热门文章