uniapp微信小程序系列(2)pages.json实用配置详解

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序系列(2)pages.json实用配置详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

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

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

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

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

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

uniapp微信小程序系列(2)pages.json实用配置详解

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

"pages": [{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "首页",
		"enablePullDownRefresh": true,
		"disableScroll": true // 设置为 true 则页面整体不能上下滚动(bounce效果),只在页面配置中有效,在globalStyle中设置无效
	}
}, {
	"path": "pages/mine/mine",
	"style": {
		"navigationBarTitleText": "我的",
		"enablePullDownRefresh": false
	}
}],
"subPackages": [{
	"root": "sub_packages/pay",
	"pages": [{
		"path": "index/index",
		"style": {
			"navigationBarTitleText": "支付模块",
			"enablePullDownRefresh": false
		}
	}]
}],

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

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

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

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

三. 配置easycom全局组件

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

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

uniapp微信小程序系列(2)pages.json实用配置详解

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

<template>
	<view @click="click">
		{{title}}
	</view>
</template>

<script>
	export default {
		name: "uni-good-detail",
		props: {
			title: {
				type: String,
				default: "<uni-good-detail>商品组件(默认)"
			}
		},
		data() {
			return {

			};
		},
		// 在实例初始化之前被调用
		beforeCreate() {
			console.log('beforeCreate');
		},
		// 在实例创建完成后被立即调用
		created() {
			console.log('created');
		},
		// 在挂载开始之前被调用
		beforeMount() {
			console.log('beforeMount');
		},
		// 挂载到实例上去之后调用
		mounted() {
			console.log('mounted');
		},
		// 实例销毁之前调用(页面出栈时执行,uni.navigateTo离开路由时并不会执行)
		beforeDestroy() {
			console.log('beforeDestroy');
		},
		// 实例销毁后调用(页面出栈时执行,uni.navigateTo离开路由时并不会执行)
		destroyed() {
			console.log('destroyed');
		},
		methods: {
			click() {
				this.$emit("onChange", {
					id: 'goodID',
					title: this.title
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>

此时,需要在pages.json中配置easycom,配置如下:

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

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

<template>
	<view class="container">
		<good-detail @onChange="onChange"></good-detail>
		<uni-good-detail @onChange="onChange"></uni-good-detail>
	</view>
</template>

<script>
	// 由于配置了easycom,组件uni-good-detail不用import引入,也不需要在components内注册uni-list组件。template里就可以直接用
	import goodDetail from "@/components/good-detail.vue"

	export default {
		components: {
			goodDetail,
		},
		data() {
			return {}
		},
		// 页面加载
		onLoad() {
			console.log('onLoad');
		},
		// 页面显示
		onShow() {
			console.log('onShow');
		},
		// 页面初次渲染完成(同onLoad仅触发一次)
		onReady() {
			console.log('onReady');
		},
		// 页面滚动监听 scrollTop:距离顶部的偏移量
		onPageScroll(e) {
			console.log(e.scrollTop);
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
		},
		// 滚动到底部
		onReachBottom() {
			console.log('onReachBottom');
		},
		// 底部Tab切换
		onTabItemTap() {
			console.log('onTabItemTap');
		},
		// 分享好友
		onShareAppMessage() {
			console.log('onShareAppMessage');
		},
		// 分享朋友圈
		onShareTimeline() {
			console.log('onShareTimeline');
		},
		// 收藏小程序
		onAddToFavorites() {
			console.log('onAddToFavorites');
		},
		methods: {
			onChange(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
</style>

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

关于以上3种常用pages.json配置,全文件配置脚本如下:文章来源地址https://www.toymoban.com/news/detail-403500.html

{
	"easycom": {
		"autoscan": true,
		"custom": {
			"^uni-(.*)": "@/components/uni-$1.vue" // 匹配components目录内的vue文件
		}
	},
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页",
			"enablePullDownRefresh": true,
			"disableScroll": true // 设置为 true 则页面整体不能上下滚动(bounce效果),只在页面配置中有效,在globalStyle中设置无效
		}
	}, {
		"path": "pages/mine/mine",
		"style": {
			"navigationBarTitleText": "我的",
			"enablePullDownRefresh": false
		}
	}],
	"subPackages": [{
		"root": "sub_packages/pay",
		"pages": [{
			"path": "index/index",
			"style": {
				"navigationBarTitleText": "支付模块",
				"enablePullDownRefresh": false
			}
		}]
	}],
	"globalStyle": {
		"navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景颜色,仅支持 black/white
		"navigationBarTitleText": "导航栏默认标题", // 导航栏标题默认文字内容
		"navigationBarBackgroundColor": "#F8F8F8", // 顶部导航栏(状态栏)背景颜色
		"navigationStyle": "default", // 是否自定义顶部导航栏(状态栏) 自定义custom、默认显示default
		"backgroundColor": "#F8F8F8", // 当enablePullDownRefresh为true时,下拉显示出来的窗口的背景色
		"backgroundTextStyle": "dark", // 下拉 loading 的样式,仅支持 dark/light
		"enablePullDownRefresh": false, // 是否开启下拉刷新,触发下拉刷新时,配合页面生命周期onPullDownRefresh使用
		"onReachBottomDistance": 50 // 页面上拉触底事件触发时距页面底部距离,单位只支持px,默认50。配合页面生命周期onReachBottom使用
	},
	"tabBar": {
		"color": "#909399", // tab 上的文字默认颜色
		"selectedColor": "#F30500", //  tab 上的文字选中时的颜色
		"backgroundColor": "#FFFFFF", // tab 的背景色
		"borderStyle": "black", // tabbar 上边框的颜色,可选值 black/white
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/menu_icon/home_0.png",
				"selectedIconPath": "static/menu_icon/home_1.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/mine/mine",
				"iconPath": "static/menu_icon/my_0.png",
				"selectedIconPath": "static/menu_icon/my_1.png",
				"text": "我的"
			}
		]
	}
}

到了这里,关于uniapp微信小程序系列(2)pages.json实用配置详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp项目-配置pages.json

    说明:selectedcolor是选中的颜色;lists底部导航栏的每个导航项的列表, \\\"pagePath\\\" :导航项关联的页面路径。 \\\"text\\\" :导航项显示的文本内容。 \\\"iconPath\\\" :导航项默认状态下的图标路径。 \\\"selectedIconPath\\\" :导航项选中状态下的图标路径。 说明: \\\"subPackages\\\" :子包的配置列表。

    2024年02月12日
    浏览(38)
  • uniapp - 微信小程序JSON数据导出表格(XLSX)

    uniapp-微信小程序导出表格(XLSX) 这篇文章苦于,后端没有提供下载接口,前端的小伙伴自己要处理Json数据的情况下 用到了,由Sheet.js出品的 js-xlsx 是一款非常方便的只需要纯JS即可读取和导出excel的工具库,用于多种电子表格格式的解析器和编写器。 这里只说明xlsx导出 其

    2024年02月16日
    浏览(33)
  • 关于UniApp启动到微信小程序工具提示找不到app.json

    第一种情况 在  uni-app  开发中使用  vue-cli-plugin-uni  插件创建项目时,如果出现找不到  app.json  的错误,可能是以下原因导致的: 项目根目录下缺少  pages  和  globalStyle  目录。 app.json  文件中配置的  pages  和  globalStyle  字段对应的目录必须存在,如果不存在或者目录

    2024年02月12日
    浏览(68)
  • 【一步搞定】uniapp运行微信小程序时报错routeDone with a webviewId ** that is not the current page

    每次刷新还不同webviewId!! 每次刷新还不同webviewId!! 已试过其他帖子,设置pages.json的配置仍旧无效的,可以继续往下。 小程序基础库支持的问题。 基础库版本 版本 实测效果 3.0 无效 2.33.0 无效 2.32.3 无效 2.32.1 无效 2.30.4 无效 2.29.2 无效 2.28.1 无效 2.27.3 无效 2.26.2 有效 点

    2024年04月09日
    浏览(109)
  • uniapp微信小程序系列(1)基础与入门

    uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架,支持iOS、Android、Web及各平台小程序。本系列文章为uni-app开发微信小程序知识点的归纳总结。 如果你是新手,项目创建一般推荐:uni-ui项目,该项目架构包含了uni官方提供的内嵌UI组件库,方便直接使用。 如果你

    2024年02月17日
    浏览(37)
  • 【微信小程序】--JSON 配置文件作用(三)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月09日
    浏览(54)
  • uniapp使用微信开发工具打开微信小程序运行[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json

    这是 uniapp 项目 还未转成微信小程序 需要转换一下     重点:   首先一定要有 unpackage文件夹   如果没有的需要到HBuilder X 编译一下 编译完,可以看到如下目录既可以了

    2024年02月07日
    浏览(53)
  • 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航

    开始前,请先完成项目创建,详见 【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验 因我们的项目是根据模板创建的,需先清理掉无效的页面代码,具体操作方式如下: 删除 pages 文件夹下的所有文件 用下方代码替换掉

    2023年04月10日
    浏览(45)
  • uniApp配置微信分享 uniApp跳转微信小程序

    最近在做uniApp时需要跳转微信小程序进行支付,以为和跳转支付宝小程序支付一样简单结果让我发狂,跳转微信代码其实很简单就是下面这一段,但是要配置一大推东西 提示:plus为App端默认的系统参数,不用引入或者其他操作            ios跳转跳转微信小程序还需要配置

    2024年02月09日
    浏览(63)
  • 微信小程序新手入门教程二:认识JSON配置文件

    在上一篇我们介绍了微信小程序的注册和基本使用方式,并且写出了一个简单的页面,但是依然没有解释目录中的各种.json文件是做什么的。这篇我们就来认识一下各种JSON配置文件及其配置项。 首先先来认识一下JSON是什么。 JSON 指的是 JavaScript 对象表示法(JavaScript Object 

    2024年04月17日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包