微信小程序app配置指南

//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里面的样式将被设置为公有的,对于其他页面都是可用的

时间: 2024-08-04 20:36:04

微信小程序app配置指南的相关文章

微信小程序全局配置知识点

疫情在家无聊总结一下微信小程序一些基础小知识希望对初学者有帮助.让我们一起对疫情“逆战”吧! 1.全局配置 ?程序根?录下的 app.json ?件?来对微信?程序进?全局配置.?件内容为?个JSON 对象 1.1 pages ?于指定?程序由哪些??组成,每?项都对应?个??的 路径(含?件名) 信息.?件名不需要写?件后缀,框架会?动去寻找对于位置的 .json, .js, .wxml,.wxss 四个?件进?处理 有多少个??,此处就应该有多少个选项 数组的第?项代表?程序的初始??(??

微信小程序的配置详解

1.配置详解: 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 1>pages 接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成.每一项代表对应页面的[路径+文件名]信息,数组的第一项代表小程序的初始页面.小程序中新增/减少页面,都需要对 pages 数组进行修改. 文件名不需要写文件后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合. 2>window 用于设置小程序的

vscode 开发微信小程序环境配置

插件 minapp 微信小程序标签.属性的智能补全(同时支持原生小程序.mpvue 和 wepy 框架,并提供 snippets) wechat-snippet 微信小程序代码辅助,代码片段自动完成 wepy snippets 微信小程序wepy框架,weui框架代码片段 文件解析语言类型设置 wxml 通过 html 进行解析,setting.json中添加 "html.validate.styles": false(禁止内联样式报错) wxs 直接设置 JavaScript 作为解

微信小程序APP生命周期

小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onShow ----当小程序启动,或从后台进入前台显示,会触发 onShow onHide ----当小程序从前台进入后台,会触发 onHide onError ----当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并

微信小程序避坑指南

如果对小程序还不熟悉,建议先看下另一篇小程序简介 1. 基础库和微信版本对应关系 iOS 客户端版本 基础库版本 6.7.2 2.3.0 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6 2.0.9 6.6.2 1.9.97 6.6.1 1.9.9 6.6.0 1.9.4 6.5.22 1.7.4 6.5.16 1.6.8 6.5.13 1.5.8 6.5.10 1.4.4 6.5.9 1.3.0 6.5.8 1.2.6 Android 客户端版本 基础库版本 6.7.2 2.3.0

微信小程序全套使用指南

首先说一下,我对小程序的思考.我觉得小程序解决了以下的问题: 1.手机内存不足,但是又想装那些使用频次低的app. 2.公众号和服务号已经没法满足需求了. 3.创业团队开发原生app成本太高. 在如果小程序发展顺利,那么Android开发人员会受到一定的冲击,前端会进一步获得优势. 我个人觉得应该了解一下小程序的开发,在这之前我们要先熟悉小程序的使用. 如何获得小程序入口 1.小程序入口是自动出现在微信「底栏」的「发现」一栏的最下方 如果打开微信的你并没有发现多了这个功能入口,那么你可以先检查微

微信小程序 json 配置

页面级别配置 优先级 高于 全局配置. 具体配置项:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html 全局配置 app.json 1.pages:配置的第一个页面是 程序默认展示的页面(程序入口页).2.window: a. navigationBarBackgroundColor : 导航栏背景颜色. b. navigationBarTextStyle : 导航栏标题颜色,仅支持 black/white

微信小程序 app注册小程序+page注册页面代码一

注册小程序代码:app.js //app.js App({ onLaunch: function(){ var log = wx.getStorageSync("logs") || [] log.unshift(Date.now()) wx.setStorageSync("logs", log) wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } })

微信小程序项目 配置开发环境及全面了解小程序

一.下载开发工具 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 二.全面了解小程序 1.根据官方提供的简易教程了解小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 2.了解小程序框架 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html 3.了解小程序组件 https://mp.weixin.qq.c