一. 配置应用级别样式、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引用也可直接使用。

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

{"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实用配置详解相关推荐

imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
《微信小程序开发》页面导航最强详解 | 如何对小程序页面进行跳转？
<微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 文章目录 <微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 一.微信小程序导航二.命 ...
pos请求微信小程序_微信小程序蓝牙连接小票打印机实例代码详解
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapt ...
微信小程序系列（7）如何用微信小程序写一个论坛？贴心代码详解（五）删帖页【完结篇】
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
微信开发工具button跳转页面_微信小程序按钮点击跳转页面详解
微信小程序中,按钮也是标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkP ...
微信小程序使用 npm 包，举例图文详解
使用 npm 包前提条件: 下载安装,配置npm环境变量,不懂得可以上网查教程,本文不再描述小程序使用 npm 包简述 1.初始化 package.json 2.勾选允许使用 npm(新版微信小程序 ...
微信小程序获取手机号 JavaScript解密示例代码详解
刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被 ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...

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

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

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

三. 配置easycom全局组件

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

最新文章

热门文章