Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
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 @@
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
pages/API/get-network-type/get-network-type.uvue
浏览文件 @ 4871095b
<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
pages/API/request/request.uvue
浏览文件 @ 4871095b
......@@ -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
pages/API/upload-file/upload-file.uvue
浏览文件 @ 4871095b
<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
pages/API/websocket-global/websocket-global.uvue
浏览文件 @ 4871095b
......@@ -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
pages/API/websocket-socketTask/websocket-socketTask.uvue
浏览文件 @ 4871095b
<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
pages/template/list-news/list-news.uvue
浏览文件 @ 4871095b
<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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或