微信小程序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里面的样式将被设置为公有的,对于其他页面都是可用的
微信小程序app配置指南的更多相关文章
- 微信小程序 app.json 配置
我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json : { " ...
- 微信小程序app.json文件常用全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段 ...
- 微信小程序 | app.json配置属性
app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. widows: 用于设置小程序的状态栏.导航条.标题.窗口背景色. navig ...
- 两百条微信小程序跳坑指南(不定时更新)
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...
- 微信小程序day01-JSON配置
微信小程序 小程序代码构成 JSON配置WXML模板WXSS样式JS逻辑 1.JSON配置 小程序配置 app.json app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表 ...
- 微信小程序环境配置和开发!!
1.登陆微信公众平台小程序,下载 普通小程序开发者工具.或者 小游戏开发者工具. 2.新建项目需要填以下几点,然后初始demo如下,注意rpx是分成750份的单位. 3.点击预览,用微信扫描二维码,代 ...
- 微信小程序的配置详解
1.配置详解: 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 1>pages 接受一个数组,每一项都是字符串,来指定小 ...
- 微信小程序-APP生命周期与运行机制
QQ讨论群:785071190 开发微信小程序之前需要先了解微信小程序运行机制以及其生命周期,小程序APP生命周期需要先从app.js这个文件开始. 阅读过"微信小程序-代码构成" ...
- 微信小程序https配置
先简单说下什么是https,https与http区别 ,以及https的原理 什么是https 在说HTTPS之前先说说什么是HTTP,HTTP就是我们平时浏览网页时候使用的一种协议.HTTP协议传输 ...
随机推荐
- 机器学习<1>:基础概念
本文是笔者学习李航老师的经典教材<统计学习方法>第一章的学习笔记,分享在此,作为机器学习系列的开篇文章,在本系列中,将会逐一总结介绍主要的机器学习算法的基本原理.基于Python的具体实现 ...
- 轻巧的编辑器:Sublime Text3 user设置
开发到现在,编辑器倒用过不少,VIM.zend.my eclipse.EPP.editplus.notepad++.sublime text 2. 最初使用sublime是同学推荐的,说其何其的好,何 ...
- 【10.11校内测试】【优先队列(反悔贪心)】【莫队】【stl的应用??离线处理+二分】
上次做过类似的题,原来这道还要简单些?? 上次那道题是每天可以同时买进卖出,所以用两个优先队列,一个存买进,一个存卖出(供反悔的队列). 这道题实际上用一个就够了???但是不好理解!! 所以我还是用了 ...
- 【洛谷】NOIP提高组模拟赛Day2【动态开节点/树状数组】【双头链表模拟】
U41571 Agent2 题目背景 炎炎夏日还没有过去,Agent们没有一个想出去外面搞事情的.每当ENLIGHTENED总部组织活动时,人人都说有空,结果到了活动日,却一个接着一个咕咕咕了.只有不 ...
- Linux知识(7)----远程登录 和远程拷贝
一.远程登录 1.安装客户端 可以使用ssh(Secure Shell(缩写为SSH))来进行远程的登录.安装ssh的命令为: sudo apt-get install openssh-server ...
- react父子组件数据传递
子传父 1.首先父组件设定一个自定义函数 getChildDatas = (values) => { //...业务代码 } 2.将该函数暴露在子组件的引用上 <Child getChil ...
- js的栈与堆
JavaScript中基本数据类型和引用数据类型的区别 这是我引用别人的 觉得很好 1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本 ...
- erlang debug
http://www.cnblogs.com/goldli/archive/2011/03/08/1976998.html erlang 模块文件 helloworld.erl 文件内容: -modu ...
- Hibernate: Implicit & Explicit Polymorphism
As I was going through the various inheritance strategies in Hibernate, I came across the ‘class’ el ...
- [runtime] initialize方法讲解
+ (void)initializeDescription(描述) Initializes the class before it receives its first message. 在这个 ...