From 4871095b0d731a155149d87b9b6b61e4d115da48 Mon Sep 17 00:00:00 2001
From: taohebin <taohebin@dcloud.io>
Date: Fri, 10 Nov 2023 18:09:25 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E5=8E=BB=E9=99=A4=E8=BF=87=E6=97=B6?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/API/download-file/download-file.uvue    |  23 +-
 .../get-network-type/get-network-type.uvue    | 145 +++---
 pages/API/request/request.uvue                |  35 +-
 pages/API/upload-file/upload-file.uvue        | 218 ++++-----
 .../websocket-global/websocket-global.uvue    | 268 +++++------
 .../websocket-socketTask.uvue                 | 380 +++++++--------
 pages/template/list-news/list-news.uvue       | 448 +++++++++---------
 7 files changed, 718 insertions(+), 799 deletions(-)

diff --git a/pages/API/download-file/download-file.uvue b/pages/API/download-file/download-file.uvue
index 9f1b3629..fa231bf6 100644
--- a/pages/API/download-file/download-file.uvue
+++ b/pages/API/download-file/download-file.uvue
@@ -27,17 +27,14 @@
         title: 'downloadFile',
         imageSrc: '',
         task: null as DownloadTask | null,
-        pageVisible: false,
         //自动化测试例专用
         jest_result: false
       }
     },
     onLoad() {
-      this.pageVisible = true;
     },
     onUnload() {
       this.imageSrc = '';
-      this.pageVisible = false;
       uni.hideLoading();
       this.task?.abort();
     },
@@ -50,23 +47,17 @@
         this.task = uni.downloadFile({
           url: "https://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png",
           success: (res) => {
-            if (this.pageVisible) {
-              console.log('downloadFile success, res is', res)
-              self.imageSrc = res.tempFilePath;
-              uni.hideLoading();
-            }
+            console.log('downloadFile success, res is', res)
+            self.imageSrc = res.tempFilePath;
+            uni.hideLoading();
           },
           fail: (err) => {
-            if (this.pageVisible) {
-              console.log('downloadFile fail, err is:', err)
-              uni.hideLoading();
-            }
+            console.log('downloadFile fail, err is:', err)
+            uni.hideLoading();
           }
         });
         this.task?.onProgressUpdate((update) => {
-          if (this.pageVisible) {
-            console.log("progress : ", update.progress);
-          }
+          console.log("progress : ", update.progress);
         })
       },
       //自动化测试例专用
@@ -97,4 +88,4 @@
     justify-content: center;
     align-items: center;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/API/get-network-type/get-network-type.uvue b/pages/API/get-network-type/get-network-type.uvue
index dcae67e5..ed6c657b 100644
--- a/pages/API/get-network-type/get-network-type.uvue
+++ b/pages/API/get-network-type/get-network-type.uvue
@@ -1,83 +1,78 @@
 <template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-padding-wrap uni-common-mt">
-			<view style="background:#FFFFFF; padding:40rpx;">
-				<view class="uni-center">网络状态</view>
-				<view v-if="hasNetworkType == false">
-					<view class="uni-h2 uni-center uni-common-mt">未获取</view>
-					<view class="uni-center uni-common-mt">请点击下面按钮获取网络状态</view>
-				</view>
-				<view v-if="hasNetworkType == true">
-					<view class="uni-h2 uni-center uni-common-mt">{{networkType}}</view>
-				</view>
-			</view>
-			<view class="uni-btn-v uni-common-mt">
-				<button type="primary" @tap="getNetworkType">获取设备网络状态</button>
-				<button class="uni-common-mt" @tap="clear">清空</button>
-			</view>
-		</view>
-	</view>
+  <view>
+    <page-head :title="title"></page-head>
+    <view class="uni-padding-wrap uni-common-mt">
+      <view style="background:#FFFFFF; padding:40rpx;">
+        <view class="uni-center">网络状态</view>
+        <view v-if="hasNetworkType == false">
+          <view class="uni-h2 uni-center uni-common-mt">未获取</view>
+          <view class="uni-center uni-common-mt">请点击下面按钮获取网络状态</view>
+        </view>
+        <view v-if="hasNetworkType == true">
+          <view class="uni-h2 uni-center uni-common-mt">{{networkType}}</view>
+        </view>
+      </view>
+      <view class="uni-btn-v uni-common-mt">
+        <button type="primary" @tap="getNetworkType">获取设备网络状态</button>
+        <button class="uni-common-mt" @tap="clear">清空</button>
+      </view>
+    </view>
+  </view>
 </template>
 <script>
