微信小程序开发详细流程 四 (开发前的基本配置)

前面说了代码构成说了一组以app开头的文件,他们就是全局的配置文件

配置

APP.JS文件:

小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null;
    //如:可以把我们的服务器请求url前缀设为全局变量,后面的页面可直接调用,
    urlBase: 'http://lalalaurl.me:6008' + '/lala'
  }
})

如何调用app.js的全局变量

app.json文件:

用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以下是一个包含了所有配置选项的 app.json ：

{
  //所有的页面路径,---粘贴请去掉注释
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  //用于设置小程序的状态栏、导航条、标题、窗口背景色。
  "window": {
    "navigationBarTitleText": "Demo"
  },
  //tab 栏可以切换页面,类似QQ页面底部的选项卡
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  //可以设置各种网络请求的超时时间。
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

注意:上面的代码里的注释需要去掉,在app.json里是不可以加注释的

APP.JS文件:

是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。如果页面有自己的样式表， 则会覆盖公共样式表

用法跟标准css文件无异， 支持 .class #id。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

 更多详细配置介绍可前往官方API查看:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html