tabBar 配置项指定 tab 栏的表现

最新推荐文章于 2024-06-03 08:24:23 发布

sturgsslecofwe

最新推荐文章于 2024-06-03 08:24:23 发布

阅读量2k

点赞数

在职工作，更新较慢

全局配置

app.json 文件用来对微信小程序进行全局配置。

pages 类型为 String Array 是页面路径列表，创建目录和更改时会自动更改文件。

用于指定小程序由哪些页面组成，每一项都对应一个页面的路径+文件名信息。

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

//导航栏背景颜色只能用#---- 格式"navigationBarBackgroundColor": “#FF7F50”,

效果图

//导航栏标题颜色，仅支持 black / white
“navigationBarTextStyle”: “white”,

//导航栏标题文字
“navigationBarTitleText”: “WeChat 技术博文头条”,

//导航栏样式，仅支持以下值：
//默认样式 default 展示导航栏标题文字
//custom 自定义导航栏，关闭导航栏文字显示只保留右上角胶囊按钮。
“navigationStyle”:“custom”,

//下拉 loading 的样式，仅支持 dark / light
“backgroundTextStyle”: “light”,

//顶部窗口的背景色，仅 iOS 支持
“backgroundColorTop”:"#ffffff",

//底部窗口的背景色，仅 iOS 支持
“backgroundColorBottom”:"#ffffff",

//是否全局开启下拉刷新。true 默认false
“enablePullDownRefresh”:true,

//页面上拉触底事件触发时距页面底部距离，单位为px。 未测试出效果
“onReachBottomDistance”:100,

//设置为 true 则页面整体不能上下滚动。
//只在页面配置中有效，无法在 app.json 中设置
“disableScroll”:true,

//禁止页面右滑手势返回设true禁止右滑动返回
“disableSwipeBack”:false

tabBar 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

“tabBar”: {
“color”: “#FF0000”,
“selectdColor”:"#FF0000",
“backgroundColor”:"#FDF5E6",
“borderStyle”:“white”,
“position”:“bootm”,
“list”: [
{
“pagePath”: “pages/index/index”,
“text”: “主页”,
“iconPath”: “images/tabBar/home_dark.png”,
“selectedIconPath”: “images/tabBar/home_bright.png”
},
{
“pagePath”: “pages/userInfo/userInfo”,
“text”: “个人信息”,
“iconPath”: “images/tabBar/user_dark.png”,
“selectedIconPath”: “images/tabBar/user_bright.png”
}
]
}

