微信小程序自定义组件标题栏

  学过android的同学应该都知道，有时候在每个页面在顶部都会有个标题栏也就是titlebar。一般的写法都是在布局文件中大好时光布局，然后在详细的fragment或activity中布局中直接引用就可以了。然而在小程序中也可以这样，那么小程序应该怎么写呢，先上图。

一.在根目录创建一个为components的文件夹作为组件文件夹

二.在这个文件夹下面创建自己组件名称的文件夹

三.在自己创建的组件文件夹下右键，选择component 

 

四.打开main-navi.wxml文件编写布局

看到最上边的一个图，我就中间一个文字。搞了一个简单的，如果你还有另外的需求，按照这个套路添加就行。看到下面代码中间直接放了一个text标签。

<!--components/main-navi/main-navi.wxml-->
<view class="title">

  <text>{{title}}</text>

</view>

五.编写main-navi.wxss文件

/* components/main-navi/main-navi.wxss */

.title{
  background: #3cc51f;
  display: flex;
}

.title text{
  align-items: center;
  line-height: 140rpx;
  margin: 0 auto;
  z-index: 200;
}

六.编写main-navi.js文件

给他一个暴露的属性，到时候直接设置给title标题的文字。naviinfo对象是从app中获取的，微信小程序开发文档中可以查询。

// components/main-navi/main-navi.js
let app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: 'aa'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    naviInfo: app.globalData.naviInfo
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

七.使用这个组件

  在你正常的page中的.json文件中引入这个组件。 例如我这个是否支持组件，然后引入刚才自己自定义的组件，导航风格改custom自定义。

{
  "component": true,
  "usingComponents": {
    "main-navi": "../../components/main-navi/main-navi"
  },
  "navigationStyle": "custom"
}

 然后在你当前page中的.wxml文件中直接引入这个组件就可以使用了。title是我们刚才公开的属性直接设置就可以。现在运行已经可以看到开头的标题了。

<!--pages/index/index.wxml-->
<main-navi title="位置查询"></main-navi>

当然动态的也可以额把位置查询这几个字{{}} ,通过双大括号的方式，直接引入data中数据就可以了。

<!--pages/index/index.wxml-->
<main-navi title="{{title}}"></main-navi>

 然后在对应.js文件data方法定义这个属性就可以了。可以不是title, 上面大括号中可以随便定义，你给name在.js文件给name赋值就可以了。

 data: {
    name: "",
    title:"位置查询"
  },

 

   最近在写微信小程序，发现只要以前接触过的东西。现在在看看比一开始是熟悉的，所以说对于一个陌生的领域，试着接触一下  。也许以后真的用到的时候，不会那么的手忙脚乱。最近用hexo搭载了一个个人博客，如果有兴趣的同学留言可以写一篇博客。先看看我的吧 www.zhaolei.site