• Welcome to Journal web site.

我是 PHP 程序员

- 开发无止境 -

Next
Prev

百度小程序-配置

Data: 2021-11-03 08:31:22Form: JournalClick: 0

# 配置


# 一、公用文件

# 1、 project.config.json 软件配置文件

  • 此文件是配置开发者工具的,我们使用工具,无需去手动修改此文件

# 2、 app.json 公用配置文件

  • 可以通过配置 app.json 文件,设置 SWAN 的界面、路径、多 TAB 等。
属性类型必填描述
pagesstring页面路径列表
windowObject全局的默认窗口
tabBarObject底部 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"
            }
        ]
    }
}

# 3、 app.js js启动文件

  • App() 在此文件里调用,只能调用一次。
  • 此文件可以使用js语法。
  • js语法,写在方法中。大部分js语法都支持。
属性类型必填描述
onLaunchfunction生命周期回调——监听小程序初始化
onShowfunction生命周期回调——监听小程序启动或切前台
onHidefunction生命周期回调——监听小程序切后台
onErrorfunction错误监听函数
onPageNotFoundfunction页面不存在监听函数
其他function开发者可以添加任意的函数或数据变量到 Object 参数中,用 this 可以访问
App({
    onLaunch(options) {
        // 生命周期回调——监听小程序初始化
    },
    onShow(options) {
        // 生命周期回调——监听小程序启动或切前台
    },
    onHide() {
        // 生命周期回调——监听小程序切后台
    },
    onError(msg) {
        // 错误监听函数
    },
    onPageNotFound(msg) {
        // 页面不存在监听函数
    },
    globalData: '我是自定义变量',
    a(){
        console.log('我是自定义函数');
    }
})

# 4、前后台定义

  • 当用户点击右上角胶囊按钮关闭小程序,或者按了设备 Home 键离开微信时,小程序并没有直接销毁,而是进入了后台状态;
  • 当用户再次进入百度APP或再次打开小程序,小程序又会从后台进入前台。

# 5、小程序销毁

  • 只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。
  • 当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)小程序会被微信主动销毁。
  • 当小程序占用系统资源过高,可能会被系统销毁或被微信客户端主动回收。

# 6、.json 页面配置文件

  • 每一个小程序页面,都有单独的.json配置文件
  • 如果配置了页面单独配置,会覆盖app.json的配置项
属性类型描述
navigationBarBackgroundColorHexColor导航栏背景颜色
navigationBarTextStylestring导航栏标题颜色,仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestring导航栏样式 仅支持以下值:default / custom
backgroundColorHexColor窗口的背景色
backgroundTextStylestring下拉 loading 的样式,仅支持 dark / light
enablePullDownRefreshboolean是否开启当前页面下拉刷新。
{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "欧阳克课件",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh" : true
}

# 7、.css 页面样式文件

  • 此文件写法跟css样式一样
  • 此文件的样式,在同名的wxml页面使用

尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

设备rpx换算px(屏幕宽度/750)px换算rpx(750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 P1rpx = 0.552px1px = 1.81rpx
  • 建议: 开发小程序时设计师可以用 iPhone6 作为视觉稿的标准。

# 8、.js 页面逻辑文件

  • Page() 在此文件里调用,只能调用一次。
  • 此文件可以使用js语法。
  • js语法,写在方法中。大部分js语法都支持。
属性类型描述
dataObject页面的初始数据
onLoadfunction生命周期回调——监听页面加载
onShowfunction生命周期回调——监听页面显示
onReadyfunction生命周期回调——听页面初次渲染完成
onHidefunction生命周期回调——监听页面隐藏
onUnloadfunction生命周期回调——监听页面卸载
onPullDownRefreshfunction监听用户下拉动作
其他function开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问
Page({
    data: {
        text: '自定义初始化数据'
    },
    onLoad(options) {
        // 生命周期回调——监听页面加载
    },
    onShow() {
        // 生命周期回调——监听页面显示
    },
    onReady() {
        // 生命周期回调——听页面初次渲染完成
    },
    onHide() {
        // 生命周期回调——监听页面隐藏
    },
    onUnload() {
        // 生命周期回调——监听页面卸载
    },
    onPullDownRefresh() {
        // 监听用户下拉动作
    },
    ouyangke() {
        // 自定义方法
    },
    ouyang: {
        hi: '你们好'
    }
})

# 9、.swan 页面效果文件

  • 此文件是显示页面的,可以理解为跟HTML页面一样。
  • 此文件不需要html标签、body标签、head标签。
  • 此文件不需要引入样式文件和js文件。
  • 直接写小程序支持的组件即可。

ps:一个小程序页面,有4个后缀名文件:.json、.css、.js、.swan,每个文件有不同的作用。 ps:四个文件为一个小程序页面服务,切记。。。

Name:
<提交>