-	export default {
-		data() {
-			return {
-				title: 'getNetworkType',
-				hasNetworkType: false,
-				networkType: '',
-				connectedWifi: '',
-				pageVisible: false,
-        //自动化测试例专用
-        jest_result:false,
-			}
-		},
-		onLoad() {
-			this.pageVisible = true;
-		},
-		onUnload: function() {
-			this.pageVisible = false;
-			this.networkType = '';
-			this.hasNetworkType = false;
-		},
-		methods: {
-			getNetworkType: function() {
-				uni.getNetworkType({
-					success: (res) => {
-						console.log(res)
-						this.hasNetworkType = true;
-						this.networkType = res.networkType
-					},
-					fail: () => {
-						if (this.pageVisible) {
-							uni.showModal({
-								content: '获取失败！',
-								showCancel: false
-							})
-						}
-					}
-				})
-			},
-			clear: function() {
-				this.hasNetworkType = false;
-				this.networkType = '';
-				this.connectedWifi = '';
-			},
-      //自动化测试例专用
-      jest_getNetworkType(){
-        uni.getNetworkType({
-        	success: () => {
-            this.jest_result = true;
-        	},
-        	fail: () => {
-            this.jest_result = false;
-        	}
-        })
+  export default {
+    data() {
+      return {
+        title: 'getNetworkType',
+        hasNetworkType: false,
+        networkType: '',
+        connectedWifi: '',
+        //自动化测试例专用
+        jest_result: false,
       }
-		}
-	}
+    },
+    onLoad() {
+    },
+    onUnload: function () {
+      this.networkType = '';
+      this.hasNetworkType = false;
+    },
+    methods: {
+      getNetworkType: function () {
+        uni.getNetworkType({
+          success: (res) => {
+            console.log(res)
+            this.hasNetworkType = true;
+            this.networkType = res.networkType
+          },
+          fail: () => {
+            uni.showModal({
+              content: '获取失败！',
+              showCancel: false
+            })
+          }
+        })
+      },
+      clear: function () {
+        this.hasNetworkType = false;
+        this.networkType = '';
+        this.connectedWifi = '';
+      },
+      //自动化测试例专用
+      jest_getNetworkType() {
+        uni.getNetworkType({
+          success: () => {
+            this.jest_result = true;
+          },
+          fail: () => {
+            this.jest_result = false;
+          }
+        })
+      }
+    }
+  }
 </script>
 
 <style>
 
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/API/request/request.uvue b/pages/API/request/request.uvue
index 3028c1f2..b56dcc13 100644
--- a/pages/API/request/request.uvue
+++ b/pages/API/request/request.uvue
@@ -87,7 +87,6 @@
         title: 'request',
         res: '',
         task: null as RequestTask | null,
-        pageVisible: false,
         host: "http://request.dcloud.net.cn",
         url: "/api/http/method/get",
         method: "GET" as RequestMethod | null,
@@ -135,10 +134,8 @@
       }
     },
     onLoad() {
-      this.pageVisible = true;
     },
     onUnload() {
-      this.pageVisible = false;
       uni.hideLoading();
       this.task?.abort();
     },
@@ -191,25 +188,21 @@
           withCredentials: false,
           firstIpv4: false,
           success: (res) => {
-            if (this.pageVisible) {
-              console.log('request success', JSON.stringify(res.data))
-              uni.showToast({
-                title: '请求成功',
-                icon: 'success',
-                mask: true,
-                duration: duration
-              });
-              this.res = '请求结果 : ' + JSON.stringify(res);
-            }
+            console.log('request success', JSON.stringify(res.data))
+            uni.showToast({
+              title: '请求成功',
+              icon: 'success',
+              mask: true,
+              duration: duration
+            });
+            this.res = '请求结果 : ' + JSON.stringify(res);
           },
           fail: (err) => {
-            if (this.pageVisible) {
-              console.log('request fail', err);
-              uni.showModal({
-                content: err.errMsg,
-                showCancel: false
-              });
-            }
+            console.log('request fail', err);
+            uni.showModal({
+              content: err.errMsg,
+              showCancel: false
+            });
           },
           complete: () => {
             uni.hideLoading()
@@ -239,4 +232,4 @@
       }
     }
   }
-</script>
+</script>
\ No newline at end of file
diff --git a/pages/API/upload-file/upload-file.uvue b/pages/API/upload-file/upload-file.uvue
index d239c138..5355dbef 100644
--- a/pages/API/upload-file/upload-file.uvue
+++ b/pages/API/upload-file/upload-file.uvue
@@ -1,136 +1,122 @@
 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
-    <!-- #endif -->
+  <!-- #endif -->
     <view>
       <page-head :title="title"></page-head>
       <view class="uni-padding-wrap uni-common-mt">
         <view class="demo">
-          <image
-            v-if="imageSrc"
-            :src="imageSrc"
-            class="image"
-            mode="widthFix"
-          ></image>
-          <text v-else class="uni-hello-addfile" @click="chooseImage"
-            >+ 选择图片</text
-          >
+          <image v-if="imageSrc" :src="imageSrc" class="image" mode="widthFix"></image>
+          <text v-else class="uni-hello-addfile" @click="chooseImage">+ 选择图片</text>
         </view>
       </view>
     </view>
