根目录下的app.xxx文件使用

小程序中的所有页面必须预先放在根目录下的【app.json】下面，比如你在【pages】中添加了三个页面（buy，group，login）则在【app.json】中加入。哪个页面放在第一位，则程序优先加载那个页面

  "pages": [
    "pages/buy/buy",
    "pages/group/group",
    "pages/login/login"
  ]

程序【app.json】中的window用于设置导航栏内容，此处设置是全局。如果需要控制buy页面的导航栏显示，则需要在buy目录下创建buy.json文件，重写即可。

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#313952",
    "navigationBarTextStyle": "white"
  }

程序【app.json】中的tabBar用户设置底部栏内容

  "tabBar": {
    "color": "#646885",
    "selectedColor": "#ffffff",
    "borderStyle": "black",
    "backgroundColor": "#313952",
    "list": [
      {
        "pagePath": "pages/buy/buy",
        "text": "云云云",
        "iconPath": "images/buy/buy-nor.png",
        "selectedIconPath": "images/buy/buy.png"
      },
      {
        "pagePath": "pages/group/group",
        "text": "团团团",
        "iconPath": "images/group/group.png",
        "selectedIconPath": "images/group/group.png"
      }
    ]
  }

项目中需要在group文件中用到文件Utils中的功能，为了以后其他地方引用方便，这里需要把Utils文件对外公开出来，放入到【app.js】文件中

//app.js
// 默认或者./  当前目录下寻找utils
// ../  上级目录下寻找
import Util from "./utils/util.js"
import Config from "./config.js"
import UtilOne from "./utils/utilOne.js"
App({
  // 全局实例定义
  data: {
    userInfo: null
  },
  onLaunch: function () {
    console.log(Config.TimeHiden + '---' + Util.StringUtil.is_number(1))
    console.log('Util' + Util.role_disponse(1))
    console.log('UtilOne' + UtilOne.role_disponse(1))
  },
  'Util': Util,
  Config:Config
})

这时在group文件中使用如下

// 获取全局实例
var app = getApp();
let Util = getApp().Util;
Page({
  data:{
},
onLoad:function(options){
let msg1 = getApp().Util.role_disponse(1)
let msg2 = app.Util.role_disponse(1)
let msg3 = Util.role_disponse(1)
}
})

使用以上功能的前提是需要把Utils中的方法暴露出来，在【utils.js】文件中如下

// 角色 级别 处理
function role_disponse(role) {
  let rank = role + ''
  switch (rank) {
    case '1':
      return '管理员'
      break;
    default:
      return '--'
      break;
  }
}
// 字符串
function is_empty(content){
  return content == null || content.length == 0
}
module.exports = {
  "role_disponse": role_disponse,
  "is_empty": is_empty
} 
----这里有另外一种写法，在utilOne.js中编写----
export default class utilOne {
  static role_disponse(role) {
    let rank = role + ''
    switch (rank) {
      case '1':
        return '管理员'
        break;
      default:
        return '--'
        break;
    }
  }
  // 字符串
  static is_empty(content) {
    return content == null || content.length == 0
  }
}

可以直接编写全局配置文件config.js

// 保存在本地的数据  更新了需要对应更新数据
module.exports = {
  // 正式环境
  Host:'https://www.xxxx.me',
  // 测试环境
  // Host: 'https://sanbox.xxxx.me',

  UsernameKey: 'UsernameKey',
  UserdataKey: 'UserdataKey',
  UsercookieKey: 'UsercookieKey',
  UserWXLoginCodeKey: 'UserWXLoginCodeKey',
  // 用户添加卡否?
  UseraddbankcardKey: 'UseraddbankcardKey',
  // 用户提现否？
  UseramountmoneyKey: 'UseramountmoneyKey',
  UsernewmsgKey: 'UsernewmsgKey',

  TimeHiden:4,
  TimeLook:30
};

5、【app.wxss】样式设置
在【app.wxss】中设置的样式是全局有效，如果需要引入自定义的样式则如下

.mr10 {
  margin-right: 10px;
}
.ml10 {
  margin-left: 10px;
}
.loading-img {
  width: 48rpx;
  height: 48rpx;
}
/** 导入基础布局文件 **/
@import "utils/flex.wxss";
@import "base.wxss";

6、如果需要用到的文件(JJUtil.js)在此目录下

image.png

你需要在文件(test.js)中使用，择需要这样引入才行

import JJUtil from "../../utils/JJUtil.js"

最后编辑于：2020.05.17 12:52:07