2020 April 22 小程序

第五章：豆瓣项目之自定义组件、自定义导航栏

自定义组件

  1. 一个组件包括： js、wxml、wxss、json
  2. 场景：由于首页的电影item与电影列表里面的item一样，因此考虑把电影item封装成一个组件movie-item
  3. 操作步骤
    1. 打开“微信开发者工具”，点击左上角的“+”，在主目录下创建一个cmps文件夹，与pages同级
    2. 然后右击“新建 目录” -> movie-item文件夹
    3. 右击“movie-item” 新建component(组件)，命名为movie-item（注意微信小程序官方定义的组件都用-表示）
  4. 封装组件：

    1. 组件movie-item.wxml内部封装

       //movie-item 组件wxml，添加事件监听： bind:tap
 <view class="item" bind:tap="detail" >
     *{name}} + *{ size}}
 </view>

    2. 组件传值、事件传递movie-item.js

      1. 在properties字段中自定义属性，用来传递值
      2. 在methods中可以将当前组件操作的所有事件传递出去，提供外面监听
       // cmps/movie-item/movie-item.js
 Component({
   /**
    * 组件的属性列表
    */
   properties: {
     // 属性
     name:{
       // 类型
       type: String,
       // 值
       value: ''
     },
     // 属性
     size:{
       type: Number,
       value: 0
     }
   },
   /**
    * 组件的初始数据
    */
   data: {
        
   },
   /**
    * 组件的方法列表
    * 时间处理方法
    */
   methods: {
     // 时间监听
     detail: function() {
       console.log('-------');
        //事件传递： 将事件传递出去，相当于block闭包，同时传递一个对象出去
        this.triggerEvent('movieItemClick',{age: 18})
     }
   }
 })
  5. 使用组件

    1. 在home.json中表明使用哪个组件

       {
   "usingComponents":{
     //组件名称（可以随便写，但是使用的时候用这个）: 组件路径
     "movie-item":"/cmps/movie-item/movie-item"
   }
 }

    2. 组件外部使用home.wxml：属性传值、事件监听

       <movie-item  
 name="hhh" 
 size="18"
 //home页面监听组件movie-item的点击事件
 bind:back ="movieItemClick"
 >
 </movie-item>

    3. home.js中响应

        Page({
   //监听组件movie-item的点击
   movieItemClick: function(evt){
     console.log('back监听',evt.detail);
   },
 })

TabBar的设置

  1. 官方文档->指南->配置小程序->全局配置，点击里面的“小程序全局配置”,然后里面可以找到tabBar的设置

  2. app.json中加入：

     "tabBar": {
     //tabBar颜色
     "color": "#AAAAAA",
     //选中颜色
     "selectedColor": "#56B465",
     //背景色
     "backgroundColor": "#ffffff",
     "list": [
       {
         "pagePath": "pages/home/home",
         "text": "首页",
         "iconPath": "/assets/imgs/ic_tab_home_normal.png",
         "selectedIconPath": "/assets/imgs/ic_tab_home_active.png"
       },
       {
         "pagePath": "pages/rank/rank",
         "text": "榜单",
         "iconPath": "/assets/imgs/ic_tab_subject_normal.png",
         "selectedIconPath": "/assets/imgs/ic_tab_subject_active.png"
       },
       {
         "pagePath": "pages/profile/profile",
         "text": "我的",
         "iconPath": "/assets/imgs/ic_tab_profile_normal.png",
         "selectedIconPath": "/assets/imgs/ic_tab_profile_active.png"
       }
     ]
 }