代码效果图
仅支持十六进制颜色 (只能填写 ‘#00000’ 类似这样的颜色标记)

color HexColor 是 tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor HexColor 是 tab 的背景色，仅支持十六进制颜色
borderStyle String 否 black tabbar上边框的颜色，仅支持 black / white
list Array 是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position String 否 bottom tabBar的位置，仅支持 bottom / top
list 接受一个数组，只能配置最少2个、最多5个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性类型必填说明
pagePath String 是页面路径，必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 否图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 postion 为 top 时，不显示 icon。
selectedIconPath String 否选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 postion 为 top 时，不显示 icon。

官方示意图

图片存储

图标下载地址推荐 Iconfont-阿里巴巴矢量图标库 github帐号可登陆：https://www.iconfont.cn/

selectedColor 点击时tab上的文字切换背景色。测试未达到想过，百度无果。如有知道的请留言，谢谢。

permission

小程序接口权限相关设置。字段类型为 Object；

页面配置

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

配置示例

{
“navigationBarBackgroundColor”: “#ffffff”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “微信接口功能演示”,
“backgroundColor”: “#eeeeee”,
“backgroundTextStyle”: “light”
}
页面配置项列表

属性类型默认值描述最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle String white 导航栏标题颜色，仅支持 black / white
navigationBarTitleText String 导航栏标题文字内容
navigationStyle String default 导航栏样式，仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮微信客户端 7.0.0
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新。
详见 Page.onPullDownRefresh
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px。
详见 Page.onReachBottom
disableScroll Boolean false 设置为 true 则页面整体不能上下滚动。
只在页面配置中有效，无法在 app.json 中设置
disableSwipeBack Boolean false 禁止页面右滑手势返回微信客户端 7.0.0
页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。

微信小程序登录后台java 代码已搞定。测试完成上传 2019.1.11

登录后台代码 java

//utils 包
public class Wx {
private String openid;
private String session_key;

public String getOpenid() {
    return openid;
}

public void setOpenid(String openid) {
    this.openid = openid;
}

public String getSession_key() {
    return session_key;
}

public void setSession_key(String session_key) {
    this.session_key = session_key;
}

}

//controller 包
@GetMapping(“login”)
@ResponseBody
public String login(String code){
//测试版本创建测试号
String appid =""; //测试号appId
String SECRET =""; //测试号appsecret
//微信的接口
String url = “https://api.weixin.qq.com/sns/jscode2session?appid=”+appid+
“&secret=”+SECRET+"&js_code="+ code +"&grant_type=authorization_code";

    RestTemplate restTemplate = new RestTemplate();
    //进行网络请求，访问url接口
    ResponseEntity<String>  responseEntity1 = restTemplate.exchange(url, HttpMethod.GET,null,String.class);

   // System.out.println(responseEntity1);
    //根据返回值进行后续操作
    if (responseEntity1 !=null && responseEntity1.getStatusCode() == HttpStatus.OK){
        String sessionData = responseEntity1.getBody();
        Gson gson = new Gson();
        //解析从微信服务器获得 openId 和 session_key;
        Wx wxinfo=gson.fromJson(sessionData, Wx.class);
        //获取唯一标识
        String openid = wxinfo.getOpenid();
        //获取会话密钥
        String session_key = wxinfo.getSession_key();
       // System.out.println("openid:"+openid+"/session_key="+session_key);


    }

    return "";
}

页面加载时读取后台数据

用户信息列表

/**

生命周期函数–监听页面加载
*/
onLoad: function(options) {
var that = this;
wx.request({
url: ‘http://192.168.1.139:8080/user/infoList’,
method: “GET”,
success: function(res) {
if (res.data.code == 1) {
console.log(res);
//获取信息集合
that.setData({
//信息集合
userLisr: res.data.data.list,
//页码
pageNum: res.data.data.pageNum,
//总页数
pages: res.data.data.pages
})
}else{
wx.showToast({
//提示信息
title: “加载失败”,
//图标
//icon: ‘loading’,
image: ‘…/…/images/resultImg/shibaiBright.png’,
//持续时间默认毫秒
duration: 2000,
//是否显示透明蒙层，防止触摸穿透，默认：false
mask: true
})
}
},
fail: function(error) {
console.log(error);
}
})
},
json 数据文章地址 https://blog.csdn.net/qq_35226176/article/details/86348186

wx.showToast(）弹窗参考https://blog.csdn.net/qq_35226176/article/details/86348052

下拉刷新分页读取数据

/**

页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function() {
var that = this;
//console.log(“刷新了”)

//如果当前页数大于等于总页数则归零
if (this.data.pageNum >= this.data.pages) {
  this.setData({
    pageNum: 0
  })
}else{
  this.setData({
    pageNum: this.data.pageNum + 1
  })
}

//获取data里的值
// console.log(this.data.pageNum);

wx.request({
  url: 'http://192.168.1.139:8080/user/infoList',
  data: {
    page: this.data.pageNum
  },
  method: "GET",
  success: function (res) {
    if (res.data.code == 1) {
      // console.log(res);
      //获取信息集合
      that.setData({
        //信息集合
        userLisr: res.data.data.list,
        //页码
        pageNum: res.data.data.pageNum
      })
    //关闭下拉刷新
      wx.stopPullDownRefresh()
    } else {
      wx.showToast({
        //提示信息
        title: "加载失败",
        //图标
        //icon: 'loading',
        image: '../../images/resultImg/shibaiBright.png',
        //持续时间 默认毫秒
        duration: 2000,
        //是否显示透明蒙层，防止触摸穿透，默认：false
        mask: true
      })
    }
  },
  fail: function (error) {
    console.log(error);
  }
})

作者：道友请留步s
来源：CSDN
原文：https://blog.csdn.net/qq_35226176/article/details/85984691
版权声明：本文为博主原创文章，转载请附上博文链接！

sturgsslecofwe

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
tabBar 配置项指定 tab 栏的表现

在职工作，更新较慢全局配置app.json 文件用来对微信小程序进行全局配置。pages 类型为 String Array 是页面路径列表，创建目录和更改时会自动更改文件。用于指定小程序由哪些页面组成，每一项都对应一个页面的路径+文件名信息。window 用于设置小程序的状态栏、导航条、标题、窗口背景色。//导航栏背景颜色只能用#---- 格式"navigat...
复制链接

扫一扫