小程序全局配置笔记。

桃扇骨 2023-02-21 04:44 5阅读 0赞

[官方配置文档][Link 1]  
**app.json**

{ 
        "pages": [ //所有页面路径，可分包，详见文档
            "pages/index/index"
        ],
        "window": {  //整体页面配置
            "backgroundTextStyle": "light",
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTitleText": "",
            "navigationBarTextStyle": "black",
            "navigationStyle": "default", //设为custom可自定义导航栏
            "backgroundColor": "#eeeeee",
        },
        "tabBar": { 
            "color": "#232323", //文字默认颜色
            "selectedColor": "#232323",//选中时文字颜色
            "position":"bottom" //top可显示在上方，但不可设置图标
            "list": [
                { 
                    "pagePath": "pages/index/index", //必填地址
                    "text": "主页", //文字
                    "iconPath": "/public/img/footer/f1.png",//图标
                    "selectedIconPath": "/public/img/footer/f1_cur.png"//选中图标
                },
                { 
                    "pagePath": "pages/exploration/index/index",
                    "text": "发现",
                    "iconPath": "/public/img/footer/f2.png",
                    "selectedIconPath": "/public/img/footer/f2_cur.png"
                },
                { 
                    "pagePath": "pages/member/car/car",
                    "text": "购物车",
                    "iconPath": "/public/img/footer/f3.png",
                    "selectedIconPath": "/public/img/footer/f3_cur.png"
                },
                { 
                    "pagePath": "pages/member/index/index",
                    "text": "我的",
                    "iconPath": "/public/img/footer/f4.png",
                    "selectedIconPath": "/public/img/footer/f4_cur.png"
                }
            ]
        },
        "plugins": {  //官方提供的插件，直播/腾讯视频
            "live-player-plugin": { 
                "version": "1.0.15",
                "provider": "wx2b03c6e691cd7370"
            },
            "tencentvideo": { 
                "version": "1.3.8",
                "provider": "wxa75efa648b60994b"
            }
        },
        "navigateToMiniProgramAppIdList": [
            "wxc37a2312357d1baef"
        ],
        "usingComponents": {   //全局组件，可直接在任何页面引用，不需要再额外json引用
            "tec-support": "/component/tecSupport/tecSupport",
            "nav-bar": "/component/navBar/navBar"
        },
      // "sitemapLocation": "sitemap.json" //爬虫索引
    }

**app.wxss**  
全局样式  
**app.js**  
项目入口文件：[官方文档][Link 2]

//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
      }
    })

onLaunch: function(options) { 
    		const vm = this;
    		//每次初始化小程序都去拿用户信息（未注册的用户则拿不到，但是可以继续浏览，不会报错）
    		getUserInfo();
    
    		/******************导航相关******************/
    		// 判断是否由分享进入小程序
    		if (options.scene == 1007 || options.scene == 1008 || options.scene == 1048) { 
    			this.globalData.share = true
    		} else { 
    			this.globalData.share = false
    		};
    		//获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
    		//这个最初我是在组件中获取，但是出现了一个问题，当第一次进入小程序时导航栏会把
    		//页面内容盖住一部分,当打开调试重新进入时就没有问题，这个问题弄得我是莫名其妙
    		//虽然最后解决了，但是花费了不少时间
    		wx.getSystemInfo({ 
    			success: (res) => { 
    				this.globalData.height = res.statusBarHeight
    			}
    		})
    		/******************导航相关 end******************/
    
    		getMiniConfig(function(res) { 
    			const _data = res.retval.data
    			for (let i in _data) { 
    				vm.globalData.miniConfigData[i] = _data[i]
    			}
    		})
    
    		//启动云开发
    		wx.cloud.init()
    
    	},

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html