- 开发无止境 -
Data: 2021-11-03 08:31:22Form: JournalClick: 12
project.config.json
软件配置文件app.json
公用配置文件属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pages | string | 是 | 页面路径列表 |
window | Object | 否 | 全局的默认窗口 |
tabBar | Object | 否 | 底部 tab 栏 |
代码示例:
// 记住:json数据里不允许有备注出现。
// 示例里出现的注释,赋值到代码中要删除。
{
// 页面路径列表
"pages": [
// 小程序需要的页面,都要在这里配置
// 在这里输入配置,文件夹里会自动生成文件
// 最后一个配置,不允许出现,号
"pages/index/index",
"pages/list/index",
"pages/car/index",
"pages/my/index"
],
// 全局的默认窗口(顶部、中间窗口)
"window": {
"navigationBarBackgroundColor" : "#000000", // 导航栏背景颜色
"navigationBarTextStyle" : "white", // 导航栏标题颜色,仅支持black / white
"navigationBarTitleText": "欧阳克课件", // 导航栏标题文字内容
"backgroundColor" : "#ffffff", // 窗口的背景色
"backgroundTextStyle" : "dark", // 下拉 loading 的样式,仅支持 dark / light
"enablePullDownRefresh" : "false", // 是否开启全局的下拉刷新,默认false
},
// 底部 tab 栏
"tabBar": {
"color" : "#aa33aa", // tab 上的文字默认颜色,仅支持十六进制颜色
"selectedColor" : "#bb33bb", // tab 上的文字选中时的颜色,仅支持十六进制颜色
"backgroundColor" : "cc33cc", // tab 的背景色,仅支持十六进制颜色
"borderStyle" : "black", // tabbar上边框的颜色, 仅支持 black / white
"position" : "bottom", // tabBar的位置,仅支持 bottom / top
// list 最少2个、最多5个 tab
"list": [
{
"pagePath": "pages/index/index", // 页面路径,必须在 pages 中先定义
"text": "首页", // tab 按钮名称
// icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。
"iconPath" : "img/1.jpg", // 图片路径
"selectedIconPath" : "img/2.jpg" // 选中时,图片路径
},
{
"pagePath": "pages/list/index",
"text": "商品",
"iconPath" : "img/3.jpg",
"selectedIconPath" : "img/4.jpg"
},
{
"pagePath": "pages/car/index",
"text": "购物车",
"iconPath" : "img/5.jpg",
"selectedIconPath" : "img/6.jpg"
},
{
"pagePath": "pages/my/index",
"text": "我的",
"iconPath" : "img/7.jpg",
"selectedIconPath" : "img/8.jpg"
}
]
}
}
app.js
js启动文件属性 | 类型 | 必填 | 描述 |
---|---|---|---|
onLaunch | function | 否 | 生命周期回调——监听小程序初始化 |
onShow | function | 否 | 生命周期回调——监听小程序启动或切前台 |
onHide | function | 否 | 生命周期回调——监听小程序切后台 |
onError | function | 否 | 错误监听函数 |
onPageNotFound | function | 否 | 页面不存在监听函数 |
其他 | function | 否 | 开发者可以添加任意的函数或数据变量到 Object 参数中,用 this 可以访问 |
App({
onLaunch(options) {
// 生命周期回调——监听小程序初始化
},
onShow(options) {
// 生命周期回调——监听小程序启动或切前台
},
onHide() {
// 生命周期回调——监听小程序切后台
},
onError(msg) {
// 错误监听函数
},
onPageNotFound(msg) {
// 页面不存在监听函数
},
globalData: '我是自定义变量',
a(){
console.log('我是自定义函数');
}
})
.json
页面配置文件属性 | 类型 | 描述 |
---|---|---|
navigationBarBackgroundColor | HexColor | 导航栏背景颜色 |
navigationBarTextStyle | string | 导航栏标题颜色,仅支持 black / white |
navigationBarTitleText | string | 导航栏标题文字内容 |
navigationStyle | string | 导航栏样式 仅支持以下值:default / custom |
backgroundColor | HexColor | 窗口的背景色 |
backgroundTextStyle | string | 下拉 loading 的样式,仅支持 dark / light |
enablePullDownRefresh | boolean | 是否开启当前页面下拉刷新。 |
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "欧阳克课件",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh" : true
}
.css
页面样式文件尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备 | rpx换算px(屏幕宽度/750) | px换算rpx(750/屏幕宽度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 P | 1rpx = 0.552px | 1px = 1.81rpx |
.js
页面逻辑文件属性 | 类型 | 描述 |
---|---|---|
data | Object | 页面的初始数据 |
onLoad | function | 生命周期回调——监听页面加载 |
onShow | function | 生命周期回调——监听页面显示 |
onReady | function | 生命周期回调——听页面初次渲染完成 |
onHide | function | 生命周期回调——监听页面隐藏 |
onUnload | function | 生命周期回调——监听页面卸载 |
onPullDownRefresh | function | 监听用户下拉动作 |
其他 | function | 开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问 |
Page({
data: {
text: '自定义初始化数据'
},
onLoad(options) {
// 生命周期回调——监听页面加载
},
onShow() {
// 生命周期回调——监听页面显示
},
onReady() {
// 生命周期回调——听页面初次渲染完成
},
onHide() {
// 生命周期回调——监听页面隐藏
},
onUnload() {
// 生命周期回调——监听页面卸载
},
onPullDownRefresh() {
// 监听用户下拉动作
},
ouyangke() {
// 自定义方法
},
ouyang: {
hi: '你们好'
}
})
.swan
页面效果文件ps:一个小程序页面,有4个后缀名文件:.json、.css、.js、.swan,每个文件有不同的作用。 ps:四个文件为一个小程序页面服务,切记。。。