出入码下拉刷新功能；内网穿透配置文件

README.md

@@ -415,6 +415,18 @@ npm run serve
 
 - 启动后端微服务注册中心：nacos
 
+- 在本地启动Gateway及各个微服务项目
+
+- 在服务器端启动内网穿透Server端，在本地启动内网穿透Client端
+
+  ```bash
+  cd ./intranet-penetration/bin
+  # server
+  rathole ../conf/server.toml
+  # client
+  rathole.exe ../conf/client.toml
+  ```
+
 - 启动接口测试工具：Postman
 
 - 启动命令行：`npm run dev:alipay`(支付宝小程序)、`npm run dev:weapp`(微信小程序)

backend-mock/index.js

@@ -6,6 +6,8 @@ const server = http.createServer();
 
 // 3. 监听请求事件
 server.on("request", (req, res) => {
+    console.log(new Date(), "req.url", req.url);
+
     //req-->request 请求对象， res-->response 响应对象
     // 通过响应头设置返回前台数据格式及编码。（解决中文乱码的问题）
     // res.setHeader('Content-Type', 'text/html;charset=utf-8');

intranet-penetration/.gitignore

@@ -0,0 +1,4 @@
+bin/rathole
+bin/rathole.exe
+conf/client.toml
+conf/server.toml

intranet-penetration/README.md

@@ -0,0 +1,29 @@
+# 内网穿透
+
+> 开发时，在本地电脑启动后端服务，然后通过内网穿透进行小程序真机调试。
+
+需要有一台公网服务器，一个域名（可选），以及服务器打开对应端口
+
+## bin 二进制文件下载
+
+GitHub: https://github.com/rapiz1/rathole/
+
+## 配置
+
+修改 conf 文件夹中配置文件
+
+## 启动
+
+服务端
+
+```bash
+cd bin
+rathole ../conf/server.toml
+```
+
+本地
+
+```bash
+cd bin
+rathole.exe ../conf/client.toml
+```

intranet-penetration/conf/client.example.toml

@@ -0,0 +1,5 @@
+[client]
+remote_addr = "xxx.xxx.xxx.xxx:yyy" # 服务器的地址。端口必须与 `server.bind_addr` 中的端口相同。
+[client.services.zzzz]
+token = "xxxxxxxxxxxxxxxxx" # 必须与服务器相同以通过验证
+local_addr = "127.0.0.1:80" # 需要被转发的服务的地址

intranet-penetration/conf/server.example.toml

@@ -0,0 +1,5 @@
+[server]
+bind_addr = "xxx.xxx.xxx.xxx:yyy" # `yyy` 配置了服务端监听客户端连接的端口
+[server.services.zzzz]
+token = "xxxxxxxxxxxxxxxxx" # 用于验证的 token
+bind_addr = "0.0.0.0:aaaa" # `aaaa` 配置暴露给互联网的端口

miniprogram/src/app.js

@@ -11,7 +11,9 @@ const App = createApp({
 App.use(setGlobalDataPlugin, {
   globalData: {
     debugMode: true, // 是否展示调试内容
-    baseUrl: "http://localhost", // 不带最后的 /
+    baseUrl: true
+      ? "http://39.99.244.156:5203"
+      : "http://localhost", // 不带最后的 /
   }
 })
 

miniprogram/src/pages/index/login.vue

@@ -62,7 +62,7 @@ export default {
                 title: "登录成功",
                 icon: 'success',
                 success: function () {
-                  Taro.redirectTo({
+                  Taro.switchTab({
                     url: '/pages/index/index'
                   })
                 }

miniprogram/src/pages/residents/code.config.js

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationBarTitleText: '身份码'
+  navigationBarTitleText: '身份码',
+  enablePullDownRefresh: true,
 })

miniprogram/src/pages/residents/code.css

@@ -5,5 +5,7 @@
 #myQrcode {
   display: block;
   margin: 0 auto;
-  /* border: 20px solid red; */
+
+  margin-top: 50px;
+  margin-bottom: 40px;
 }

miniprogram/src/pages/residents/code.vue

@@ -1,8 +1,5 @@
 <template>
   <view>
-    <view>
-      <image src="../../image/home.jpg" style="width: 100%;height: 150px;"></image>
-    </view>
     <view style="text-align: center; margin-top: 100px;">
       <view><text>{{ id }} | {{ name }}</text></view>
       <canvas type="2d" style="width: 70vw; height: 70vw;" id="myQrcode"></canvas>
@@ -15,36 +12,58 @@
 import Taro from '@tarojs/taro'
 import { eventCenter, getCurrentInstance } from '@tarojs/taro'
 import drawQrcode from '../../utils/qrcode/index'
+import utils from '../../utils/utils'
 
 import './code.css'
 
 export default {
   data() {
     return {
+      ...Taro.getApp().globalData,
       userInfo: null,
-      id: 'id',
+      timeInterval: null,
-      name: '姓名',
+      id: '',
-      time: 'time',
+      name: '',
+      time: '',
     }
   },
-  mounted() {
+
-    eventCenter.once(getCurrentInstance().router.onShow, () => {
+  // 对应 onShow
-      console.log('onShow')
+  onShow() {
-      this.userInfo = Taro.getStorageSync("userInfo");
+    console.log('onShow')
-      if (this.userInfo) {
+    setTimeout(() => {
-        console.log(this.userInfo)
+      Taro.startPullDownRefresh();
-        this.id = this.userInfo.id
+    }, 100)
-        this.name = this.userInfo.realname
+  },
-        this.drawCode()
+
-      } else {
+  // 对应 onHide
-        Taro.redirectTo({
+  onHide() {
-          url: '/pages/index/login'
+    console.log('onHide')
-        })
+    clearInterval(this.timeInterval);
-      }
+  },
-    })
+
+  // 对应 onPullDownRefresh
+  onPullDownRefresh() {
+    console.log('onPullDownRefresh')
+    Taro.showNavigationBarLoading();
+    clearInterval(this.timeInterval);
+    this.id = ''
+    this.name = ''
+    this.time = ''
+    this.userInfo = Taro.getStorageSync("userInfo");
+    if (!this.userInfo) {
+      Taro.redirectTo({
+        url: '/pages/index/login'
+      })
+    }
+    this.id = this.userInfo.id
+    this.name = this.userInfo.realname
+    this.drawCode()
+    Taro.stopPullDownRefresh();
+    Taro.hideNavigationBarLoading();
   },
   methods: {
-    drawCode() {
+    drawCode(text = 'https://www.baidu.com/', foreground = 'red') {
       const query = wx.createSelectorQuery()
       query.select('#myQrcode')
         .fields({
@@ -61,28 +80,17 @@ export default {
             width: 260,
             padding: 30,
             background: '#ffffff',
-            foreground: 'red', // '#000000',
+            foreground: foreground,
-            text: '大王顶真帅',
+            text: text,
           })
 
-          // 获取临时路径（得到之后，想干嘛就干嘛了）
+          this.timeInterval = setInterval(this.updateTime, 1000);
-          wx.canvasToTempFilePath({
+          this.updateTime();
-            canvasId: 'myQrcode',
-            canvas: canvas,
-            x: 0,
-            y: 0,
-            width: 260,
-            height: 260,
-            destWidth: 260,
-            destHeight: 260,
-            success(res) {
-              console.log('二维码临时路径：', res.tempFilePath)
-            },
-            fail(res) {
-              console.error(res)
-            }
-          })
         })
+    },
+    updateTime() {
+      this.time = utils.formatTime(new Date())
+      console.log("刷新时间")
     }
   }
 }