完善:1.共用样式. 2.共用模板

.template/components/Test/index.js

@@ -7,23 +7,24 @@
  */
 Component({
   properties: {
-    is: Boolean,
-    list: Array,
-    title: String // 简化的定义方式
+    //是否可见
+    visible: {
+      type: Boolean,
+      value: true
+    },
   },
   options: {
     styleIsolation: 'apply-shared'
   },
-  externalClasses: [],
-  data: {
-    content: "content"
+  options: {
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
   },
+  externalClasses: ["custom-class"],
+  data: {},
   methods: {
     // 这里是一个自定义方法
     tagAction(e) {
-      console.log(e);
-      var eventOption = { }; // 触发事件的选项
-      this.triggerEvent("tagClick", eventOption);
+      this.triggerEvent("tagClick", e);
     }
   }
 });

.template/components/Test/index.scss

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

.template/components/Test/index.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 class="container" hover-class="none" wx:if="{{visible}}">
+    <text class="super-class" selectable="false" space="false" decode="false" bindtap="tagAction">xxxxx</text>
 </view>

.template/components/index/index.js

@@ -7,23 +7,21 @@
  */
 Component({
   properties: {
-    is: Boolean,
-    list: Array,
-    title: String // 简化的定义方式
+    //是否可见
+    visible: {
+      type: Boolean,
+      value: true
+    },
   },
   options: {
     styleIsolation: 'apply-shared'
   },
-  externalClasses: ["super-class"],
-  data: {
-    content: "content"
-  },
+  externalClasses: ["custom-class"],
+  data: {},
   methods: {
     // 这里是一个自定义方法
     tagAction(e) {
-      console.log(e);
-      var eventOption = { }; // 触发事件的选项
-      this.triggerEvent("tagClick", eventOption);
+      this.triggerEvent("tagClick", e);
     }
   }
 });

.template/components/index/index.scss

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

.template/components/index/index.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 class="container" wx:if="{{visible}}">
+    <text class="custom-class" selectable="false" space="false" decode="false" bindtap="tagAction">xxxxxx</text>
 </view>

src/apis/index.js

@@ -4,10 +4,10 @@ const { axiosPost, axiosGet } = require("../utils/request.js");
  * test
  * @returns {*|Promise|Promise<unknown>}
  */
-const postTest = params => {
+const postTest = (params) => {
   return axiosPost({
     url: "page/test",
-    data: params
+    data: params,
   });
 };
 
@@ -17,10 +17,10 @@ const postTest = params => {
  */
 const getData = () => {
   return axiosGet({
-    url: "/shakespeare/notes/28193853/user_notes"
+    url: "/shakespeare/notes/28193853/user_notes",
   });
 };
 
 module.exports = {
-  getData
+  getData,
 };

src/app.js

 //app.js
 const Request = require("./utils/request.js");
 
+/**
+ * tabBar页面路径列表 (用于链接跳转时判断)
+ * tabBarLinks为常量, 无需修改
+ */
+const tabBarLinks = ["pages/index/index"];
+
 App({
   // 处理无效页面
   onPageNotFound(res) {
@@ -16,32 +22,8 @@ App({
     // 获取设备信息并保存
     this.saveData();
 
-    // 登录
-    wx.login({
-      success: (res) => {
-        // 发送 res.code 到后台换取 openId, sessionKey, unionId
-      },
-    });
-    // 获取用户信息
-    wx.getSetting({
-      success: (res) => {
-        if (res.authSetting["scope.userInfo"]) {
-          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
-          wx.getUserInfo({
-            success: (res) => {
-              // 可以将 res 发送给后台解码出 unionId
-              this.globalData.userInfo = res.userInfo;
-
-              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-              // 所以此处加入 callback 以防止这种情况
-              if (this.userInfoReadyCallback) {
-                this.userInfoReadyCallback(res);
-              }
-            },
-          });
-        }
-      },
-    });
+    // 小程序主动更新
+    this.updateManager();
   },
   saveData() {
     // 取得设备信息
@@ -101,6 +83,82 @@ App({
       // Do something when catch error
     }
   },
+  /**
+   * 获取tabBar页面路径列表
+   */
+  getTabBarLinks: function () {
+    return tabBarLinks;
+  },
+  /**
+   * 跳转到指定页面,检查登录情况
+   * 支持tabBar页面
+   */
+  checkLoginNavigationTo: function (url, callback) {
+    if (this.globalData.userInfo == null) {
+      url = "/pages/login/login";
+    }
+    this.navigationTo(url, callback);
+  },
+  /**
+   * 跳转到指定页面
+   * 支持tabBar页面
+   */
+  navigationTo: function (url, callback) {
+    if (!url || url.length == 0) {
+      return false;
+    }
+    let tabBarLinks = this.getTabBarLinks();
+    // tabBar页面
+    if (tabBarLinks.indexOf(url) > -1) {
+      wx.switchTab({
+        url: url,
+      });
+    } else {
+      console.log("navigationTo =======" + url);
+      // 普通页面
+      wx.navigateTo({
+        url: url,
+      });
+    }
+    if (callback && typeof callback === "function") {
+      this.checkLoginCallback = callback;
+    }
+  },
+  // 更新
+  updateManager() {
+    if (!wx.canIUse("getUpdateManager")) {
+      Tip.toast("当前微信版本过低，无法使用自动更新功能，请升级到最新微信版本");
+      return false;
+    }
+    const updateManager = wx.getUpdateManager();
+    updateManager.onCheckForUpdate(function (res) {
+      // 请求完新版本信息的回调
+      if (res.hasUpdate) {
+        console.log("新版本更新");
+      }
+    });
+    updateManager.onUpdateReady(function () {
+      wx.showModal({
+        title: "更新提示",
+        content: "新版本已经准备好，即将重启应用",
+        showCancel: false,
+        success: function (res) {
+          if (res.confirm) {
+            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+            updateManager.applyUpdate();
+          }
+        },
+      });
+    });
+    updateManager.onUpdateFailed(function () {
+      // 新的版本下载失败
+      wx.showModal({
+        title: "更新提示",
+        content: "新版本下载失败",
+        showCancel: false,
+      });
+    });
+  },
   globalData: {
     userInfo: null,
     isIphoneX: false,

src/assets/styles/common.scss

 @import './style.scss';
 
 $colors: (
-  "themeColor": #8FBC8F,
+  "red": #f94f50,
+  "white": #fff,
+  "black": #282828,
 );
 
-$tc: map-get($colors, 'themeColor');
-
+@each $colorKey, $color in $colors {
+    .text-#{$colorKey} {
+        color: $color !important;
+    }
+    .bg-#{$colorKey} {
+        background-color: $color !important;
+    }
+}
 
 @mixin width($value: 100%) {
     width: $value;
@@ -14,6 +22,39 @@ $tc: map-get($colors, 'themeColor');
     height: $value;
 }
 
+@mixin line($line: 0) { 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: normal !important;
+    -webkit-line-clamp: $line;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    word-break: break-all;
+}
+
+@mixin font($size: 0) { 
+    font-size: ($size*2);
+}
+
+.line-four {
+    @include line(4);
+}
+
+.line-three {
+    @include line(3);
+}
+
+// 限制两行文字
+.line-two {
+    @include line(2);
+}
+
+// 限制一行文字
+.line-one {
+    @include line(1);
+}
+
 // width, height
 .w-100 {
     @include width();

src/assets/styles/style.scss

@@ -29,3 +29,18 @@
 .flex-wrap {
     flex-wrap: wrap;
 }
+
+.relative {
+    position: relative;
+}
+// 文字删除线
+.delete-line{
+    color: #9b9b9b;
+    text-decoration: line-through;
+    text-decoration-color: #9b9b9b;
+}
+
+.open-type-button[plain] {
+    border: 0;
+    display: inline;
+}
\ No newline at end of file

src/assets/styles/variables.scss

 // copy changein -> common/scss/_variables
 
-$base-font-size: 26rpx;
-
-$font-sizes: (
-  xxs: 0.6923,
-	// 18rpx
-  xs: 0.7692,
-  // 20rpx
-  ssm: 0.8462,
-  // 22rpx
-  sm: 0.9230,
-	// 24rpx
-  md: 1,
-  // 26rpx
-  lg: 1.0769,
-  // 28rpx
-  xl: 1.1538,
-  // 30rpx
+$fonts: (
+  20,
+  22,
+  24,
+  26,
+  28,
+  30,
+  32,
+  34,
+  36,
+  38,
+  40,
 );
 
+// 字体
+@each $size in $fonts {
+  .fs-#{$size} {
+      font-size: $size * 1rpx;
+  }
+}
+
 // spacing
 // 0-5: 0
 // .mt-1  => margin top  .pb-2
@@ -26,18 +28,53 @@ $spacing-types: (
   m: margin,
   p: padding,
 );
-
 $spacing-directions: (
   t: top,
   r: right,
   b: bottom,
   l: left,
 );
+$spacing-base-size: 1rpx;
+$spacing-sizes: (
+  0,
+  10,
+  20,
+  30,
+  40,
+  50,
+  60,
+  70,
+  80,
+  90,
+  100,
+);
 
-
-@each $sizeKey, $size in $font-sizes {
-  .fs-#{$sizeKey} {
-    font-size: $size * $base-font-size;
+// m-0, mx-0
+@each $typeKey, $type in $spacing-types {
+  // .m-10
+  @each $size in $spacing-sizes {
+    .#{$typeKey}-#{$size} {
+      #{$type}: $size * $spacing-base-size;
+    }
+  }
+  // .mx-10 , .my-10
+  @each $size in $spacing-sizes {
+    .#{$typeKey}x-#{$size} {
+      #{$type}-left: $size * $spacing-base-size;
+      #{$type}-right: $size * $spacing-base-size;
+    }
+    .#{$typeKey}y-#{$size} {
+      #{$type}-top: $size * $spacing-base-size;
+      #{$type}-bottom: $size * $spacing-base-size;
+    }
+  }
+  // .mt-10
+  @each $directionKey, $direction in $spacing-directions {
+    @each $size in $spacing-sizes {
+      .#{$typeKey}#{$directionKey}-#{$size} {
+        #{$type}-#{$direction}: $size * $spacing-base-size;
+      }
+    }
   }
 }
 
@@ -65,13 +102,13 @@ $flex-align-items: (
 );
 
 @each $key, $value in $flex-justify-content {
-    .justify-#{$key} {
+    .flex-justify-#{$key} {
       justify-content: $value;
     }
 }
 
 @each $key, $value in $flex-align-items {
-    .align-#{$key} {
+    .flex-align-#{$key} {
       align-items: $value;
     }
 }
\ No newline at end of file

src/components/navigationbar/index.js

@@ -11,6 +11,7 @@ Component({
   properties: {
     title: String,
     titleColor: String,
+    showLeftIcon: Boolean,
     leftIcon: String,
     titleOpcity: {
       type: Number,
@@ -24,8 +25,12 @@ Component({
       type: Number,
       value: 0,
     },
+    fixed: {
+      type: Boolean,
+      value: true,
+    },
+    backgroundColor: String,
   },
-  externalClasses: ["super-class"],
   data: {
     navBar: 0,
     statusBarHeight: app.globalData.statusBarHeight,
@@ -51,14 +56,17 @@ Component({
         menuHeight: app.globalData.menuHeight, // 胶囊高度（自定义内容可与胶囊高度保证一致）
         navBar: app.globalData.customBarHeight - app.globalData.statusBarHeight,
         navBarHeight: app.globalData.customBarHeight,
-        top: app.globalData.menuBottonTop,
+        top: app.globalData.top,
       });
     },
     // 这里是一个自定义方法
-    tagAction(e) {
-      console.log(e);
-      var eventOption = {}; // 触发事件的选项
-      this.triggerEvent("tagClick", eventOption);
+    back(e) {
+      this.triggerEvent("back", {});
+    },
+    backHome(e) {
+      wx.switchTab({
+        url: "/pages/index/index",
+      });
     },
   },
 });

src/components/navigationbar/index.scss

 
-.container {
+.navigationbar-container {
   width: 100vw;
   position: fixed;
   left: 0;
@@ -8,4 +8,10 @@
   .header-view {
     text-align: center;
   }
+  .left-header-icon {
+    position: absolute;
+    .icon {
+      margin-left: 29rpx;
+    }
+  }
 }
\ 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="navigationbar-container" hover-class="none" hover-stop-propagation="false" >
+  <view class="navigationbar" hover-class="none" 
+  style="height:{{navBarHeight}}px; background:{{backgroundColor}};">
       <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 class="left-header-icon" 
+      style="margin-left:{{menuRight}}px; top:{{statusBarHeight+navBar/2-12}}px;" wx:if="{{showLeftIcon}}" >
+        <van-icon name="arrow-left" color="{{opcity>=1?'#000':'#fff'}}" size="24px" bind:click="back"/>
+        <!-- <image class="icon" style="color:{{opcity>=1?'#000':'#fff'}};" src="../../assets/images/index/back_home.png" lazy-load="false" binderror="" /> -->
+        <van-icon name="wap-home-o" custom-class="icon" color="{{opcity>=1?'#000':'#fff'}}" size="24px" bind:click="backHome"/>
       </view>
+  </view>
+  <view class="" style="height:{{fixed?0:navBarHeight*2}}rpx;"/>
 </view>

src/constants/index.js

 export const EMPLOYEE_STATUS = {
   NORMAL: {
     value: 1,
-        desc: '正常'
+    desc: "正常",
   },
   DISABLED: {
     value: 1,
-        desc: '禁用'
+    desc: "禁用",
   },
   DELETED: {
     value: 2,
-        desc: '已删除'
-    }
+    desc: "已删除",
+  },
 };
 
 export default {
-    EMPLOYEE_STATUS
+  EMPLOYEE_STATUS,
 };

src/pages/index/index.scss

 
 .container {
-
-    .userinfo {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        .userinfo-avatar {
-            width: 128rpx;
-            height: 128rpx;
-            margin: 20rpx;
-            border-radius: 50%;
-        }
-
-        .userinfo-nickname {
-            color: #aaa;
-        }
-    }
-
     .usermotto {
         text-align: center;
         margin-top: 200px;

src/pages/index/index.wxml

 <!--index.wxml-->
 <view class="container">
 
-  <NavigationBar title="首界面" opcity="{{1}}" />
+  <NavigationBar title="首页" opcity="{{1}}" />
 
-  <view class="userinfo">
-    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
-    <block wx:else>
-      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
-    </block>
-  </view>
   <view class="usermotto">
     <button bind:tap="requestAction"> 网络请求 </button>
   </view>

src/utils/util.js

-const formatTime = date => {
+const formatTime = (date) => {
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
   const day = date.getDate();
@@ -9,11 +9,11 @@ const formatTime = date => {
   return time + " " + [hour, minute, second].map(formatNumber).join(":");
 };
 
-const formatNumber = n => {
+const formatNumber = (n) => {
   n = n.toString();
   return n[1] ? n : "0" + n;
 };
 
 module.exports = {
-  formatTime: formatTime
+  formatTime,
 };