微信小程序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协议传输 ...
随机推荐
- 【推导】The 16th UESTC Programming Contest Preliminary L - Foxtrot
题意:有n瓶药剂,其中只有一瓶药剂有毒.让你用最少的小白鼠试出哪瓶有毒.你只有一次给任意只小白鼠各喂食任意种类药剂的机会. m只老鼠就能对应2^m种“生死状态”的组合,给每种状态分配一个种类的药剂,然 ...
- java设计模式(六)策略模式
适用于同一操作的不同行为,策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们可以相互替换,让算法独立于使用它的客户而独立变化,具体应用场景如第三方支付对接不同银行的算法. 要点:1)抽象策 ...
- bzoj 3306
以1号节点为根,弄出DFS序,我们发现,对于一个询问:(rt,u),以rt为根,u节点的子树中的最小点权,我们可以根据rt,u,1这三个节点在同一条路径上的相对关系来把它转化为以1为根的在DFS序上的 ...
- Atlas 安装运行随笔
Atlas 是一个用于数据库负载均衡 ,读写分离的中间件,他实现了mysql 的语法,对于普通调用DAL 层来说的话,和mysql 是一样的. 一,安装1,从源码安装 , 可以参考 http://bl ...
- maven -- 问题解决(一)解决eclipse中maven项目配置过程和maven install时出现的问题
问题一: 配置项目时出现的错误: error: Cannot change version of project facet Dynamic Web Module to 2.5. error: One ...
- Codeforces Round #357 (Div. 2) B. Economy Game 水题
B. Economy Game 题目连接: http://www.codeforces.com/contest/681/problem/B Description Kolya is developin ...
- NGINX 如何防盗链
一.安装Nginx: 1.解决依赖关系 # yum groupinstall "Development Tools" "Server Platform Deveopmen ...
- Tasker to proximity screen off
If you are using proximity screen off pro or smart screen off, you may know how convenient it is to ...
- 委托、多播委托、泛型委托Func,Action,Predicate,ExpressionTree
当试图通过一个事件触发多个方法,抽象出泛型行为的时候,或许可以考虑使用委托. 通过委托构造函数或委托变量把方法赋值给委托 private delegate double DiscountDel ...
- 四种更新UI的方法
笔记: // 使用handler.post(Runnable)更新UI public void updateUI_Fun1() { new Thread() { public void run() ...