自定义导航栏

  1. 微信小程序官方设置导航栏

    1. 方式一：页面全局配置， 官方文档->指南->配置小程序->页面配置

       {
   //设置导航栏的背景色
   "navigationBarBackgroundColor": "#ffffff",
   //导航栏文字颜色
   "navigationBarTextStyle": "black",
   "navigationBarTitleText": "微信接口功能演示",
   "backgroundColor": "#eeeeee",
   "backgroundTextStyle": "light"
 }

    2. 方式二：通过API设置,API->界面->导航栏

       wx.setNavigationBarColor({
   frontColor: '#ffffff',
   backgroundColor: '#ff0000',
   animation: {
     duration: 400,
     timingFunc: 'easeIn'
   }
 })

    3. 缺点：在安卓手机显示不正常

  2. 自定义导航栏
    1. 官方文档->指南->配置小程序->页面配置->点击里面的“小程序页面配置”
      1. navigationStyle：default 默认样式; custom 自定义导航栏，只保留右上角胶囊按钮
    2. 某个页面自定义导航栏
      1. 在当前页面的json文件中设置属性"navigationStyle":"custom"
    3. 全局配置自定义导航栏
      1. 在app.json中，window字段下设置："navigationStyle":"custom"
      2. 自定义导航栏组件
        1. 在cmps文件夹下简历一个nav-bar文件夹，右击新建component(组件)，命名为nav-bar
    4. 封装代码

      1. nav-bar.wxml文件：

         <!--cmps/nav-bar/nav-bar.wxml-->
 <!-- 占位控件高度，否则导航栏会覆盖内容 -->
 <view style="height:*{topheight}}px"></view>
 <view class="container" style="height:*{topheight}}px">
     <!-- 状态栏 -->
     <!-- 高度是动态的 -->
     <view style="*{statusBarStyle}}">
     </view>
     <!-- 导航栏 -->
     <view class="nav-bar" style="*{navBarStyle}}">
         *{title}}
         <view class="icons">
             <image bind:tap="back" wx:if="*{back == 'true'}}" class="back" src="/assets/imgs/nav_back.png" />
             <image bind:tap="home" wx:if="*{home == 'true'}}"  class="home" src="/assets/imgs/nav_home.png" /> 
         </view>
     </view>
 </view>

      2. nav-bar.wxss文件：

         /* cmps/nav-bar/nav-bar.wxss */

 /* 这里面主要是写可以固定死的东西 */
 /* 导航栏悬浮效果 */
 /* 方法1： sticky: 设置粘性效果
     真机不支持这个属性
  */
 /* .container{
     position: sticky;
     top: 0; */
     /* 设置层级 */
     /* z-index: 99;
 } */
 /* 
 方法2： 用fixed设置悬浮，但是仍有缺点
 默认，内容会从顶部开始布局，导航栏会覆盖内容，因此导航栏封装wxml内部需要搞一个占位高度
 */
 .container{
     position: fixed;
     top: 0;
     width: 100%;
     /* 设置层级 */
     z-index: 99;
 }
 .nav-bar {
     display: flex;
     justify-content: center;
     align-items: center;
     /* 父相 */
     position: relative;
     font-size: 32rpx;
     font-weight: bold;
 }
 .icons {
     /* 子绝对 */
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     display: flex;
     align-items: center;
     padding: 0 30rpx;
 }
 .icons image {
     width: 32rpx;
     height: 32rpx;
 }
 .home {
     margin-left: 40rpx;
 }

      3. nav-bar.js

         // cmps/nav-bar/nav-bar.js
 Component({
   /**
    * 组件的属性列表
    */
   properties: {
     // 导航栏标题
     title: {
       type: String
     },
     // 文字颜色
     titleColor:{
       type: String,
       value: '#000000'
     },
     // 导航栏背景色
     navBarColor:{
       type: String,
       value: '#ffffff'
     },
     // 状态栏颜色
     statusBarColor:{
       type: String,
       value: '#ffffff'
     },
     // 返回按钮是否显示
     back:{
       type: String,
       value: 'true'
     },
     // home按钮是否显示
     home:{
       type: String,
       value: 'true'
     }
   },
            
   /**
    * 组件的初始数据
    */
   data: {
      statusBarStyle :'', //状态栏样式
      navBarStyle :'' ,  //导航栏样式
      topheight: 0
   },
            
   /**
    * 组件的方法列表
    */
   methods: {
     back: function(){
       wx.navigateBack({
         delta: 1  //往前跳转到几个页面
       }); 
       // 将事件传递出去，相当于block闭包
       this.triggerEvent('back',{name:'zh'});
     },
     home: function(){
       wx.navigateBack({
         delta: 999  //往前跳转到几个页面
       });
        // 将事件传递出去，相当于block闭包
       this.triggerEvent('home',{age: 18})
     }
   },
   /**
    * 指南->自定义组件->组件声明周期
    */
   lifetimes: {
     attached: function() {
       //官方文档：  API->基础->系统
       //根据当前机型，获取状态栏高度，导航栏高度，封装在app.js中
       // 注意这里一定是px
       const statusBarStyle =`
       height:${wx.db.statusBarHeight}px;
       background-color:${this.data.statusBarColor};
       `;
       const navBarStyle =`
       color: ${this.data.titleColor};
       height:${wx.db.navBarHeight}px;
       background-color:${this.data.navBarColor};
       `;
       // 在组件实例进入页面节点树时执行
       this.setData({
         statusBarStyle: statusBarStyle,
         navBarStyle: navBarStyle,
         topheight: wx.db.navBarHeight+wx.db.statusBarHeight
       })
     },
     detached: function() {
       // 在组件实例被从页面节点树移除时执行
     },
   }
 })
    5. 外部使用：

      1. home.wxml页面使用：

         <nav-bar 
 title="首页"
 navBarColor="#42bd55"
 statusBarColor="#42bd55"
 back="false"
 home="false"
 titleColor="#ffffff"
 ></nav-bar>

      2. list.xml页面使用：

         <!-- back、home事件传递 -->
 <nav-bar 
 bind:back ="back"
 bind:home ="home"
 title="*{title}}"
 > </nav-bar>

        1. list.js监听导航栏“返回”、“home”点击

           // pages/list/list.js
 Page({
   back: function(evt){
     console.log('back监听',evt.detail);
   },
   home:function(evt){
     console.log('home监听',evt.detail);
   }
 })

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents