app.js
App({
onLaunch (options) {
// Do something initial when launch.
监听小程序初始化。
},
onShow (options) {
//options 监听通过什么方式进入 获取场景值
// Do something when show.
监听小程序启动或切前台。（微信切进前台）
},
onHide () {
// Do something when hide.
监听小程序切后台。（进入后台）
//把零时数据存储起来
},
onError (msg) {
// 错误监听函数。
console.log(msg)
},
onPageNotFound(){
页面不存在监听函数。
}
//开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问
globalData: 'I am global data'
setnewfn(){
consoel.log('任意函数')
}
})
app.json 进行全局配置
界面风格的设置：
属性 | 类型 | 必填 | 描述 | 最低版本 |
string[] | 是 | 页面路径列表 | |
pages 配置项 数组里写页面入径 小程序可以找到页面
第一个数组的值，代表的小程序进入时，最先显示的页面。
window 配置项（缺点只能用默认的导航条）
用于设置小程序的状态栏、导航条、标题、窗口背景色。
1.用于自定义导航栏 (满足于设计师的需求)
navigationStyle :custom
2.下拉加载更多
onReachBottomDistance ：50 下拉加载更多
当创建一个pages/home/home 页面时 ，下拉页面会触发一个page.js 里的生命周期函数
onReachBottom : function(){
//用来加载数据
}
3.屏幕旋转设置
pageOrientation ： auto/ portrait / landscape 详见 响应显示区域变化
portrait 人像模式 竖屏
landscape 风景模式 横屏
手机以什么方式显示
等等配置
tabBar 配置项
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
{
"pages": [//配置页面路径
"pages/movie/movie",
"pages/cinema/cinema",
"pages/mine/mine"
],
"window": {//用于设置小程序的状态栏、导航条、标题、窗口背景色
"navigationBarBackgroundColor": "#e54847",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "猫眼",
"backgroundColor": "#E8E8E8",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50,
"pageOrientation": "auto"
},
"tabBar": {//配值tab
"borderStyle": "white",
"list": [
{
"pagePath": "pages/movie/movie",
"text": "电影",
"iconPath":"/images/2153438.jpg",
"selectedIconPath":"/images/2153400.jpg"
},
{
"pagePath": "pages/cinema/cinema",
"text": "影院",
"iconPath": "/images/1906157.jpg",
"selectedIconPath": "/images/1902757.jpg"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/images/685380.jpg",
"selectedIconPath": "/images/685255.jpg"
}
]
},
"sitemapLocation": "sitemap.json"
}
注意：图片格式要png格式，引入图片不能写绝对路径
app.wxss 全局样式 的设置
如果在pages/home/home 自己的wxss的文件设置样式，会覆盖全局样式
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
- style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};" />
- class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />
微信适配的问题
设计师设计出宽750px 的设计图 这样我们前端可以不用进行换算 直接使用750rpx
显示在手机图像和设计图的图像相同。
pages 下面的页面
js文件
生命周期函数
Page({
/**
* 页面的初始数据,给xml为文件使用{{}}
*/
//改数据data 方法 this.setData({}})
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作（下拉刷新）
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数（上拉加载更多）
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return{//用于自定义转发内容
title:'快来领红包了'
path："/pages/home/home?id=110",//path用于转发我的小程序给好友，好友通过二维码，
等,进入该路径的页面,通过添加参数就知道你是怎样进入页面的。做【派发红包的事情。
}
}
onResize：function(){
//页面旋转是触发
}
onTabItemTap：function(){
//点击到tab栏 设置该生命函数的页面 会执行该函数
主要的作用是：点击该页面 去浏览 然后再点击该页面会有触发返回top部
点击tab 会播放某个声音
}
})
