本篇主要介绍其中几个实用的配置:
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": "我的"
}
]
}
详细配置功能,请参考配置后的注释
二. 配置前端页面路由、分包路由
以下配置中,包含三个页面,分别是主包的首页、我的模块及分包的支付模块,目录结构如下图:
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后直接引用。目录结构及组件代码如下:
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引用也可直接使用。文章来源:https://www.toymoban.com/news/detail-403500.html
关于以上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模板网!