• uniapp微信小程序系列（2）pages.json实用配置详解

    本篇主要介绍其中几个实用的配置：

    1. 配置应用级别样式、tabBar样式

    2. 配置前端页面路由、分包路由

    3. 配置easycom全局组件（组件无需import引入直接使用）

    一. 配置应用级别样式、tabBar样式

    创建一个包含首页、我的两个tabBar模块的应用布局，配置参数如下：

    1. "globalStyle": {
    2. 	"navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
    3. 	"navigationBarTitleText": "导航栏默认标题", // 导航栏标题默认文字内容
    4. 	"navigationBarBackgroundColor": "#F8F8F8", // 顶部导航栏(状态栏)背景颜色
    5. 	"navigationStyle": "default", // 是否自定义顶部导航栏(状态栏) 自定义custom、默认显示default
    6. 	"backgroundColor": "#F8F8F8", // 当enablePullDownRefresh为true时，下拉显示出来的窗口的背景色
    7. 	"backgroundTextStyle": "dark", // 下拉 loading 的样式，仅支持 dark/light
    8. 	"enablePullDownRefresh": false, // 是否开启下拉刷新，触发下拉刷新时，配合页面生命周期onPullDownRefresh使用
    9. 	"onReachBottomDistance": 50 // 页面上拉触底事件触发时距页面底部距离，单位只支持px，默认50。配合页面生命周期onReachBottom使用
    10. },
    11. "tabBar": {
    12. 	"color": "#909399", // tab 上的文字默认颜色
    13. 	"selectedColor": "#F30500", //  tab 上的文字选中时的颜色
    14. 	"backgroundColor": "#FFFFFF", // tab 的背景色
    15. 	"borderStyle": "black", // tabbar 上边框的颜色，可选值 black/white
    16. 	"list": [{
    17. 			"pagePath": "pages/index/index",
    18. 			"iconPath": "static/menu_icon/home_0.png",
    19. 			"selectedIconPath": "static/menu_icon/home_1.png",
    20. 			"text": "首页"
    21. 		},
    22. 		{
    23. 			"pagePath": "pages/mine/mine",
    24. 			"iconPath": "static/menu_icon/my_0.png",
    25. 			"selectedIconPath": "static/menu_icon/my_1.png",
    26. 			"text": "我的"
    27. 		}
    28. 	]
    29. }

    详细配置功能，请参考配置后的注释

    二. 配置前端页面路由、分包路由

    以下配置中，包含三个页面，分别是主包的首页、我的模块及分包的支付模块，目录结构如下图：

    pages.json中，主包、分包路由配置如下（其中页面style属性配置项，同globalStyle配置一致）

    1. "pages": [{
    2. 	"path": "pages/index/index",
    3. 	"style": {
    4. 		"navigationBarTitleText": "首页",
    5. 		"enablePullDownRefresh": true,
    6. 		"disableScroll": true // 设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效
    7. 	}
    8. }, {
    9. 	"path": "pages/mine/mine",
    10. 	"style": {
    11. 		"navigationBarTitleText": "我的",
    12. 		"enablePullDownRefresh": false
    13. 	}
    14. }],
    15. "subPackages": [{
    16. 	"root": "sub_packages/pay",
    17. 	"pages": [{
    18. 		"path": "index/index",
    19. 		"style": {
    20. 			"navigationBarTitleText": "支付模块",
    21. 			"enablePullDownRefresh": false
    22. 		}
    23. 	}]
    24. }],

    为什么需要分包的存在？是因为微信官方对小程序的主包大小做了严格限制，编译后的主包代码大小容量不允许超过2M，超出部分应使用分包。

    运行规则：主包代码块在小程序启动时就会被同步主动加载，分包代码在小程序启动时不会被执行，分包模块只有在被引用时才会被异步加载进来。

    主包页面调起分包模块页面，使用常规路由API实现即可，如：

    1. // 主包vue页面文件掉起分包页面
    2. uni.navigateTo({
    3. 	url: '/sub_packages/pay/index/index'
    4. })

    三. 配置easycom全局组件

    传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

    在components目录下创建两个vue组件，分别为good-detail.vue、uni-good-detail.vue，good-detail.vue组件将会通过import引用，而uni-good-detail.vue组件将会通过配置easycom后直接引用。目录结构及组件代码如下：

     good-detail.vue、uni-good-detail.vue两个组件代码相同，以uni-good-detail.vue为例，如：

    2.  
    3. <script>
    4. 	export default {
    5. 		name: "uni-good-detail",
    6. 		props: {
    7. 			title: {
    8. 				type: String,
    9. 				default: "商品组件(默认)"
    10. 			}
    11. 		},
    12. 		data() {
    13. 			return {
    14.  
    15. 			};
    16. 		},
    17. 		// 在实例初始化之前被调用
    18. 		beforeCreate() {
    19. 			console.log('beforeCreate');
    20. 		},
    21. 		// 在实例创建完成后被立即调用
    22. 		created() {
    23. 			console.log('created');
    24. 		},
    25. 		// 在挂载开始之前被调用
    26. 		beforeMount() {
    27. 			console.log('beforeMount');
    28. 		},
    29. 		// 挂载到实例上去之后调用
    30. 		mounted() {
    31. 			console.log('mounted');
    32. 		},
    33. 		// 实例销毁之前调用（页面出栈时执行，uni.navigateTo离开路由时并不会执行）
    34. 		beforeDestroy() {
    35. 			console.log('beforeDestroy');
    36. 		},
    37. 		// 实例销毁后调用（页面出栈时执行，uni.navigateTo离开路由时并不会执行）
    38. 		destroyed() {
    39. 			console.log('destroyed');
    40. 		},
    41. 		methods: {
    42. 			click() {
    43. 				this.$emit("onChange", {
    44. 					id: 'goodID',
    45. 					title: this.title
    46. 				})
    47. 			}
    48. 		}
    49. 	}
    50. script>
    51.  
    52. <style lang="scss" scoped>
    53.  
    54. style>

    此时，需要在pages.json中配置easycom，配置如下：

    1. "easycom": {
    2. 	"autoscan": true,
    3. 	"custom": {
    4. 		"^uni-(.*)": "@/components/uni-$1.vue" // 匹配components目录内的vue文件
    5. 	}
    6. }

    在使用good-detail.vue、uni-good-detail.vue两个组件时，引入的代码分别为：

    2.  
    3. <script>
    4. 	// 由于配置了easycom，组件uni-good-detail不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    5. 	import goodDetail from "@/components/good-detail.vue"
    6.  
    7. 	export default {
    8. 		components: {
    9. 			goodDetail,
    10. 		},
    11. 		data() {
    12. 			return {}
    13. 		},
    14. 		// 页面加载
    15. 		onLoad() {
    16. 			console.log('onLoad');
    17. 		},
    18. 		// 页面显示
    19. 		onShow() {
    20. 			console.log('onShow');
    21. 		},
    22. 		// 页面初次渲染完成(同onLoad仅触发一次)
    23. 		onReady() {
    24. 			console.log('onReady');
    25. 		},
    26. 		// 页面滚动监听 scrollTop:距离顶部的偏移量
    27. 		onPageScroll(e) {
    28. 			console.log(e.scrollTop);
    29. 		},
    30. 		// 下拉刷新
    31. 		onPullDownRefresh() {
    32. 			console.log('onPullDownRefresh');
    33. 		},
    34. 		// 滚动到底部
    35. 		onReachBottom() {
    36. 			console.log('onReachBottom');
    37. 		},
    38. 		// 底部Tab切换
    39. 		onTabItemTap() {
    40. 			console.log('onTabItemTap');
    41. 		},
    42. 		// 分享好友
    43. 		onShareAppMessage() {
    44. 			console.log('onShareAppMessage');
    45. 		},
    46. 		// 分享朋友圈
    47. 		onShareTimeline() {
    48. 			console.log('onShareTimeline');
    49. 		},
    50. 		// 收藏小程序
    51. 		onAddToFavorites() {
    52. 			console.log('onAddToFavorites');
    53. 		},
    54. 		methods: {
    55. 			onChange(e) {
    56. 				console.log(e);
    57. 			}
    58. 		}
    59. 	}
    60. script>
    61.  
    62. <style lang="scss">
    63. style>

    可见，通过配置easycom后，uni-good-detail.vue组件无需通过import引用也可直接使用。

    关于以上3种常用pages.json配置，全文件配置脚本如下：

    1. {
    2. 	"easycom": {
    3. 		"autoscan": true,
    4. 		"custom": {
    5. 			"^uni-(.*)": "@/components/uni-$1.vue" // 匹配components目录内的vue文件
    6. 		}
    7. 	},
    8. 	"pages": [{
    9. 		"path": "pages/index/index",
    10. 		"style": {
    11. 			"navigationBarTitleText": "首页",
    12. 			"enablePullDownRefresh": true,
    13. 			"disableScroll": true // 设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效
    14. 		}
    15. 	}, {
    16. 		"path": "pages/mine/mine",
    17. 		"style": {
    18. 			"navigationBarTitleText": "我的",
    19. 			"enablePullDownRefresh": false
    20. 		}
    21. 	}],
    22. 	"subPackages": [{
    23. 		"root": "sub_packages/pay",
    24. 		"pages": [{
    25. 			"path": "index/index",
    26. 			"style": {
    27. 				"navigationBarTitleText": "支付模块",
    28. 				"enablePullDownRefresh": false
    29. 			}
    30. 		}]
    31. 	}],
    32. 	"globalStyle": {
    33. 		"navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
    34. 		"navigationBarTitleText": "导航栏默认标题", // 导航栏标题默认文字内容
    35. 		"navigationBarBackgroundColor": "#F8F8F8", // 顶部导航栏(状态栏)背景颜色
    36. 		"navigationStyle": "default", // 是否自定义顶部导航栏(状态栏) 自定义custom、默认显示default
    37. 		"backgroundColor": "#F8F8F8", // 当enablePullDownRefresh为true时，下拉显示出来的窗口的背景色
    38. 		"backgroundTextStyle": "dark", // 下拉 loading 的样式，仅支持 dark/light
    39. 		"enablePullDownRefresh": false, // 是否开启下拉刷新，触发下拉刷新时，配合页面生命周期onPullDownRefresh使用
    40. 		"onReachBottomDistance": 50 // 页面上拉触底事件触发时距页面底部距离，单位只支持px，默认50。配合页面生命周期onReachBottom使用
    41. 	},
    42. 	"tabBar": {
    43. 		"color": "#909399", // tab 上的文字默认颜色
    44. 		"selectedColor": "#F30500", //  tab 上的文字选中时的颜色
    45. 		"backgroundColor": "#FFFFFF", // tab 的背景色
    46. 		"borderStyle": "black", // tabbar 上边框的颜色，可选值 black/white
    47. 		"list": [{
    48. 				"pagePath": "pages/index/index",
    49. 				"iconPath": "static/menu_icon/home_0.png",
    50. 				"selectedIconPath": "static/menu_icon/home_1.png",
    51. 				"text": "首页"
    52. 			},
    53. 			{
    54. 				"pagePath": "pages/mine/mine",
    55. 				"iconPath": "static/menu_icon/my_0.png",
    56. 				"selectedIconPath": "static/menu_icon/my_1.png",
    57. 				"text": "我的"
    58. 			}
    59. 		]
    60. 	}
    61. }

  • 相关阅读:
    第九章《字符串》第5节：字符编码常识
    泛型（工作能用到的）
    巨细！【python爬虫实战案例】
    实现一个简单的注册页面注册
    编写程序将一个子串插入到主串中
    字节8年测试开发工程师感悟，说说我们自动化测试平台的进阶之路
    Abbkine脂质过氧化（丙二醛）含量检测试剂盒说明书
    【Python抢票神器】火车票枪票软件到底靠谱吗？实测—终极攻略。
    如何在vue中实现图片懒加载
    apache maven安装教程
  • 原文地址：https://blog.csdn.net/zeping891103/article/details/127654872