Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 4871095b 编写于 作者: taohebin@dcloud.io's avatar taohebin@dcloud.io
浏览文件
操作

update: 去除过时代码

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