小程序基础开发(一):配置tab底部栏页面,page和component的区别,使用component自定义头部组件样式和底部导航
目录
page和component的区别
简单地说,page是官方默认组件,component是自定义组件。当你需要开发一个有特色的,可灵活配置样式的小程序,就要用到component。开发一个小程序前先确定是否需要自定义component模板来做,相对来说,page比较简单快捷,但是样式固定单一。而component可以有更多功能,例如头部返回主页按钮,头部图片背景,自定义底部导航样式和底部导航根据头部背景色而变化等等。
page模式
如果是简单功能,页面不多的小程序,即可直接配置参数,所有页面用page注册即可。官方文档
1,设置头部
"window": { "backgroundTextStyle": "下拉 loading 的样式,仅支持 dark / light ", "navigationBarBackgroundColor": "背景色", "navigationBarTitleText": "标题", "navigationBarTextStyle": "导航栏标题颜色,仅支持 black / white" },
2,设置底部
首先找几个底部的图标,分2种颜色,点击前和点击后(建议灰色和绿色)
"tabBar": { "color": "#707070",//默认颜色 "selectedColor": "#2DBB55",//选中后颜色 "backgroundColor": "#FAFAFA",//背景颜色 "list": [ { "selectedIconPath": "image/tabBar11.png",//点击后的图标 "iconPath": "image/tabBar1.png",//默认图标 "pagePath": "pages/index/index",//点击后跳转的链接 "text": "首页"//附带文字 }, { "selectedIconPath": "image/tabBar22.png", "iconPath": "image/tabBar2.png", "pagePath": "pages/staff/staff_index/staff_index", "text": "功能" }, { "selectedIconPath": "image/tabBar33.png", "iconPath": "image/tabBar3.png", "pagePath": "pages/visitor/visitor_index/visitor_index", "text": "我的" } ] },
看看效果图
3,新建页面
新建一个目录后,会有js,json,wxml和wxss4个文件,其中wxml和wxss其实就是html和css差不多,主要是配置js文件。打开js文件后可以看到默认帮你列出很多api,把你想执行的动作写到相应的api里。
特别注意的是
如需从服务器获取再进行渲染的数据,最好请求和渲染都写在onShow里,避免页面样式没加载完就开始渲染了。
component模式
1,新建组件-自定义头部栏
组件例子来自于ColorUI2.0-作者【文晓港】
JS
1,在 methods配置了2个方法,分别是头部的返回上一页和返回首页,
2,properties里的4个对外属性,对应头部栏的背景色,返回主页按钮,上一页按钮和背景图
const app = getApp(); Component({ /** * 组件的一些选项 */ options: { addGlobalClass: true, multipleSlots: true }, /** * 组件的对外属性 */ properties: { bgColor: { type: String, default: '' }, isCustom: { type: [Boolean, String], default: false }, isBack: { type: [Boolean, String], default: false }, bgImage: { type: String, default: '' }, }, /** * 组件的初始数据 */ data: { StatusBar: app.globalData.StatusBar, CustomBar: app.globalData.CustomBar, Custom: app.globalData.Custom }, /** * 组件的方法列表 */ methods: { BackPage() { wx.navigateBack({ delta: 1 }); }, toHome(){ wx.reLaunch({ url: '/pages/index/index', }) }, } })
json
{ "component": true, "usingComponents": {} }
wxml
1,组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。
在组件模板中可以提供一个 节点,用于承载组件引用时提供的子节点。
<view class="cu-custom" style="height:{{CustomBar}}px"> <view class="cu-bar fixed {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;{{bgImage?'background-image:url(' + bgImage+')':''}}"> <view class="action" bindtap="BackPage" wx:if="{{isBack}}"> <slot name="backText"></slot> </view> <view class="action border-custom" wx:if="{{isCustom}}" style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)"> <text class="cuIcon-back top_back" bindtap="BackPage"></text> <text class="cuIcon-homefill top_home" bindtap="toHome"></text> </view> <view class="content" style="top:{{StatusBar}}px"> <slot name="content"></slot> </view> <slot name="right"></slot> </view> </view>
例子:1,主页页头,可分ios(居中)和安卓(居左)
<cu-custom wx:if="{{platform=='ios'}}" bgColor="bg-gradual-{{Theme}}"> <view slot="content">{{Name}}</view> </cu-custom> <cu-custom wx:if="{{platform!='ios'}}" bgColor="bg-gradual-{{Theme}}" isBack="{{true}}"> <view class="text-cut text-lg" slot="backText">{{Name}}</view> </cu-custom>
2,居左带返回上一页按钮
<cu-custom bgColor="bg-gradual-{{Theme}}" isBack="{{true}}"> <view class="text-cut flex align-center" slot="backText"> <text class="cuIcon-back text-xxl"></text><text class="text-lg">{{Name}}</text> </view> </cu-custom>
3,居中带返回主页按钮
<cu-custom bgColor="bg-gradual-{{Theme}}" isBack="{{true}}"> <view slot="backText"><text class="cuIcon-back text-xxl"></text></view> <view slot="content">图片裁剪</view> </cu-custom>
4,居中带返回主页按钮和返回上一页按钮
<cu-custom bgColor="bg-gradual-{{Theme}}" isCustom="{{true}}"> <view slot="content">{{Name}}</view> </cu-custom>
5,更可以在头部栏使用图片当背景,
<scroll-view scroll-y class="scrollPage"> <cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/cjkz2329.jpg"> <view slot="content"> <image src="/images/cjkz.png" mode="widthFix"></image> </view> </cu-custom> </scroll-view>
6,甚至在初始页面,只使用图片当头部栏也可以!
<scroll-view scroll-y class="scrollPage"> <image src='/images/BasicsBg.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image> </scroll-view>
2,自定义底部栏
1,特殊的个性样式
<view class="cu-bar tabbar margin-bottom-xl bg-white"> <view class="action text-green"> <view class="cuIcon-homefill"></view> 首页 </view> <view class="action text-gray"> <view class="cuIcon-similar"></view> 分类 </view> <view class="action text-gray add-action"> <button class="cu-btn cuIcon-add bg-green shadow"></button> 发布 </view> <view class="action text-gray"> <view class="cuIcon-cart"> <view class="cu-tag badge">99</view> </view> 购物车 </view> <view class="action text-gray"> <view class="cuIcon-my"> <view class="cu-tag badge"></view> </view> 我的 </view> </view> <view class="cu-bar tabbar bg-black"> <view class="action text-green"> <view class="cuIcon-homefill"></view> 首页 </view> <view class="action text-gray"> <view class="cuIcon-similar"></view> 分类 </view> <view class="action text-gray add-action"> <button class="cu-btn cuIcon-add bg-green shadow"></button> 发布 </view> <view class="action text-gray"> <view class="cuIcon-cart"> <view class="cu-tag badge">99</view> </view> 购物车 </view> <view class="action text-gray"> <view class="cuIcon-my"> <view class="cu-tag badge"></view> </view> 我的 </view> </view>
2,根据颜色数组赋值控制小程序主题色,底部栏和头部栏统一颜色的做法
先准备7彩底部图(根据主题数组颜色)
wxml
<home wx:if="{{PageCur=='home'}}"></home> <server wx:if="{{PageCur=='server'}}"></server> <my wx:if="{{PageCur=='my'}}"></my> <view class="cu-bar tabbar bg-white shadow foot"> <view class="action" bindtap="NavChange" data-cur="home"> <view class='cuIcon-cu-image'> <image src="/images/tabbar/{{Home_img}}.png"></image> </view> <view class="{{Home_text}}">首页</view> </view> <view class="action" bindtap="NavChange" data-cur="server"> <view class='cuIcon-cu-image'> <image src="/images/tabbar/{{Server_img}}.png"></image> </view> <view class="{{Server_text}}">服务</view> </view> <view class="action" bindtap="NavChange" data-cur="my"> <view class='cuIcon-cu-image'> <image src="/images/tabbar/{{My_img}}.png"></image> </view> <view class="{{My_text}}">我的</view> </view> </view>
json
{ "usingComponents": { "home": "/pages/home/home", "server": "/pages/server/server", "my": "/pages/my/my" } }
js
const app = getApp(); Page({ data: { PageCur: 'home',//默认进入主页 Home_img: 'home_' + app.globalData.Theme, Server_img: 'server', My_img: 'my', Home_text: 'text-' + app.globalData.Theme, Server_text: 'text-gray', My_text: 'text-gray', }, //底部导航切换 NavChange(e) { let pagecur = e.currentTarget.dataset.cur; let home_img = pagecur == 'home' ? 'home_' + app.globalData.Theme:'home'; let server_img = pagecur == 'server' ? 'server_' + app.globalData.Theme : 'server'; let my_img = pagecur == 'my' ? 'my_' + app.globalData.Theme : 'my'; let home_text = pagecur == 'home' ? 'text-' + app.globalData.Theme : 'text-gray'; let server_text = pagecur == 'server' ? 'text-' + app.globalData.Theme : 'text-gray'; let my_text = pagecur == 'my' ? 'text-' + app.globalData.Theme : 'text-gray'; this.setData({ PageCur: pagecur, Home_img: home_img, Server_img: server_img, My_img: my_img, Home_text: home_text, Server_text: server_text, My_text: my_text, }) }, onShareAppMessage() { return { title: app.globalData.CoinName, imageUrl: app.globalData.ImageUrl, path: '/pages/index/index' } }, })
最后component模式的底部栏页面的参数和page有所不同,已home为例
js
组件生命周期
const app = getApp(); Component({ options: { addGlobalClass: true, }, data: { Theme: app.globalData.Theme, }, //组件的生命周期 lifetimes: { created: function () { // 在组件实例刚刚被创建时执行 var that = this; }, attached: function() { // 在组件实例进入页面节点树时执行 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, }, //组件的函数 methods: { // 组件所在页面的生命周期函数(Page里的onLoad(){},onShow(){},onShareAppMessage(){}或者自定义函数等等) }, pageLifetimes: { show: function() { // 页面被展示 }, hide: function() { // 页面被隐藏 }, resize: function(size) { // 页面尺寸变化 } } })
json
{ "component": true }
app.json
"window": { "navigationBarBackgroundColor": "#39b54a", "navigationBarTitleText": "",//文字标题(加载页头时会浮现) "navigationStyle": "custom",//使用组件样式 "navigationBarTextStyle": "white" }, "usingComponents": { "cu-custom": "/colorui/components/cu-custom"//组件的路径 },
- 点赞 3
- 收藏
- 分享
- 文章举报
- 小程序template模板与component组件的区别和使用
- taro开发微信小程序-配置tab页面
- mpvue中小程序自定义导航组件开发指南
- 小程序基础开发(四):weui-wxss组件表单页面,WxValidate.js组件表单验证上传
- Android程序开发之自定义设置TabHost,TabWidget样式
- ReactNative基础(六)使用react-navigation实现页面导航布局效果(TabNavigator)
- 微信小程序template模板与component组件的区别和使用详解
- 微信小程序wepy框架中页面page(父)与组件component(子)之间互相动态传值
- 详解mpvue中小程序自定义导航组件开发指南
- iOS开发 自定义tableView样式(使用代码/使用Interface Builder)、分组显示、给TableView增加索引、给TableView增加SearchBariOS开发 自定义tab
- iOS开发使用Tab Bar Controller实现页面导航功能
- 底部导航组件组件react-native-tab-navigator的使用
- 微信小程序template模板与component组件的区别和使用
- Android 程序开发——百度地图的使用(一) 基础配置
- 微信小程序template模板与component组件的区别和使用
- 微信小程序template模板与component组件的区别和使用
- iOS开发 自定义tableView样式(使用代码/使用Interface Builder)、分组显示、给TableView增加索引、给TableView增加SearchBar
- 只有在配置文件或 Page 指令中将 enableSessionState 设置为 true 时,才能使用会话状态。还请确保在应用程序配置的 // 节中包括 System.Web.SessionStateMod 或自定义会话状态模块 -
- Android程序开发基础之——页面传值
- ios页面自带的头部、底部bar的使用