初始化

components/navbarWeChat/index.js

@@ -0,0 +1,33 @@
+const app = getApp()
+Component({
+  properties: {
+    navbarData: {   //navbarData   由父页面传递的数据，变量名字自命名
+      type: Object,
+      value: {},
+      observer: function (newVal, oldVal) { }
+    }
+  },
+  data: {
+    height: '',
+    //默认值  默认显示左上角
+    navbarData: {
+      showCapsule: 1
+    }
+  },
+  attached: function () {
+    // 获取是否是通过分享进入的小程序
+    this.setData({
+      share: app.globalData.share
+    })
+    // 定义导航栏的高度   方便对齐
+    this.setData({
+      height: app.globalData.height
+    })
+  },
+  methods: {
+    // 返回上一页面
+    _navback() {
+      wx.navigateBack()
+    }
+  }
+}) 

components/navbarWeChat/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

components/navbarWeChat/index.wxml

@@ -0,0 +1,12 @@
+<view class='nav-wrap' style='height: {{height*2 + 20}}px;'>
+  <view class='nav-title' style='line-height: {{height*2 + 40}}px;'>{{navbarData.title}}</view>
+  <view style='display: flex; justify-content: space-around;flex-direction: column'>
+   
+    <view class='nav-capsule' style='height: {{height*2 + 40}}px;' wx:if='{{navbarData.showCapsule}}'>
+     
+      <!-- <view bindtap='_navback' >
+        <image src='../../pages/images/you.png' mode='aspectFill' class='back-pre'></image>
+      </view> -->
+    </view>
+  </view>
+</view>

components/navbarWeChat/index.wxss

@@ -0,0 +1,53 @@
+/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
+
+.nav-wrap {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  background: #fff;
+  color: #000;
+  z-index: 9999999;
+}
+
+/* 标题要居中 */
+
+.nav-title {
+  position: absolute;
+  text-align: center;
+  max-width: 400rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  font-size: 36rpx;
+  color: #2c2b2b;
+  font-weight: 600;
+}
+
+.nav-capsule {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  width: 90px;
+  justify-content: space-between;
+  height: 100%;
+}
+
+
+
+.back-pre, .back-home {
+  width: 10px;
+  height: 20px;
+  margin-top: 8px;
+  padding: 10px;
+}
+
+.nav-capsule .back-home {
+  width: 70px;
+  height: 28px;
+  margin-top: 3rpx;
+}