Cao Note

外观

小程序配置 ​

小程序配置 ​

1.全局配置 app.json ​

格式很严格，不能写注释

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

pages ​

小程序页面的路径，路径和页面要一一对应

jsx
"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/cart/cart",
    "pages/my/my",
    "pages/cate/cate",
    "pages/order/order"
  ],
"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/cart/cart",
    "pages/my/my",
    "pages/cate/cate",
    "pages/order/order"
  ],

entryPagePath ​

jsx
"entryPagePath": "pages/my/my",
"entryPagePath": "pages/my/my",

小程序默认启动的首页

如果没有这个配置，默认是 pages 中的第一个，如果有这个选项启动页就是这个配置

window ​

jsx
"window": {

   "navigationBarBackgroundColor": "#ff0000",

   "navigationStyle": "custom",

   "navigationBarTextStyle": "white",

   "navigationBarTitleText": "小u商城",

   "backgroundColor": "#00ff00",

   "backgroundTextStyle": "light",

   "enablePullDownRefresh": true

  },
"window": {

   "navigationBarBackgroundColor": "#ff0000",

   "navigationStyle": "custom",

   "navigationBarTextStyle": "white",

   "navigationBarTitleText": "小u商城",

   "backgroundColor": "#00ff00",

   "backgroundTextStyle": "light",

   "enablePullDownRefresh": true

  },

tabbar ​

jsx
"tabBar": {

​    "color": "#000000",

​    "selectedColor": "#ff0000",

​    "backgroundColor": "#ffff00",

   "list": [{

​    "pagePath": "pages/index/index",

​    "text": "首页",

​    "iconPath": "/static/tabs/index.png",

​    "selectedIconPath": "/static/tabs/indexFull.png"

   },{

​    "pagePath": "pages/cart/cart",

​    "text": "购物车",

​    "iconPath": "/static/tabs/cart.png",

​    "selectedIconPath": "/static/tabs/cartFull.png"

   },{

​    "pagePath": "pages/my/my",

​    "text": "我的",

​    "iconPath": "/static/tabs/my.png",

​    "selectedIconPath": "/static/tabs/myFull.png"

   }]

  },
"tabBar": {

​    "color": "#000000",

​    "selectedColor": "#ff0000",

​    "backgroundColor": "#ffff00",

   "list": [{

​    "pagePath": "pages/index/index",

​    "text": "首页",

​    "iconPath": "/static/tabs/index.png",

​    "selectedIconPath": "/static/tabs/indexFull.png"

   },{

​    "pagePath": "pages/cart/cart",

​    "text": "购物车",

​    "iconPath": "/static/tabs/cart.png",

​    "selectedIconPath": "/static/tabs/cartFull.png"

   },{

​    "pagePath": "pages/my/my",

​    "text": "我的",

​    "iconPath": "/static/tabs/my.png",

​    "selectedIconPath": "/static/tabs/myFull.png"

   }]

  },

2.页面配置 page.json ​

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

json
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#00ff00",
  "navigationBarTitleText": "首页",
  "navigationBarTextStyle": "black"
}
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#00ff00",
  "navigationBarTitleText": "首页",
  "navigationBarTextStyle": "black"
}

3 sitemap 的配置（了解） ​

json
{
  "rules": [
    {
      "action": "disallow",
      "page": "/pages/my/my"
    },
    {
      "action": "disallow",
      "page": "/pages/order/order"
    }
  ]
}
{
  "rules": [
    {
      "action": "disallow",
      "page": "/pages/my/my"
    },
    {
      "action": "disallow",
      "page": "/pages/order/order"
    }
  ]
}

获取场景值 ​

对于小程序，可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中获取上述场景值。

路由封装 ​

  1. 在 app.js 入口文件写请求地址；
js
App({
  globalData: {
    currentEnv: 'prod', //当前环境
    host: '',
    hostServe: {},
    authorization: '', // token
  },
  onLaunch: function () {
    this.globalData.host = this.globalData.hostServe[this.globalData.currentEnv]
  },
})
App({
  globalData: {
    currentEnv: 'prod', //当前环境
    host: '',
    hostServe: {},
    authorization: '', // token
  },
  onLaunch: function () {
    this.globalData.host = this.globalData.hostServe[this.globalData.currentEnv]
  },
})
  1. 创建 util/common.js 文件，里面写封装路由的方法
js
const APP = getApp()

export const request = (url, opt = {}) => {
  const origin = APP.globalData.host
  const contentType = opt.contentType || 'application/json'
  const authorization = APP.globalData.authorization
  const data = opt.data || ''
  const method = opt.method || 'GET'
  const accessToken = wx.getStorageSync('access_token') || ''

  wx.request({
    url: origin + url,
    method,
    header: {
      'Content-Type': contentType,
      'Authorization': authorization,
      'time': Date.now().toString(),
      'token': accessToken,
    },
    data,
    dataType: 'json',
    success: (res) => {
      if (!res.data) return
      opt.success && opt.success(res.data)
    },
    fail: () => {
      wx.showToast({
        title: '网络错误, 请稍后再试',
        duration: 1500
      })
    }
  })
}
const APP = getApp()

export const request = (url, opt = {}) => {
  const origin = APP.globalData.host
  const contentType = opt.contentType || 'application/json'
  const authorization = APP.globalData.authorization
  const data = opt.data || ''
  const method = opt.method || 'GET'
  const accessToken = wx.getStorageSync('access_token') || ''

  wx.request({
    url: origin + url,
    method,
    header: {
      'Content-Type': contentType,
      'Authorization': authorization,
      'time': Date.now().toString(),
      'token': accessToken,
    },
    data,
    dataType: 'json',
    success: (res) => {
      if (!res.data) return
      opt.success && opt.success(res.data)
    },
    fail: () => {
      wx.showToast({
        title: '网络错误, 请稍后再试',
        duration: 1500
      })
    }
  })
}

Copyright © 2024-present xiaocao