-    <!-- #ifdef APP -->
+  <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 <script>
-export default {
-	data() {
-		return {
-			title: 'uploadFile',
-			imageSrc: '',
-			task: null as UploadTask | null,
-			pageVisible: false,
-      //自动化测试例专用
-      jest_result:false,
-		}
-	},
-	onLoad() {
-		this.pageVisible = true;
-	},
-	onUnload() {
-		this.imageSrc = '';
-		this.pageVisible = false;
-		uni.hideLoading();
-		this.task?.abort();
-	},
-	methods: {
-		chooseImage: function() {
-			uni.chooseImage({
-				count: 1,
-				sizeType: ['compressed'],
-				sourceType: ['album'],
-				success: (res) => {
-					console.log('chooseImage success, temp path is', res.tempFilePaths[0])
-					var imageSrc = res.tempFilePaths[0]
-					uni.showLoading({
-						title: '上传中'
-					})
-					this.task = uni.uploadFile({
-						url: 'https://unidemo.dcloud.net.cn/upload', //仅为示例，非真实的接口地址
-						filePath: imageSrc,
-						name: 'file',
-						formData: {
-							'user': 'test'
-						},
-						success: (res) => {
-							if (this.pageVisible) {
-								console.log('uploadImage success, res is:', res)
-								uni.hideLoading();
-								uni.showToast({
-									title: '上传成功',
-									icon: 'success',
-									duration: 1000
-								})
-								this.imageSrc = imageSrc
-							}
-						},
-						fail: (err) => {
-							if (this.pageVisible) {
-								console.log('uploadImage fail', err);
-								uni.hideLoading();
-								uni.showModal({
-									content: err.errMsg,
-									showCancel: false
-								});
-							}
-						},
-					});
-				},
-				fail: (err) => {
-					console.log('chooseImage fail', err)
-				}
-			})
-		},
-    //自动化测试例专用
-    jest_uploadFile(){
-      const imageSrc = "/static/uni.png";
-      this.task = uni.uploadFile({
-      	url: 'https://unidemo.dcloud.net.cn/upload', //仅为示例，非真实的接口地址
-      	filePath: imageSrc,
-      	name: 'file',
-      	formData: {
-      		'user': 'test'
-      	},
-      	success: () => {
-          this.jest_result = true;
-      	},
-      	fail: () => {
-          this.jest_result = false;
-      	},
-      })
+  export default {
+    data() {
+      return {
+        title: 'uploadFile',
+        imageSrc: '',
+        task: null as UploadTask | null,
+        //自动化测试例专用
+        jest_result: false,
+      }
+    },
+    onLoad() {
+    },
+    onUnload() {
+      this.imageSrc = '';
+      uni.hideLoading();
+      this.task?.abort();
+    },
+    methods: {
+      chooseImage: function () {
+        uni.chooseImage({
+          count: 1,
+          sizeType: ['compressed'],
+          sourceType: ['album'],
+          success: (res) => {
+            console.log('chooseImage success, temp path is', res.tempFilePaths[0])
+            var imageSrc = res.tempFilePaths[0]
+            uni.showLoading({
+              title: '上传中'
+            })
+            this.task = uni.uploadFile({
+              url: 'https://unidemo.dcloud.net.cn/upload', //仅为示例，非真实的接口地址
+              filePath: imageSrc,
+              name: 'file',
+              formData: {
+                'user': 'test'
+              },
+              success: (res) => {
+                console.log('uploadImage success, res is:', res)
+                uni.hideLoading();
+                uni.showToast({
+                  title: '上传成功',
+                  icon: 'success',
+                  duration: 1000
+                })
+                this.imageSrc = imageSrc
+              },
+              fail: (err) => {
+                console.log('uploadImage fail', err);
+                uni.hideLoading();
+                uni.showModal({
+                  content: err.errMsg,
+                  showCancel: false
+                });
+              },
+            });
+          },
+          fail: (err) => {
+            console.log('chooseImage fail', err)
+          }
+        })
+      },
+      //自动化测试例专用
+      jest_uploadFile() {
+        const imageSrc = "/static/uni.png";
+        this.task = uni.uploadFile({
+          url: 'https://unidemo.dcloud.net.cn/upload', //仅为示例，非真实的接口地址
+          filePath: imageSrc,
+          name: 'file',
+          formData: {
+            'user': 'test'
+          },
+          success: () => {
+            this.jest_result = true;
+          },
+          fail: () => {
+            this.jest_result = false;
+          },
+        })
+      }
     }
-	}
-}
+  }
 </script>
 
 <style>
-.image {
-  width: 100%;
-}
+  .image {
+    width: 100%;
+  }
 
-.demo {
-  background: #fff;
-  padding: 50rpx;
-  justify-content: center;
-  align-items: center;
-}
+  .demo {
+    background: #fff;
+    padding: 50rpx;
+    justify-content: center;
+    align-items: center;
+  }
 
-.uni-hello-addfile {
-  text-align: center;
-  background: #fff;
-  padding: 50rpx;
-  margin-top: 10px;
-  font-size: 38rpx;
-  color: #808080;
-}
-</style>
+  .uni-hello-addfile {
+    text-align: center;
+    background: #fff;
+    padding: 50rpx;
+    margin-top: 10px;
+    font-size: 38rpx;
+    color: #808080;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/API/websocket-global/websocket-global.uvue b/pages/API/websocket-global/websocket-global.uvue
index 014889a9..d2593ab3 100644
--- a/pages/API/websocket-global/websocket-global.uvue
+++ b/pages/API/websocket-global/websocket-global.uvue
@@ -7,94 +7,83 @@
         <button class="uni-btn-v" type="primary" @click="connect">
           连接websocket服务
         </button>
-        <button
-          class="uni-btn-v"
-          v-show="connected"
-          type="primary"
-          @click="send"
-        >
+        <button class="uni-btn-v" v-show="connected" type="primary" @click="send">
           发送一条消息
         </button>
         <button class="uni-btn-v" type="primary" @click="close">
           断开websocket服务
         </button>
-        <text class="websocket-tips"
-          >发送消息后会收到一条服务器返回的消息（与发送的消息内容一致）</text
-        >
+        <text class="websocket-tips">发送消息后会收到一条服务器返回的消息（与发送的消息内容一致）</text>
       </view>
     </view>
   </view>
 </template>
 
 <script lang="uts">
-export default {
-  data() {
-    return {
-      connected: false,
-      connecting: false,
-      msg: '',
-      roomId: '',
-      platform: '',
-      pageVisible: false,
-    }
-  },
-  computed: {
-    showMsg(): string {
-      if (this.connected) {
-        if (this.msg.length > 0) {
-          return '收到消息：' + this.msg
-        } else {
-          return '等待接收消息'
-        }
-      } else {
-        return '尚未连接'
+  export default {
+    data() {
+      return {
+        connected: false,
+        connecting: false,
+        msg: '',
+        roomId: '',
+        platform: '',
       }
     },
-  },
-  onLoad() {
-    this.platform = uni.getSystemInfoSync().platform
-    this.pageVisible = true
-  },
-  onUnload() {
-    this.pageVisible = false
-    uni.closeSocket({
-      code: 1000,
-      reason: 'close reason from client',
-      success:(res: any) => {
-        console.log('uni.closeSocket success', res)
-      },
-      fail:(err: any) => {
-        console.log('uni.closeSocket fail', err)
+    computed: {
+      showMsg() : string {
+        if (this.connected) {
+          if (this.msg.length > 0) {
+            return '收到消息：' + this.msg
+          } else {
+            return '等待接收消息'
+          }
+        } else {
+          return '尚未连接'
+        }
       },
-    } as CloseSocketOptions)
-    uni.hideLoading()
-  },
-  methods: {
-    connect() {
-      if (this.connected || this.connecting) {
-        uni.showModal({
-          content: '正在连接或者已经连接，请勿重复连接',
-          showCancel: false,
-        })
-        return
-      }
-      this.connecting = true
-      uni.showLoading({
-        title: '连接中...',
-      })
-      uni.connectSocket({
-        url: 'ws://websocket.dcloud.net.cn',
-        success:(res: any) => {
-          // 这里是接口调用成功的回调，不是连接成功的回调，请注意
-          console.log('uni.connectSocket success', res)
+    },
+    onLoad() {
+      this.platform = uni.getSystemInfoSync().platform
+    },
+    onUnload() {
+      uni.closeSocket({
+        code: 1000,
+        reason: 'close reason from client',
+        success: (res : any) => {
+          console.log('uni.closeSocket success', res)
         },
-        fail:(err: any) => {
-          // 这里是接口调用失败的回调，不是连接失败的回调，请注意
-          console.log('uni.connectSocket fail', err)
+        fail: (err : any) => {
+          console.log('uni.closeSocket fail', err)
         },
-      })
-      uni.onSocketOpen((res) => {
-        if (this.pageVisible) {
+      } as CloseSocketOptions)
+      uni.hideLoading()
+    },
+    methods: {
+      connect() {
+        if (this.connected || this.connecting) {
+          uni.showModal({
+            content: '正在连接或者已经连接，请勿重复连接',
+            showCancel: false,
+          })
+          return
+        }
+        this.connecting = true
+        uni.showLoading({
+          title: '连接中...',
+        })
+        uni.connectSocket({
+          url: 'ws://websocket.dcloud.net.cn',
+          success: (res : any) => {
+            // 这里是接口调用成功的回调，不是连接成功的回调，请注意
+            console.log('uni.connectSocket success', res)
+          },
+          fail: (err : any) => {
+            // 这里是接口调用失败的回调，不是连接失败的回调，请注意
+            console.log('uni.connectSocket fail', err)
+          },
+        })
+        uni.onSocketOpen((res) => {
           this.connecting = false
           this.connected = true
           uni.hideLoading()
@@ -104,10 +93,8 @@ export default {
             title: '连接成功',
           })
           console.log('onOpen', res)
-        }
-      })
-      uni.onSocketError((err) => {
-        if (this.pageVisible) {
+        })
+        uni.onSocketError((err) => {
           this.connecting = false
           this.connected = false
           uni.hideLoading()
@@ -117,83 +104,78 @@ export default {
             showCancel: false,
           })
           console.log('onError', err)
-        }
-      })
-      uni.onSocketMessage((res) => {
-        if (this.pageVisible) {
+        })
+        uni.onSocketMessage((res) => {
           this.msg = res.data as string
           console.log('onMessage', res)
-        }
-      })
-      uni.onSocketClose((res) => {
-        if (this.pageVisible) {
+        })
+        uni.onSocketClose((res) => {
           this.connected = false
           this.msg = ''
           console.log('onClose', res)
-        }
-      })
-    },
-    send() {
-      uni.sendSocketMessage({
-        data:
-          'from ' +
-          this.platform +
-          ' : ' +
-          parseInt((Math.random() * 10000).toString()).toString(),
-        success:(res: any) => {
-          console.log(res)
-        },
-        fail:(err: any) => {
-          console.log(err)
-        },
-      } as SendSocketMessageOptions)
-    },
-    close() {
-      uni.closeSocket({
-        code: 1000,
-        reason: 'close reason from client',
-        success:(res: any) => {
-          console.log('uni.closeSocket success', res)
-        },
-        fail:(err: any) => {
-          console.log('uni.closeSocket fail', err)
-        },
-      } as CloseSocketOptions)
+        })
+      },
+      send() {
+        uni.sendSocketMessage({
+          data:
+            'from ' +
+            this.platform +
+            ' : ' +
+            parseInt((Math.random() * 10000).toString()).toString(),
+          success: (res : any) => {
+            console.log(res)
+          },
+          fail: (err : any) => {
+            console.log(err)
+          },
+        } as SendSocketMessageOptions)
+      },
+      close() {
+        uni.closeSocket({
+          code: 1000,
+          reason: 'close reason from client',
+          success: (res : any) => {
+            console.log('uni.closeSocket success', res)
+          },
+          fail: (err : any) => {
+            console.log('uni.closeSocket fail', err)
+          },
+        } as CloseSocketOptions)
+      },
     },
-  },
-}
+  }
 </script>
 
 <style>
-.uni-btn-v {
-  padding: 10rpx 0;
-}
+  .uni-btn-v {
+    padding: 10rpx 0;
+  }
 
-.uni-btn-v {
-  margin: 20rpx 0;
-}
+  .uni-btn-v {
+    margin: 20rpx 0;
+  }
 
-.websocket-room {
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  border-bottom: solid 1px #dddddd;
-  margin-bottom: 20px;
-}
+  .websocket-room {
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    border-bottom: solid 1px #dddddd;
+    margin-bottom: 20px;
+  }
 
-.websocket-msg {
-  padding: 40px 0px;
-  text-align: center;
-  font-size: 14px;
-  line-height: 40px;
-  color: #666666;
-}
+  .websocket-msg {
+    padding: 40px 0px;
+    text-align: center;
+    font-size: 14px;
+    line-height: 40px;
+    color: #666666;
+  }
 
-.websocket-tips {
-  padding: 40px 0px;
-  text-align: center;
-  font-size: 14px;
-  line-height: 24px;
-  color: #666666;
-}
-</style>
+  .websocket-tips {
+    padding: 40px 0px;
+    text-align: center;
+    font-size: 14px;
+    line-height: 24px;
+    color: #666666;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/API/websocket-socketTask/websocket-socketTask.uvue b/pages/API/websocket-socketTask/websocket-socketTask.uvue
index 7f0b9fc5..fb3f40fb 100644
--- a/pages/API/websocket-socketTask/websocket-socketTask.uvue
+++ b/pages/API/websocket-socketTask/websocket-socketTask.uvue
@@ -1,105 +1,94 @@
-<template>
-  <view>
-    <page-head title="websocket通讯示例"></page-head>
-    <view class="uni-padding-wrap">
-      <view class="uni-btn-v">
-        <text class="websocket-msg">{{ showMsg }}</text>
-        <button class="uni-btn-v" type="primary" @click="connect">
-          连接websocket服务
-        </button>
-        <button
-          class="uni-btn-v"
-          v-show="connected"
-          type="primary"
-          @click="send"
-        >
-          发送一条消息
-        </button>
-        <button class="uni-btn-v" type="primary" @click="close">
-          断开websocket服务
-        </button>
-        <text class="websocket-tips"
-          >发送消息后会收到一条服务器返回的消息（与发送的消息内容一致）</text
-        >
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="uts">
-export default {
-  data() {
-    return {
-      connected: false,
-      connecting: false,
-      socketTask: null as SocketTask | null,
-      msg: '',
-      platform: '',
-      pageVisible: false,
-      //自动化测试例专用
-      jest_result: 0,
-    }
-  },
-  computed: {
-    showMsg(): string {
-      if (this.connected) {
-        if (this.msg.length > 0) {
-          return '收到消息：' + this.msg
+<template>
+  <view>
+    <page-head title="websocket通讯示例"></page-head>
+    <view class="uni-padding-wrap">
+      <view class="uni-btn-v">
+        <text class="websocket-msg">{{ showMsg }}</text>
+        <button class="uni-btn-v" type="primary" @click="connect">
+          连接websocket服务
+        </button>
+        <button class="uni-btn-v" v-show="connected" type="primary" @click="send">
+          发送一条消息
+        </button>
+        <button class="uni-btn-v" type="primary" @click="close">
+          断开websocket服务
+        </button>
+        <text class="websocket-tips">发送消息后会收到一条服务器返回的消息（与发送的消息内容一致）</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+  export default {
+    data() {
+      return {
+        connected: false,
+        connecting: false,
+        socketTask: null as SocketTask | null,
+        msg: '',
+        platform: '',
+        //自动化测试例专用
+        jest_result: 0,
+      }
+    },
+    computed: {
+      showMsg() : string {
+        if (this.connected) {
+          if (this.msg.length > 0) {
+            return '收到消息：' + this.msg
+          } else {
+            return '等待接收消息'
+          }
         } else {
-          return '等待接收消息'
+          return '尚未连接'
         }
-      } else {
-        return '尚未连接'
+      },
+    },
+    onLoad() {
+      this.platform = uni.getSystemInfoSync().platform
+    },
+    onUnload() {
+      uni.hideLoading()
+      let task = this.socketTask
+      if (task != null) {
+        task.close({
+          code: 1000,
+          reason: 'close reason from client',
+          success: (res : any) => {
+            console.log('uni.closeSocket success', res)
+          },
+          fail: (err : any) => {
+            console.log('uni.closeSocket fail', err)
+          },
+        } as CloseSocketOptions)
       }
     },
-  },
-  onLoad() {
-    this.platform = uni.getSystemInfoSync().platform
-    this.pageVisible = true
-  },
-  onUnload() {
-    this.pageVisible = false
-    uni.hideLoading()
-    let task = this.socketTask
-    if (task != null) {
-      task.close({
-        code: 1000,
-        reason: 'close reason from client',
-        success:(res: any) => {
-          console.log('uni.closeSocket success', res)
-        },
-        fail:(err: any) =>{
-          console.log('uni.closeSocket fail', err)
-        },
-      } as CloseSocketOptions)
-    }
-  },
-  methods: {
-    connect() {
-      if (this.connected || this.connecting) {
-        uni.showModal({
-          content: '正在连接或者已经连接，请勿重复连接',
-          showCancel: false,
+    methods: {
+      connect() {
+        if (this.connected || this.connecting) {
+          uni.showModal({
+            content: '正在连接或者已经连接，请勿重复连接',
+            showCancel: false,
+          })
+          return
+        }
+        this.connecting = true
+        uni.showLoading({
+          title: '连接中...',
         })
-        return
-      }
-      this.connecting = true
-      uni.showLoading({
-        title: '连接中...',
-      })
-      this.socketTask = uni.connectSocket({
-        url: 'ws://websocket.dcloud.net.cn',
-        success:(res: any) =>{
-          // 这里是接口调用成功的回调，不是连接成功的回调，请注意
-          console.log('uni.connectSocket success', res)
-        },
-        fail:(err: any) =>{
-          // 这里是接口调用失败的回调，不是连接失败的回调，请注意
-          console.log('uni.connectSocket fail', err)
-        },
-      })
-      this.socketTask?.onOpen((res: any) => {
-        if (this.pageVisible) {
+        this.socketTask = uni.connectSocket({
+          url: 'ws://websocket.dcloud.net.cn',
+          success: (res : any) => {
+            // 这里是接口调用成功的回调，不是连接成功的回调，请注意
+            console.log('uni.connectSocket success', res)
+          },
+          fail: (err : any) => {
+            // 这里是接口调用失败的回调，不是连接失败的回调，请注意
+            console.log('uni.connectSocket fail', err)
+          },
+        })
+        this.socketTask?.onOpen((res : any) => {
           this.connecting = false
           this.connected = true
           uni.hideLoading()
@@ -108,10 +97,8 @@ export default {
             title: '连接成功',
           })
           console.log('onOpen', res)
-        }
-      })
-      this.socketTask?.onError((err: any) => {
-        if (this.pageVisible) {
+        })
+        this.socketTask?.onError((err : any) => {
           this.connecting = false
           this.connected = false
           uni.hideLoading()
@@ -120,108 +107,103 @@ export default {
             showCancel: false,
           })
           console.log('onError', err)
-        }
-      })
-      this.socketTask?.onMessage((res: OnSocketMessageCallbackResult) => {
-        if (this.pageVisible) {
+        })
+        this.socketTask?.onMessage((res : OnSocketMessageCallbackResult) => {
           this.msg = res.data as string
           console.log('onMessage', res)
-        }
-      })
-      this.socketTask?.onClose((res: any) => {
-        if (this.pageVisible) {
+        })
+        this.socketTask?.onClose((res : any) => {
           this.connected = false
           this.socketTask = null
           this.msg = ''
           console.log('onClose', res)
-        }
-      })
-    },
-    send() {
-      const data =
-        'from ' +
-        this.platform +
-        ' : ' +
-        parseInt(Math.random() * 10000 + '').toString()
-      this.socketTask?.send({
-        data,
-        success:(res: any) =>{
-          console.log(res)
-        },
-        fail:(err: any) =>{
-          console.log(err)
-        },
-      } as SendSocketMessageOptions)
+        })
+      },
+      send() {
+        const data =
+          'from ' +
+          this.platform +
+          ' : ' +
+          parseInt(Math.random() * 10000 + '').toString()
+        this.socketTask?.send({
+          data,
+          success: (res : any) => {
+            console.log(res)
+          },
+          fail: (err : any) => {
+            console.log(err)
+          },
+        } as SendSocketMessageOptions)
+      },
+      close() {
+        this.socketTask?.close({
+          code: 1000,
+          reason: 'close reason from client',
+          success: (res : any) => {
+            console.log('uni.closeSocket success', res)
+          },
+          fail: (err : any) => {
+            console.log('uni.closeSocket fail', err)
+          },
+        } as CloseSocketOptions)
+      },
+      //自动化测试例专用
+      jest_connectSocket() {
+        this.socketTask = uni.connectSocket({
+          url: 'ws://websocket.dcloud.net.cn',
+          success: (_) => {
+            this.jest_result++
+          },
+          fail: (_) => {
+            this.jest_result = 0
+          },
+        })
+        this.socketTask?.onOpen((_) => {
+          const data =
+            'from ' +
+            this.platform +
+            ' : ' +
+            parseInt(Math.random() * 10000 + '').toString()
+          this.socketTask?.send({
+            data,
+            success: (_) => {
+              this.jest_result++
+            },
+            fail: (_) => {
+              this.jest_result = 0
+            },
+          } as SendSocketMessageOptions)
+        })
+        this.socketTask?.onError((_) => {
+          this.jest_result = 0;
+        })
+      }
     },
-    close() {
-      this.socketTask?.close({
-        code: 1000,
-        reason: 'close reason from client',
-        success:(res: any) =>{
-          console.log('uni.closeSocket success', res)
-        },
-        fail:(err: any) =>{
-          console.log('uni.closeSocket fail', err)
-        },
-      } as CloseSocketOptions)
-    },
-    //自动化测试例专用
-    jest_connectSocket(){
-      this.socketTask = uni.connectSocket({
-        url: 'ws://websocket.dcloud.net.cn',
-        success:(_) => {
-          this.jest_result++
-        },
-        fail:(_) => {
-          this.jest_result = 0
-        },
-      })
-      this.socketTask?.onOpen((_) => {
-          const data =
-            'from ' +
-            this.platform +
-            ' : ' +
-            parseInt(Math.random() * 10000 + '').toString()
-          this.socketTask?.send({
-            data,
-            success:(_) =>{
-              this.jest_result++
-            },
-            fail:(_) =>{
-              this.jest_result = 0
-            },
-          } as SendSocketMessageOptions)
-      })
-      this.socketTask?.onError((_) => {
-          this.jest_result = 0;
-      })
-    }
-  },
-}
-</script>
-
-<style>
-.uni-btn-v {
-  padding: 10rpx 0;
-}
-
-.uni-btn-v {
-  margin: 20rpx 0;
-}
-
-.websocket-msg {
-  padding: 40px 0px;
-  text-align: center;
-  font-size: 14px;
-  line-height: 40px;
-  color: #666666;
-}
-
-.websocket-tips {
-  padding: 40px 0px;
-  text-align: center;
-  font-size: 14px;
-  line-height: 24px;
-  color: #666666;
-}
-</style>
+  }
+</script>
+
+<style>
+  .uni-btn-v {
+    padding: 10rpx 0;
+  }
+
+  .uni-btn-v {
+    margin: 20rpx 0;
+  }
+
+  .websocket-msg {
+    padding: 40px 0px;
+    text-align: center;
+    font-size: 14px;
+    line-height: 40px;
+    color: #666666;
+  }
+
+  .websocket-tips {
+    padding: 40px 0px;
+    text-align: center;
+    font-size: 14px;
+    line-height: 24px;
+    color: #666666;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/template/list-news/list-news.uvue b/pages/template/list-news/list-news.uvue
index b3e0804f..d74cda1c 100644
--- a/pages/template/list-news/list-news.uvue
+++ b/pages/template/list-news/list-news.uvue
@@ -1,229 +1,219 @@
-<template>
-  <list-view style="flex: 1;" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
-    :refresher-triggered="refresherTriggered">
-    <list-item class="banner" @click="bannerClick(banner)">
-      <image class="banner-img" :src="banner.cover"></image>
-      <text class="banner-title">{{ banner.title }}</text>
-    </list-item>
-    <sticky-header>
-      <view style="width: 100%;height:44px;background-color: #f5f5f5;flex-direction: row;justify-content:center;align-items:center;">
-        <text v-for="(name,index) in th_item" @click="clickTH(index)" style="margin-right: 20px;">
-          {{name}}
-        </text>
-      </view>
-    </sticky-header>
-    <list-item v-for="(value, index) in listData" :key="index">
-      <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
-        <view class="uni-media-list">
-          <image class="uni-media-list-logo" :src="value.cover"></image>
-          <view class="uni-media-list-body">
-            <text class="uni-media-list-text-top">{{ value.title }}</text>
-            <view class="uni-media-list-text-bottom">
-              <text class="uni-media-list-text">{{ value.author_name }}</text>
-              <text class="uni-media-list-text">{{ value.published_at }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </list-item>
-  </list-view>
-</template>
-
-<script>
-  type Banner = {
-    cover : string | null,
-    title : string | null,
-    post_id : string | null
-  }
-  type Item = {
-    author_name : string,
-    cover : string,
-    id : number,
-    post_id : string,
-    published_at : string,
-    title : string
-  }
-
-  export default {
-    data() {
-      return {
-        th_item: ["排序", "筛选"],
-        refresherTriggered: false,
-        banner: {} as Banner,
-        listData: [] as Item[],
-        last_id: '',
-        pageVisible: false
-      };
-    },
-    onLoad() {
-      this.pageVisible = true; //设这个变量是为了避免联网结束后页面已经关闭，此时还继续执行回调逻辑的问题。不是必须的
-      this.getBanner();
-      this.getList();
-    },
-    onUnload() {
-      this.pageVisible = false;
-    },
-    methods: {
-      getBanner() {
-        let data = {
-          column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
-        };
-        uni.request<Banner>({
-          url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
-          data: data,
-          success: data => {
-            if (this.pageVisible) {
-              this.refresherTriggered = false
-              if (data.statusCode == 200) {
-                const result = data.data
-                if (result != null) {
-                  this.banner = result;
-                }
-              }
-            }
-          },
-          fail: (e) => {
-            console.log('fail', e);
-          }
-        });
-      },
-      getList() {
-        let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at";
-        /* if (this.last_id != "") {
-          const minId = parseInt((this.last_id))
-          const time = new Date().getTime() + '';
-          const pageSize = 10;
-          url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
-        } */
-
-        uni.request<Item[]>({
-          url: url,
-          method: "GET",
-          success: (res) => {
-            if (this.pageVisible) {
-              if (res.statusCode == 200) {
-                console.log(res);
-                const result = res.data
-                if (result != null) {
-                  this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项
-                  // this.listData.push(...result)
-                  // this.last_id = this.listData[0].id + "";
-                }
-                this.refresherTriggered = false;
-              }
-            }
-          },
-          fail: (res) => {
-            if (this.pageVisible) {
-              console.log('fail', res);
-              this.refresherTriggered = false
-            }
-          }
-        });
-      },
-      goDetail(e : Item) {
-        const detail = e;
-        const post_id = detail.post_id;
-        const cover = detail.cover;
-        const title = detail.title;
-        uni.navigateTo({
-          url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
-        });
-      },
-      bannerClick(e : Banner) {
-        const detail = e;
-        const post_id = detail.post_id;
-        const cover = detail.cover;
-        const title = detail.title;
-        uni.navigateTo({
-          url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
-        });
-      },
-      clickTH(index:number){
-        uni.showModal({
-          content: "点击表头项：" + index,
-          showCancel: false
-        });
-      },
-      onRefresherrefresh() {
-        if (this.pageVisible) {
-          this.refresherTriggered = true
-          this.getBanner();
-          this.getList();
-        }
-      }
-    }
-  };
-</script>
-
-<style>
-  .banner {
-    height: 360rpx;
-    overflow: hidden;
-    position: relative;
-    background-color: #ccc;
-  }
-
-  .banner-img {
-    width: 100%;
-  }
-
-  .banner-title {
-    max-height: 84rpx;
-    overflow: hidden;
-    position: absolute;
-    left: 30rpx;
-    bottom: 30rpx;
-    width: 90%;
-    font-size: 32rpx;
-    font-weight: 400;
-    line-height: 42rpx;
-    color: white;
-  }
-
-  .uni-media-list {
-    padding: 22rpx 30rpx;
-    box-sizing: border-box;
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-  }
-
-  .uni-media-list-logo {
-    width: 180rpx;
-    height: 140rpx;
-  }
-
-  .uni-media-list-body {
-    flex: 1;
-    padding-left: 15rpx;
-    justify-content: space-around;
-  }
-
-  .uni-list-content {
-    background-color: #FFFFFF;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    border-bottom: 1px solid #c8c7cc;
-    flex: 1;
-  }
-
-  .uni-media-list-text-top {
-    /* height: 74rpx; */
-    font-size: 28rpx;
-    lines: 2;
-    overflow: hidden;
-  }
-
-  .uni-media-list-text-bottom {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .uni-media-list-text {
-    color: #9D9D9F;
-    font-size: 25rpx;
-  }
-</style>
+<template>
+  <list-view style="flex: 1;" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
+    :refresher-triggered="refresherTriggered">
+    <list-item class="banner" @click="bannerClick(banner)">
+      <image class="banner-img" :src="banner.cover"></image>
+      <text class="banner-title">{{ banner.title }}</text>
+    </list-item>
+    <sticky-header>
+      <view
+        style="width: 100%;height:44px;background-color: #f5f5f5;flex-direction: row;justify-content:center;align-items:center;">
+        <text v-for="(name,index) in th_item" @click="clickTH(index)" style="margin-right: 20px;">
+          {{name}}
+        </text>
+      </view>
+    </sticky-header>
+    <list-item v-for="(value, index) in listData" :key="index">
+      <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
+        <view class="uni-media-list">
+          <image class="uni-media-list-logo" :src="value.cover"></image>
+          <view class="uni-media-list-body">
+            <text class="uni-media-list-text-top">{{ value.title }}</text>
+            <view class="uni-media-list-text-bottom">
+              <text class="uni-media-list-text">{{ value.author_name }}</text>
+              <text class="uni-media-list-text">{{ value.published_at }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </list-item>
+  </list-view>
+</template>
+
+<script>
+  type Banner = {
+    cover : string | null,
+    title : string | null,
+    post_id : string | null
+  }
+  type Item = {
+    author_name : string,
+    cover : string,
+    id : number,
+    post_id : string,
+    published_at : string,
+    title : string
+  }
+
+  export default {
+    data() {
+      return {
+        th_item: ["排序", "筛选"],
+        refresherTriggered: false,
+        banner: {} as Banner,
+        listData: [] as Item[],
+        last_id: '',
+      };
+    },
+    onLoad() {
+      this.getBanner();
+      this.getList();
+    },
+    onUnload() {
+    },
+    methods: {
+      getBanner() {
+        let data = {
+          column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
+        };
+        uni.request<Banner>({
+          url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
+          data: data,
+          success: data => {
+            this.refresherTriggered = false
+            if (data.statusCode == 200) {
+              const result = data.data
+              if (result != null) {
+                this.banner = result;
+              }
+            }
+          },
+          fail: (e) => {
+            console.log('fail', e);
+          }
+        });
+      },
+      getList() {
+        let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at";
+        /* if (this.last_id != "") {
+          const minId = parseInt((this.last_id))
+          const time = new Date().getTime() + '';
+          const pageSize = 10;
+          url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
+        } */
+
+        uni.request<Item[]>({
+          url: url,
+          method: "GET",
+          success: (res) => {
+            if (res.statusCode == 200) {
+              console.log(res);
+              const result = res.data
+              if (result != null) {
+                this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项
+                // this.listData.push(...result)
+                // this.last_id = this.listData[0].id + "";
+              }
+              this.refresherTriggered = false;
+            }
+          },
+          fail: (res) => {
+            console.log('fail', res);
+            this.refresherTriggered = false
+          }
+        });
+      },
+      goDetail(e : Item) {
+        const detail = e;
+        const post_id = detail.post_id;
+        const cover = detail.cover;
+        const title = detail.title;
+        uni.navigateTo({
+          url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
+        });
+      },
+      bannerClick(e : Banner) {
+        const detail = e;
+        const post_id = detail.post_id;
+        const cover = detail.cover;
+        const title = detail.title;
+        uni.navigateTo({
+          url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
+        });
+      },
+      clickTH(index : number) {
+        uni.showModal({
+          content: "点击表头项：" + index,
+          showCancel: false
+        });
+      },
+      onRefresherrefresh() {
+        this.refresherTriggered = true
+        this.getBanner();
+        this.getList();
+      }
+    }
+  };
+</script>
+
+<style>
+  .banner {
+    height: 360rpx;
+    overflow: hidden;
+    position: relative;
+    background-color: #ccc;
+  }
+
+  .banner-img {
+    width: 100%;
+  }
+
+  .banner-title {
+    max-height: 84rpx;
+    overflow: hidden;
+    position: absolute;
+    left: 30rpx;
+    bottom: 30rpx;
+    width: 90%;
+    font-size: 32rpx;
+    font-weight: 400;
+    line-height: 42rpx;
+    color: white;
+  }
+
+  .uni-media-list {
+    padding: 22rpx 30rpx;
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+  }
+
+  .uni-media-list-logo {
+    width: 180rpx;
+    height: 140rpx;
+  }
+
+  .uni-media-list-body {
+    flex: 1;
+    padding-left: 15rpx;
+    justify-content: space-around;
+  }
+
+  .uni-list-content {
+    background-color: #FFFFFF;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #c8c7cc;
+    flex: 1;
+  }
+
+  .uni-media-list-text-top {
+    /* height: 74rpx; */
+    font-size: 28rpx;
+    lines: 2;
+    overflow: hidden;
+  }
+
+  .uni-media-list-text-bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .uni-media-list-text {
+    color: #9D9D9F;
+    font-size: 25rpx;
+  }
+</style>
\ No newline at end of file
-- 
GitLab