新增:自定义导航组件navigationbar

.template/components/Test/index.js

@@ -17,7 +17,8 @@ Component({
   methods: {
     // 这里是一个自定义方法
     tagAction(e) {
-      var eventOption = { content: e.currentTarget.dataset.text }; // 触发事件的选项
+      console.log(e);
+      var eventOption = { }; // 触发事件的选项
       this.triggerEvent("tagClick", eventOption);
     }
   }

.template/components/index/index.js

@@ -17,7 +17,8 @@ Component({
   methods: {
     // 这里是一个自定义方法
     tagAction(e) {
-      var eventOption = { content: e.currentTarget.dataset.text }; // 触发事件的选项
+      console.log(e);
+      var eventOption = { }; // 触发事件的选项
       this.triggerEvent("tagClick", eventOption);
     }
   }

src/app.js

@@ -5,10 +5,9 @@ App({
   onLaunch: function() {
     // 初始化axios
     Request.initAxios();
-    // 展示本地存储能力
-    var logs = wx.getStorageSync("logs") || [];
-    logs.unshift(Date.now());
-    wx.setStorageSync("logs", logs);
+
+    // 获取设备信息并保存
+    this.saveData();
    
     // 登录
     wx.login({
@@ -37,7 +36,65 @@ App({
       }
     });
   },
+  saveData() {
+    // 取得设备信息
+    try {
+      // const res = wx.getSystemInfoSync()
+      const that = this
+      wx.getSystemInfo({
+          success(res) {
+              // 根据不同的手机算出状态栏的高度
+              let custom = null
+              try {
+                  custom = wx.getMenuButtonBoundingClientRect()
+                  that.globalData.devicePixelRatio = res.devicePixelRatio
+                  that.globalData.statusBarHeight = res.statusBarHeight
+                  that.globalData.customBarHeight = custom.bottom + custom.top - res.statusBarHeight
+                  that.globalData.menuBotton = custom.top - res.statusBarHeight,
+                  that.globalData.menuRight = res.screenWidth - custom.right, // 胶囊距右方间距（方保持左、右间距一致）
+                  that.globalData.menuHeight = custom.height // 胶囊高度（自定义内容可与胶囊高度保证一致）
+                  that.globalData.menuBottonTop = custom.top + (custom.height - 32) / 2
+              } catch (e) {
+                  that.globalData.devicePixelRatio = 1 //res.devicePixelRatio
+                  that.globalData.statusBarHeight = 20 //res.statusBarHeight
+                  that.globalData.customBarHeight = 60 //res.statusBarHeight
+              }
+
+              if (res.screenHeight / res.screenWidth > 2 && res.platform == "android") {
+                  that.globalData.isIphoneX = true
+              }
+
+              // console.log('手机信息res' + res.model.search('iPhone X'))
+              let modelmes = res.model
+              if (modelmes.search('iPhone X') != -1 || modelmes.search('iPhone XR') != -1) {
+                  that.globalData.isIphoneX = true
+              }
+
+              console.log(res.screenHeight, res.screenWidth, res, 'screenWidth')
+
+              // console.log(res)
+              if (opts.query.channel && opts.query.channel !== '') that.globalData.channel = opts.query.channel
+                  // console.log(that.globalData.channel)
+
+              that.globalData.uuid = util.guid()
+              wx.setStorageSync('uuid', that.globalData.uuid)
+              wx.setStorageSync('systemInfo', JSON.stringify(res))
+          }
+      })
+
+    } catch (e) {
+        // Do something when catch error
+    }
+  },
   globalData: {
-    userInfo: null
+    userInfo: null,
+    isIphoneX: false,
+    menuBottonTop: 0,
+    devicePixelRatio: 1,
+    statusBarHeight: 20,
+    customBarHeight: 60,
+    menuBotton : 0,
+    menuRight : 0, // 胶囊距右方间距（方保持左、右间距一致）
+    menuHeight: 0
   }
 });

src/components/home-header/home-header.js

-/**
- *  除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
- *  参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
- *  采用 externalClasses 的方式 在组件.wxml需要的view的class加super-class，可以是多个
- *  使用 <Component super-class="<#type#>" />
- */
-Component({
-  properties: {
-    is: Boolean,
-    list: Array,
-    title: String // 简化的定义方式
-  },
-  externalClasses: ["super-class"],
-  data: {
-    content: "content"
-  },
-  methods: {
-    // 这里是一个自定义方法
-    tagAction(e) {
-      var eventOption = { content: e.currentTarget.dataset.text }; // 触发事件的选项
-      this.triggerEvent("tagClick", eventOption);
-    }
-  }
-});

src/components/home-header/home-header.scss

-.container {
-  width: 100vw;
-  .text {
-    color: red;
-  }
-}
\ No newline at end of file

src/components/home-header/home-header.wxml

-<!--template/components/index.wxml-->
-<view class="container" hover-class="none" hover-stop-propagation="false">
-    <text class="flex-item super-class" selectable="false" space="false" decode="false" bindtap="tagAction" data-text="{{content}}">{{content}}</text>
-</view>

src/components/navigationbar/index.js

+/**
+ *  除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
+ *  参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
+ *  采用 externalClasses 的方式 在组件.wxml需要的view的class加super-class，可以是多个
+ *  使用 <Component super-class="<#type#>" />
+ */
+
+let app =  getApp();
+
+Component({
+  properties: {
+    title: String,
+    titleColor: String,
+    leftIcon: String,
+    titleOpcity: {
+      type: Number,
+      value: 1
+    },
+    opcity: {
+      type: Number,
+      value: 0
+    },
+    iconOpcity: {
+      type: Number,
+      value: 0
+    }
+  },
+  externalClasses: ["super-class"],
+  data: {
+    navBar: 0,
+    statusBarHeight: app.globalData.statusBarHeight,
+    navBarHeight: 0, // 导航栏高度 = navBar + 状态栏高度
+    menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
+    menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
+    menuHeight: 0 // 胶囊高度（自定义内容可与胶囊高度保证一致）
+  },
+  pageLifetimes: {
+    // 组件所在页面的生命周期函数
+    show: function() {
+
+      this.setNavBarInfo();
+    }
+  },
+  methods: {
+    /**
+     * @description 设置导航栏信息
+     */
+    setNavBarInfo() {
+      this.setData({
+        menuBotton: app.globalData.menuBotton,
+        menuRight: app.globalData.menuRight, // 胶囊距右方间距（方保持左、右间距一致）
+        menuHeight: app.globalData.menuHeight, // 胶囊高度（自定义内容可与胶囊高度保证一致）
+        navBar: app.globalData.customBarHeight - app.globalData.statusBarHeight,
+        navBarHeight: app.globalData.customBarHeight,
+        top: app.globalData.menuBottonTop
+      });
+    },
+    // 这里是一个自定义方法
+    tagAction(e) {
+      console.log(e);
+      var eventOption = { }; // 触发事件的选项
+      this.triggerEvent("tagClick", eventOption);
+    }
+  }
+});

src/components/navigationbar/index.scss

+
+.container {
+  width: 100vw;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 9998;
+  .header-view {
+    text-align: center;
+  }
+}
\ No newline at end of file

src/components/navigationbar/index.wxml

+<!--template/components/index.wxml-->
+
+<view class="container" hover-class="none" hover-stop-propagation="false" style="height:{{navBarHeight}}px; background:rgba(255,255,255,{{opcity}});">
+    <view class="header-view" 
+    style="padding-top:{{statusBarHeight}}px; opacity:{{titleOpcity}}; box-sizing:unset; color:{{titleColor}}; height:{{navBar}}px; line-height:{{navBar}}px;">{{title}}</view>
+    <view class="left-header-icon" style="margin-top:{{top}}px" wx:if="{{leftIcon}}">
+      <image class="left-icon" src="{{leftIcon}}" size="32" color="{{opcity>=1?'#000':'#fff'}}" bindtap="tagAction" style="background:rgba(33, 33, 33, {{iconOpcity}});" />
+    </view>
+</view>

src/pages/index/index.json

 {
   "navigationBarTitleText": "首页",
   "navigationStyle": "custom",
-  "usingComponents": {}
+  "usingComponents": {
+    "NavigationBar":"../../components/navigationbar/index"
+  }
 }

src/pages/index/index.wxml

 <!--index.wxml-->
 <view class="container">
+
+  <NavigationBar title="首界面" opcity="{{1}}" />
+
   <view class="userinfo">
     <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
     <block wx:else>