微信小程序之tabbar_小程序开发 tabbar多语言设置

小弟以前是干ios的，也没有学过h5之类的语言，最近微信小程序出来以后，在网上看到有好多大神对微信小程序推崇备至，都说会有取代app的模式，小弟惶恐至极，生怕饭碗被砸，所以在将公司的活暂时干完以后，就研究了一下微信小程序，发现现在的微信小程序适合开发一下简单的app，我感觉至少最近两年内不会取代原有的大型app（个人感觉，不对勿喷）。不过，为了未雨绸缪还是学习一下微信小程序吧。

工欲善其事，必先利其器，要想开发微信小程序，需要先下载开发工具
下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161230

下载好开发工具后，选择本地小程序项目

然后就可以添加新项目了

appId 是在微信平台注册的AppId
项目名称项目在本地的文件名称
项目目录是本地路径

这里我选择的是无AppId，然后确定，打开是这样的

此时我们可以看到有pages和utils两个文件夹和app.js、app.json和app.wxss三个代码文件，其中，
.js 后缀的是脚本文件，我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API；
.json 后缀的文件是配置文件，我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释；
.wxss 后缀的是样式表文件。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则；
微信小程序会读取这些文件，并生成小程序实例。

好了，言归正传，首先来学习一下app中最重要的tabbar吧。

首先，先创建几个视图控制器在这里相当于,js（创建.js就可以了，运行时会自动创建对应的其他三个文件）

然后在app.json文件中配置tabbar

在pages里写tabbar上的控制器路径，注意，这里的第一个路径就是程序运行后显示的视图，一般都使用tabbar上的第一个视图

window用于设置小程序的状态栏、导航条、标题、窗口背景色。

最后就是我们的tabbar了

// 现在打个tab就会自动补全
"tabBar": {
    // tab 上的文字默认颜色，文档上这是必填的，我试了下不填也可以，默认为灰色，不过既然文档上这么说了建议还是填一下吧
    "color": "#ffffff",
    // tab 的背景色
    "backgroundColor": "#000000",
    // tab 上的文字选中时的颜色
    "selectedColor": "#c8ad45",
    // tabbar上边框的颜色， 仅支持 black/white
    "borderStyle": "black",
    // tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
    "list": [{
      // 此处的pagePath是pages里写的path
      "pagePath": "pages/cntroller/mainTabBar/mainpage",
      // tabbar 上的按钮文字，可以不填，只是tabbar变矮了
      "text": "首页",
      // tabbar 上未选中时的图片
      "iconPath": "images/jblb_owl@2x.png",
      // tabbar 上选中时的图片
      "selectedIconPath": "images/jblb_owldj@2x.png"
    },{
      "pagePath": "pages/cntroller/mainTabBar/message",
      "text": "消息",
      "iconPath": "images/jblb_xx@2x.png",
      "selectedIconPath": "images/jblb_xxdj@2x.png"
    },{
      "pagePath": "pages/cntroller/mainTabBar/my",
      "text": "我的",
      "iconPath": "images/jblb_wd@2x.png",
      "selectedIconPath": "images/jblb_wddj@2x.png"
    }]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

现在看一下官方的定义：

这里注意tab的列表最少2个，最多5个。

再看一下list的定义：

然后来看一下运行结果

这样一个tabbar就大功告成了。