# 微信小程序--配置 目录结构 [toc] --- ## 1、`project.config.json` 软件配置文件 * 此文件是配置微信开发者工具的，我们使用工具，无需去手动修改此文件 --- ## 2、`app.json` 公用配置文件 * 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。 **属性**|**类型**|**必填**|**描述** ---|---|---|---|--- pages|string|是|页面路径列表 window|Object|否|全局的默认窗口 tabBar|Object|否|底部 tab 栏 > 代码示例： ```js // 记住：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.wxss` 公用样式文件 * 此文件写法跟css样式一样 * 此文件的样式，在所有的WXML页面都可以使用 * 此文件优先级最低 > 尺寸单位 >> 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 * 建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 --- ## 4、`app.js` js启动文件 * App() 在此文件里调用，只能调用一次。 * 此文件可以使用js语法。 * js语法，写在方法中。大部分js语法都支持。 **属性**|**类型**|**必填**|**描述** ---|---|---|---|--- onLaunch|function|否|生命周期回调——监听小程序初始化 onShow|function|否|生命周期回调——监听小程序启动或切前台 onHide|function|否|生命周期回调——监听小程序切后台 onError|function|否|错误监听函数 onPageNotFound|function|否|页面不存在监听函数 其他|function|否|开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问 ```js App({ onLaunch(options) { // 生命周期回调——监听小程序初始化 }, onShow(options) { // 生命周期回调——监听小程序启动或切前台 }, onHide() { // 生命周期回调——监听小程序切后台 }, onError(msg) { // 错误监听函数 }, onPageNotFound(msg) { // 页面不存在监听函数 }, globalData: '我是自定义变量', a(){ console.log('我是自定义函数'); } }) ``` --- ## 5、前后台定义 * 当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有直接销毁，而是进入了后台状态； * 当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。 --- ## 6、小程序销毁 * 只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。 * 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）小程序会被微信主动销毁。 * 当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。 --- ## 7、`.json` 页面配置文件 * 每一个小程序页面，都有单独的.json配置文件。 * 如果配置了页面单独配置，会覆盖app.json的配置项 **属性**|**类型**|**描述** ---|---|--- navigationBarBackgroundColor|HexColor|导航栏背景颜色 navigationBarTextStyle|string|导航栏标题颜色，仅支持 black / white navigationBarTitleText|string|导航栏标题文字内容 navigationStyle|string|导航栏样式 仅支持以下值：default / custom backgroundColor|HexColor|窗口的背景色 backgroundTextStyle|string|下拉 loading 的样式，仅支持 dark / light enablePullDownRefresh|boolean|是否开启当前页面下拉刷新。 ```php { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "欧阳克课件", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh" : true } ``` ## 8、`wxss` 页面样式文件 * 此文件写法跟css样式一样 * 此文件的样式，在同名的wxml页面使用 * 此文件优先级高于app.wxss公用样式文件 --- ## 9、`.js` 页面逻辑文件 * Page() 在此文件里调用，只能调用一次。 * 此文件可以使用js语法。 * js语法，写在方法中。大部分js语法都支持。 **属性**|**类型**|**描述** ---|---|--- data|Object|页面的初始数据 onLoad|function|生命周期回调——监听页面加载 onShow|function|生命周期回调——监听页面显示 onReady|function|生命周期回调——听页面初次渲染完成 onHide|function|生命周期回调——监听页面隐藏 onUnload|function|生命周期回调——监听页面卸载 onPullDownRefresh|function|监听用户下拉动作 其他|function|开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问 ```js Page({ data: { text: '自定义初始化数据' }, onLoad(options) { // 生命周期回调——监听页面加载 }, onShow() { // 生命周期回调——监听页面显示 }, onReady() { // 生命周期回调——听页面初次渲染完成 }, onHide() { // 生命周期回调——监听页面隐藏 }, onUnload() { // 生命周期回调——监听页面卸载 }, onPullDownRefresh() { // 监听用户下拉动作 }, ouyangke() { // 自定义方法 }, ouyang: { hi: '你们好' } }) ``` --- ## 10、`.wxml` 页面效果文件 * 此文件是显示页面的，可以理解为跟HTML页面一样。 * 此文件不需要html标签、body标签、head标签。 * 此文件不需要引入样式文件和js文件。 * 直接写小程序支持的组件即可。 --- > ps：一个小程序页面，有4个后缀名文件：.json、.wxss、.js、.wxml，每个文件有不同的作用。 > ps：四个文件为一个小程序页面服务，切记。。。