您的位置:首页 > 移动开发 > 微信开发

小程序基础开发(一):配置tab底部栏页面,page和component的区别,使用component自定义头部组件样式和底部导航

2020-02-06 01:29 686 查看

目录

  • 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
    • 收藏
    • 分享
    • 文章举报
    金木研- 发布了13 篇原创文章 · 获赞 3 · 访问量 472 私信 关注
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: 
    相关文章推荐