微信小程序app配置指南

Posted 2020-08-14 Runlin

//app.json页面

 

{
//页面注册，有几个页面都要在pages里面注册
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/main/main",
"pages/main1/main1",
"pages/main2/main2",
"pages/main3/main3",
],

//上导航配置及app背景颜色设置
"window":{
//是否开启下拉刷新
"enablePullDownRefresh":true,

//窗口背景颜色，在上拉刷新，下拉刷新，navigate切换页面时可以看见
"backgroundColor":"#eee",

//下拉背景字体、loading 图的样式，仅支持 dark/light,（string形式）
"backgroundTextStyle":"light",

//上导航条背景颜色
"navigationBarBackgroundColor": "orange",

//上导航标题文字
"navigationBarTitleText": "上导航标题文字",

"navigationBarTextStyle":"white" //上导航标题字体颜色，仅支持white和black
},

//底部导航配置
"tabBar": {
"color": "#a9b7b7",//导航字体默认颜色

"selectedColor": "#eb4f38",//导航字体选中时颜色

"borderStyle": "black", //上border颜色，仅支持 black/white（string形式）

"backgroundColor": "rgba(0,0,0,0.4)",//底部导航背景色

"list": [ //导航列表2-5个
{
"pagePath": "pages/index1/index1", //每个导航的网页对应的路径
"text": "首页", //标题
"iconPath": "images/wechat.png", //默认小图标路径
"selectedIconPath": "images/wechatHL.png" //选中时的小图标路径
},

{
"pagePath": "pages/index2/index2",
"text": "日记",
"iconPath": "images/pause.png",
"selectedIconPath": "images/play.png"
},

{
"pagePath": "pages/index3/index3",
"text": "指南",
"iconPath": "images/pause.png",
"selectedIconPath": "images/play.png"
},

]
},

//网络请求超时时间
"networkTimeout": {
"request": 10000,
"downloadFile": 9000,
"uploadFile":8000,
"connectSocket":7000
},

//是否开启debug模式
"debug": true
}

//说明：根据官方文档，上述color和bg-color类型为HexColor即16进制类型，（指定仅支持 black/white，string形式的除外），但实测rbg,rgba和red这些类型目前也支持，但是建议大家还是按文档要求来设置为16进制类型即: #ffffff 类型；
//
//使用时仅需将文件复制下来，根据需求改动即可；
//
//app.json为标准的json文件，所以不能存在有注释，使用的时候需把注释去掉；

 

 

 

//app.js页面

App({
//当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onLaunch: function () {

//onLaunch时调用API从本地缓存中获取数据
var logs = wx.getStorageSync(‘logs‘) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs‘, logs)
},

//获取用户登录信息
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
//获取后台数据
onshow:function(){
wx.request({
url: ‘test.php‘,
data: {
x: ‘xxx‘,
y: ‘yyy‘
},
header: {
‘Content-Type‘: ‘application/json‘
},
success: function(res) {
console.log(res.data)
}
})

},

//设置全局数据
//本页面通过this.globalData即可取得数据
globalData:{
userInfo:null
}
//其他页面可以通过getApp()获取到小程序实例
//其他页面可以通过getApp().globalData.xxx获取到全局数据
})

 

 

 

//app.wxss页面

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

//仅支持:
类:.common
ID:#common
标签：common
多个标签：common1,common2
伪类::after
伪类::before
//不支持层级，如.common > view 或者.common view

//引入新的单位rpx:
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

及新的rem:
rem（root em）: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。

//写在app.wxss里面的样式将被设置为公有的，对于其他页面都是可用的