将调试内容抽离出Component

.gitignore

@@ -15,3 +15,4 @@
 .vscode
 
 ignore/*
+start-nacos.bat

README.md

@@ -337,6 +337,10 @@ npm run build:alipay
 
 打开**小程序开发者工具**，小程序目录选择 `miniprogram/dist` 目录
 
+**重点：点开右上角【详情】，勾选【小程序配置】下的 `启用小程序基础库2.0构建` 和 `编译node_modules模块（ES6转ES5）`。**
+
+需要注意的是，支付宝小程序打包很慢，需要等比较长的时间。
+
 接下来按照正常的小程序发布流程进行发布即可。发布前记得测试小程序各功能是否正常。
 
 

backend-mock/index.js

@@ -56,9 +56,9 @@ server.on("request", (req, res) => {
     res.end();
 })
 
-// 4. 监听端口，为了避免端口冲突，这里给一个本机端口3000
+// 4. 监听端口，为了避免端口冲突，这里给一个本机端口
-server.listen(8080, () => {
+server.listen(80, () => {
-    let baseUrl = 'http://localhost:8080';
+    let baseUrl = 'http://localhost:80';
     console.log(`服务启动成功: ${baseUrl}/`);
     console.log();
     console.log(`${baseUrl}/user/login`);

miniprogram/project.alipay.json

@@ -0,0 +1,5 @@
+{
+  "enableAppxNg": true,
+  "enableNodeModuleBabelTransform": false,
+  "miniprogramRoot": "./"
+}

miniprogram/src/components/DebugComp.vue

@@ -0,0 +1,49 @@
+<template>
+  <view v-if="debugMode">
+    <button @tap='debugCleanCache'>清除缓存</button>
+    <textarea maxlength="-1" disabled="true" auto-height="true" :value="debugText"></textarea>
+  </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro'
+import { eventCenter, getCurrentInstance } from '@tarojs/taro'
+
+export default {
+  data() {
+    return {
+      userInfo: null,
+      debugMode: Taro.getApp().globalData.debugMode,
+      debugText: "",
+    }
+  },
+  mounted() {
+    eventCenter.once(getCurrentInstance().router.onShow, () => {
+      this.userInfo = Taro.getStorageSync("userInfo");
+      this.displayUsername = this.userInfo?.username ?? "请登录";
+      this.debugText = JSON.stringify({
+        "TARO_ENV": process.env.TARO_ENV,
+        // "isVisitor": this.isVisitor,
+        // "isUser": this.isUser,
+        // "isAdmin": this.isAdmin,
+        "userInfo": this.userInfo || 'null'
+      }, null, 4)
+    })
+  },
+  methods: {
+    debugCleanCache() {
+      Taro.clearStorage({
+        success: function () {
+          Taro.showToast({
+            title: "成功",
+            icon: 'success'
+          })
+          Taro.reLaunch({
+            url: '/pages/index/index'
+          })
+        }
+      })
+    }
+  }
+}
+</script>

miniprogram/src/pages/index/index.vue

@@ -96,16 +96,14 @@
     </view>
   </view>
 
-  <view v-if="debugMode">
+  <DebugComp />
-    <button @tap='debugCleanCache'>清除缓存</button>
-    <text decode="nbsp">{{ debugText }}</text>
-  </view>
 </template>
 
 <script>
 import Taro from '@tarojs/taro'
 import { eventCenter, getCurrentInstance } from '@tarojs/taro'
 import ENUM from '../../utils/const.js'
+import DebugComp from '../../components/DebugComp.vue'
 
 import './index.css'
 
@@ -118,15 +116,15 @@ export default {
       isVisitor: false,
       isUser: false,
       isAdmin: false,
-      debugMode: Taro.getApp().globalData.debugMode,
-      debugText: "",
     }
   },
+  components: {
+    DebugComp
+  },
   mounted() {
     eventCenter.once(getCurrentInstance().router.onShow, () => {
       console.log('onShow')
       console.log("ENUM", ENUM)
-      console.log("debugMode", this.debugMode)
 
       this.userInfo = Taro.getStorageSync("userInfo");
       this.displayUsername = this.userInfo?.username ?? "请登录";
@@ -154,36 +152,14 @@ export default {
           "isUser", this.isUser,
           "isAdmin", this.isAdmin
         )
-        this.debugText = JSON.stringify({
-          "isVisitor": this.isVisitor,
-          "isUser": this.isUser,
-          "isAdmin": this.isAdmin,
-          "userInfo": this.userInfo
-        }, null, 4).replace(/[ ]/g, '&nbsp;&nbsp;')
       }
     })
   },
   methods: {
     goCode() {
-      // Taro.navigateTo({
-      //   url: '/pages/residents/code'
-      // })
       Taro.switchTab({
         url: '/pages/residents/code'
       })
-    },
-    debugCleanCache() {
-      Taro.clearStorage({
-        success: function () {
-          Taro.showToast({
-            title: "成功",
-            icon: 'success'
-          })
-          Taro.reLaunch({
-            url: '/pages/index/index'
-          })
-        }
-      })
     }
   }
 }

miniprogram/src/pages/index/login.vue

@@ -1,5 +1,4 @@
 <template>
-  <!--pages/login/login.wxml-->
   <view class="container">
     <view class="login-icon">
       <image class="login-img" src="../../image/icon/login-background.svg"></image>
@@ -7,9 +6,9 @@
     <view class="login-from">
       <view class="inputView">
         <!--账号-->
-        <input v-model="username" class="inputText" placeholder="账号" />
+        <input class="inputText" placeholder="账号" v-model="username" />
         <!--密码-->
-        <input v-model="password" class="inputText" placeholder="密码" password="true" />
+        <input class="inputText" placeholder="密码" v-model="password" password="true" />
       </view>
       <view class="loginBtnView">
         <!--按钮-->