304 changed files with 26 additions and 27444 deletions
@ -1,22 +0,0 @@ |
|||
// // import request from '@/common/request.js'
|
|||
// // import promise from '@/common/promise.js'
|
|||
// import request from '@/common/request_test.js'
|
|||
// // let devUrl = this.$dev_url;
|
|||
|
|||
// let devUrl = "http://dev.ccwin-in.com:59096"
|
|||
// export function getlogin(params) {
|
|||
// return request({
|
|||
// url: devUrl + "/api/pda/account/login",
|
|||
// method: "post",
|
|||
// data: params,
|
|||
// });
|
|||
// }
|
|||
|
|||
// //修改用户密码
|
|||
// export function changePassword(params) { //
|
|||
// return request({
|
|||
// url:devUrl + "/api/pda/account/change-password",//
|
|||
// data: params,
|
|||
// method: "post"
|
|||
// })
|
|||
// }
|
|||
@ -1,156 +0,0 @@ |
|||
<template> |
|||
<view class="uni-padding-wrap"> |
|||
<page-head :title="title"></page-head> |
|||
<button class="button" @click="setTabBarBadge">{{ !hasSetTabBarBadge ? '设置tab徽标' : '移除tab徽标' }}</button> |
|||
<button class="button" @click="showTabBarRedDot">{{ !hasShownTabBarRedDot ? '显示红点' : '移除红点'}}</button> |
|||
<button class="button" @click="customStyle">{{ !hasCustomedStyle ? '自定义Tab样式' : '移除自定义样式'}}</button> |
|||
<button class="button" @click="customItem">{{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}</button> |
|||
<button class="button" @click="hideTabBar">{{ !hasHiddenTabBar ? '隐藏TabBar' : '显示TabBar' }}</button> |
|||
<view class="btn-area"> |
|||
<button class="button" type="primary" @click="navigateBack">返回上一级</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'tababr', |
|||
hasSetTabBarBadge: false, |
|||
hasShownTabBarRedDot: false, |
|||
hasCustomedStyle: false, |
|||
hasCustomedItem: false, |
|||
hasHiddenTabBar: false |
|||
} |
|||
}, |
|||
destroyed() { |
|||
if (this.hasSetTabBarBadge) { |
|||
uni.removeTabBarBadge({ |
|||
index: 1 |
|||
}) |
|||
} |
|||
if (this.hasShownTabBarRedDot) { |
|||
uni.hideTabBarRedDot({ |
|||
index: 1 |
|||
}) |
|||
} |
|||
if (this.hasHiddenTabBar) { |
|||
uni.showTabBar() |
|||
} |
|||
if (this.hasCustomedStyle) { |
|||
uni.setTabBarStyle({ |
|||
color: '#7A7E83', |
|||
selectedColor: '#007AFF', |
|||
backgroundColor: '#F8F8F8', |
|||
borderStyle: 'black' |
|||
}) |
|||
} |
|||
|
|||
if (this.hasCustomedItem) { |
|||
let tabBarOptions = { |
|||
index: 1, |
|||
text: '接口', |
|||
iconPath: '/static/api.png', |
|||
selectedIconPath: '/static/apiHL.png' |
|||
} |
|||
uni.setTabBarItem(tabBarOptions) |
|||
} |
|||
}, |
|||
methods: { |
|||
navigateBack() { |
|||
this.$emit('unmount') |
|||
}, |
|||
setTabBarBadge() { |
|||
if(this.hasShownTabBarRedDot){ |
|||
uni.hideTabBarRedDot({ |
|||
index: 1 |
|||
}) |
|||
this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot |
|||
} |
|||
if (!this.hasSetTabBarBadge) { |
|||
uni.setTabBarBadge({ |
|||
index: 1, |
|||
text: '1' |
|||
}) |
|||
} else { |
|||
uni.removeTabBarBadge({ |
|||
index: 1 |
|||
}) |
|||
} |
|||
this.hasSetTabBarBadge = !this.hasSetTabBarBadge |
|||
}, |
|||
showTabBarRedDot() { |
|||
if(this.hasSetTabBarBadge) { |
|||
uni.removeTabBarBadge({ |
|||
index: 1 |
|||
}) |
|||
this.hasSetTabBarBadge = !this.hasSetTabBarBadge |
|||
} |
|||
if (!this.hasShownTabBarRedDot) { |
|||
uni.showTabBarRedDot({ |
|||
index: 1 |
|||
}) |
|||
} else { |
|||
uni.hideTabBarRedDot({ |
|||
index: 1 |
|||
}) |
|||
} |
|||
this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot |
|||
}, |
|||
hideTabBar() { |
|||
if (!this.hasHiddenTabBar) { |
|||
uni.hideTabBar() |
|||
} else { |
|||
uni.showTabBar() |
|||
} |
|||
this.hasHiddenTabBar = !this.hasHiddenTabBar |
|||
}, |
|||
customStyle() { |
|||
if (this.hasCustomedStyle) { |
|||
uni.setTabBarStyle({ |
|||
color: '#7A7E83', |
|||
selectedColor: '#007AFF', |
|||
backgroundColor: '#F8F8F8', |
|||
borderStyle: 'black' |
|||
}) |
|||
} else { |
|||
uni.setTabBarStyle({ |
|||
color: '#FFF', |
|||
selectedColor: '#007AFF', |
|||
backgroundColor: '#000000', |
|||
borderStyle: 'black' |
|||
}) |
|||
} |
|||
this.hasCustomedStyle = !this.hasCustomedStyle |
|||
}, |
|||
customItem() { |
|||
let tabBarOptions = { |
|||
index: 1, |
|||
text: '接口', |
|||
iconPath: '/static/api.png', |
|||
selectedIconPath: '/static/apiHL.png' |
|||
} |
|||
if (this.hasCustomedItem) { |
|||
uni.setTabBarItem(tabBarOptions) |
|||
} else { |
|||
tabBarOptions.text = 'API' |
|||
uni.setTabBarItem(tabBarOptions) |
|||
} |
|||
this.hasCustomedItem = !this.hasCustomedItem |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.button { |
|||
margin-top: 30rpx; |
|||
margin-left: 0; |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.btn-area { |
|||
padding-top: 30rpx; |
|||
} |
|||
</style> |
|||
@ -1,110 +0,0 @@ |
|||
<template> |
|||
<div class="invite-box"> |
|||
<view class="center-box"> |
|||
<!-- <image class="logo" src="/static/invite-logo.png"></image> --> |
|||
<!-- <image class="close" src="/static/close.png" v-on:click="$closeInvite"></image> --> |
|||
<view class="title">邀请函</view> |
|||
<view class="content">您好！您的朋友xxx邀请您对<text>“为什么小朋友到了一定年龄需要打疫苗？”</text>进行专家答疑，您是否接受？</view> |
|||
<view class="btn-group"> |
|||
<view class="invite-specia">邀请专家</view> |
|||
</view> |
|||
</view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'invite', |
|||
|
|||
props: { |
|||
_specia: String |
|||
}, |
|||
|
|||
data() { |
|||
return {} |
|||
}, |
|||
|
|||
mounted() { |
|||
console.log('this.specia', this._specia); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang='scss'> |
|||
.invite-box { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background: rgba(0,0,0,0.5); |
|||
z-index: 9999; |
|||
|
|||
.center-box { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: 622rpx; |
|||
padding: 32rpx; |
|||
border-radius: 16rpx; |
|||
opacity: 1; |
|||
background: rgba(255,255,255,1); |
|||
|
|||
.logo { |
|||
position: absolute; |
|||
top: -48rpx; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 136rpx; |
|||
height: 144rpx; |
|||
} |
|||
.close { |
|||
position: absolute; |
|||
top: 24rpx; |
|||
right: 24rpx; |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
} |
|||
|
|||
.title { |
|||
margin-top: 66rpx; |
|||
text-align: center; |
|||
color: rgba(0,0,0,1); |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
font-family: "PingFang SC"; |
|||
letter-spacing: 0.6rpx; |
|||
} |
|||
|
|||
.content { |
|||
margin: 40rpx 0; |
|||
font-size: 26rpx; |
|||
font-family: "PingFang SC"; |
|||
letter-spacing: 0.6rpx; |
|||
color: #343434; |
|||
text { |
|||
font-size: 32rpx; |
|||
letter-spacing: 0.6rpx; |
|||
color: rgba(69,108,255,1); |
|||
} |
|||
} |
|||
|
|||
.btn-group { |
|||
display: flex; |
|||
justify-content: center; |
|||
padding: 0 16rpx; |
|||
.invite-specia { |
|||
width: 526rpx; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
border-radius: 16rpx; |
|||
text-align: center; |
|||
background: linear-gradient(-46.8deg, rgba(63,101,255,1) 0%, rgba(97,141,255,1) 100%); |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,66 +0,0 @@ |
|||
<template> |
|||
<view class="product"> |
|||
<image class="product-image" :src="image ? image : 'https://via.placeholder.com/150x200'"></image> |
|||
<view class="product-title">{{title}}</view> |
|||
<view class="product-price"> |
|||
<text class="product-price-favour">￥{{originalPrice}}</text> |
|||
<text class="product-price-original">￥{{favourPrice}}</text> |
|||
<text class="product-tip">{{tip}}</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'product', |
|||
props: ['image', 'title', 'originalPrice', 'favourPrice', 'tip'] |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.product { |
|||
padding: 10rpx 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.product-image { |
|||
height: 330rpx; |
|||
width: 330rpx; |
|||
} |
|||
|
|||
.product-title { |
|||
width: 300rpx; |
|||
font-size: 32rpx; |
|||
word-break: break-all; |
|||
display: -webkit-box; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
} |
|||
|
|||
.product-price { |
|||
font-size: 28rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.product-price-original { |
|||
color: #E80080; |
|||
} |
|||
|
|||
.product-price-favour { |
|||
color: #888888; |
|||
text-decoration: line-through; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.product-tip { |
|||
position: absolute; |
|||
right: 10rpx; |
|||
background-color: #FF3333; |
|||
color: #FFFFFF; |
|||
padding: 0 10rpx; |
|||
border-radius: 5rpx; |
|||
} |
|||
</style> |
|||
@ -1,60 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-btn-v"> |
|||
<button class="target" type="default" @tap="actionSheetTap">弹出action sheet</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'action-sheet', |
|||
buttonRect: {} |
|||
} |
|||
}, |
|||
// #ifdef H5 |
|||
onReady() { |
|||
this.getNodeInfo() |
|||
window.addEventListener('resize', this.getNodeInfo) |
|||
}, |
|||
beforeDestroy() { |
|||
window.removeEventListener('resize', this.getNodeInfo) |
|||
}, |
|||
// #endif |
|||
methods: { |
|||
actionSheetTap() { |
|||
const that = this |
|||
uni.showActionSheet({ |
|||
title: '标题', |
|||
itemList: ['item1', 'item2', 'item3', 'item4'], |
|||
popover: { |
|||
// 104: navbar + topwindow 高度，暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug |
|||
top: that.buttonRect.top + 104 + that.buttonRect.height, |
|||
left: that.buttonRect.left + that.buttonRect.width / 2 |
|||
}, |
|||
success: (e) => { |
|||
console.log(e.tapIndex); |
|||
uni.showToast({ |
|||
title: "点击了第" + e.tapIndex + "个选项", |
|||
icon: "none" |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// #ifdef H5 |
|||
getNodeInfo() { |
|||
uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => { |
|||
const rect = ret[0] |
|||
if (rect) { |
|||
this.buttonRect = rect |
|||
} |
|||
}); |
|||
} |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,102 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-common-mt"> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">名称</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" placeholder="请输入联系人名称" name="name" :value="name" @input="nameChange"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">手机号</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" placeholder="请输入联系人手机号" name="phone" :value="phone" @input="phoneChange"/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" class="btn-setstorage" @tap="add">添加联系人</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
// #ifdef APP-PLUS |
|||
import permision from "@/common/permission.js" |
|||
// #endif |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'addPhoneContact', |
|||
name: '', |
|||
phone: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
nameChange: function(e) { |
|||
this.name = e.detail.value |
|||
}, |
|||
phoneChange: function(e) { |
|||
this.phone = e.detail.value |
|||
}, |
|||
async add() { |
|||
// #ifdef APP-PLUS |
|||
let status = await this.checkPermission(); |
|||
if (status !== 1) { |
|||
return; |
|||
} |
|||
// #endif |
|||
|
|||
uni.addPhoneContact({ |
|||
firstName: this.name, |
|||
mobilePhoneNumber: this.phone, |
|||
success: function() { |
|||
uni.showModal({ |
|||
content: '已成功添加联系人！', |
|||
showCancel: false |
|||
}) |
|||
}, |
|||
fail: function() { |
|||
uni.showModal({ |
|||
content: '添加联系人失败！', |
|||
showCancel: false |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
// #ifdef APP-PLUS |
|||
, |
|||
async checkPermission() { |
|||
let status = permision.isIOS ? await permision.requestIOS('contact') : |
|||
await permision.requestAndroid('android.permission.WRITE_CONTACTS'); |
|||
|
|||
if (status === null || status === 1) { |
|||
status = 1; |
|||
} else { |
|||
uni.showModal({ |
|||
content: "需要联系人权限", |
|||
confirmText: "设置", |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
permision.gotoAppSetting(); |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
return status; |
|||
} |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,125 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="animation-element-wrapper"> |
|||
<view class="animation-element" :animation="animationData"></view> |
|||
</view> |
|||
<scroll-view class="animation-buttons" scroll-y="true"> |
|||
<button class="animation-button" @tap="rotate">旋转</button> |
|||
<button class="animation-button" @tap="scale">缩放</button> |
|||
<button class="animation-button" @tap="translate">移动</button> |
|||
<button class="animation-button" @tap="skew">倾斜</button> |
|||
<button class="animation-button" @tap="rotateAndScale">旋转并缩放</button> |
|||
<button class="animation-button" @tap="rotateThenScale">旋转后缩放</button> |
|||
<button class="animation-button" @tap="all">同时展示全部</button> |
|||
<button class="animation-button" @tap="allInQueue">顺序展示全部</button> |
|||
<button class="animation-button animation-button-reset" @tap="reset">还原</button> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'createAnimation', |
|||
animationData: '' |
|||
} |
|||
}, |
|||
onUnload(){ |
|||
this.animationData = '' |
|||
}, |
|||
onLoad() { |
|||
this.animation = uni.createAnimation() |
|||
}, |
|||
methods: { |
|||
rotate: function () { |
|||
this.animation.rotate(Math.random() * 720 - 360).step() |
|||
this.animationData = this.animation.export() |
|||
}, |
|||
scale: function () { |
|||
this.animation.scale(Math.random() * 2).step() |
|||
this.animationData = this.animation.export() |
|||
}, |
|||
translate: function () { |
|||
this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step() |
|||
this.animationData = this.animation.export() |
|||
}, |
|||
skew: function () { |
|||
this.animation.skew(Math.random() * 90, Math.random() * 90).step() |
|||
this.animationData = this.animation.export() |
|||
}, |
|||
rotateAndScale: function () { |
|||
this.animation.rotate(Math.random() * 720 - 360) |
|||
.scale(Math.random() * 2) |
|||
.step() |
|||
this.animationData = this.animation.export() |
|||
}, |
|||
rotateThenScale: function () { |
|||
this.animation.rotate(Math.random() * 720 - 360).step() |
|||
.scale(Math.random() * 2).step() |
|||
this.animationData = this.animation.export() |
|||
}, |
|||
all: function () { |
|||
this.animation.rotate(Math.random() * 720 - 360) |
|||
.scale(Math.random() * 2) |
|||
.translate(Math.random() * 100 - 50, Math.random() * 100 - 50) |
|||
.skew(Math.random() * 90, Math.random() * 90) |
|||
.step() |
|||
this.animationData = this.animation.export() |
|||
}, |
|||
allInQueue: function () { |
|||
this.animation.rotate(Math.random() * 720 - 360).step() |
|||
.scale(Math.random() * 2).step() |
|||
.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step() |
|||
.skew(Math.random() * 90, Math.random() * 90).step() |
|||
this.animationData = this.animation.export() |
|||
}, |
|||
reset: function () { |
|||
this.animation.rotate(0, 0) |
|||
.scale(1) |
|||
.translate(0, 0) |
|||
.skew(0, 0) |
|||
.step({ |
|||
duration: 0 |
|||
}) |
|||
this.animationData = this.animation.export() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.animation-element-wrapper { |
|||
display: flex; |
|||
width: 100%; |
|||
padding-top: 150rpx; |
|||
padding-bottom: 150rpx; |
|||
justify-content: center; |
|||
overflow: hidden; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.animation-element { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
background-color: #1AAD19; |
|||
} |
|||
|
|||
.animation-buttons { |
|||
padding:30rpx 0; |
|||
width: 100%; |
|||
/* height: 360rpx; */ |
|||
} |
|||
|
|||
.animation-button { |
|||
float: left; |
|||
width: 44%; |
|||
margin: 15rpx 3%; |
|||
} |
|||
|
|||
.animation-button-reset { |
|||
width: 94%; |
|||
} |
|||
</style> |
|||
@ -1,163 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-center"> |
|||
<text class="time-big">{{formatedPlayTime}}</text> |
|||
</view> |
|||
<view class="uni-common-mt"> |
|||
<slider class="slider" min="0" max="21" step="1" :value="playTime" @change="seek"></slider> |
|||
</view> |
|||
<view class="play-time"> |
|||
<text>00:00</text> |
|||
<text>00:21</text> |
|||
</view> |
|||
<view class="uni-hello-text">注意：离开当前页面后背景音乐将保持播放，但退出uni-app将停止</view> |
|||
<view class="page-body-buttons"> |
|||
<block v-if="playing"> |
|||
<view class="page-body-button" @tap="stop"> |
|||
<image src="/static/stop.png"></image> |
|||
</view> |
|||
<view class="page-body-button" @tap="pause"> |
|||
<image src="/static/pause.png"></image> |
|||
</view> |
|||
</block> |
|||
<block v-if="!playing"> |
|||
<view class="page-body-button"></view> |
|||
<view class="page-body-button" @tap="play"> |
|||
<image src="/static/play.png"></image> |
|||
</view> |
|||
</block> |
|||
<view class="page-body-button"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
import * as util from '../../../common/util.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'backgroundAudio', |
|||
bgAudioMannager: null, |
|||
dataUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3', |
|||
playing: false, |
|||
playTime: 0, |
|||
formatedPlayTime: '00:00:00' |
|||
} |
|||
}, |
|||
onLoad: function () { |
|||
this.playing = this.$backgroundAudioData.playing; |
|||
this.playTime = this.$backgroundAudioData.playTime; |
|||
this.formatedPlayTime = this.$backgroundAudioData.formatedPlayTime; |
|||
|
|||
let bgAudioMannager = uni.getBackgroundAudioManager(); |
|||
if(!bgAudioMannager.title){ |
|||
bgAudioMannager.title = '致爱丽丝'; |
|||
} |
|||
if(!bgAudioMannager.singer) { |
|||
bgAudioMannager.singer = '暂无'; |
|||
} |
|||
if(!bgAudioMannager.coverImgUrl){ |
|||
bgAudioMannager.coverImgUrl = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c517b410-5184-11eb-b997-9918a5dda011.jpeg'; |
|||
} |
|||
|
|||
bgAudioMannager.onPlay(() => { |
|||
console.log("开始播放"); |
|||
this.$backgroundAudioData.playing = this.playing = true; |
|||
}) |
|||
bgAudioMannager.onPause(() => { |
|||
console.log("暂停播放"); |
|||
this.$backgroundAudioData.playing = this.playing = false; |
|||
}) |
|||
bgAudioMannager.onEnded(() => { |
|||
this.playing = false; |
|||
this.$backgroundAudioData.playing = false; |
|||
this.$backgroundAudioData.playTime = this.playTime = 0; |
|||
this.$backgroundAudioData.formatedPlayTime = this.formatedPlayTime = util.formatTime(0); |
|||
}) |
|||
|
|||
bgAudioMannager.onTimeUpdate((e) => { |
|||
if (Math.floor(bgAudioMannager.currentTime) > Math.floor(this.playTime)) { |
|||
this.$backgroundAudioData.formatedPlayTime = this.formatedPlayTime = util.formatTime(Math.floor(bgAudioMannager.currentTime)); |
|||
} |
|||
this.$backgroundAudioData.playTime = this.playTime = bgAudioMannager.currentTime; |
|||
}) |
|||
|
|||
this.bgAudioMannager = bgAudioMannager; |
|||
}, |
|||
methods: { |
|||
play: function (res) { |
|||
if (!this.bgAudioMannager.src) { |
|||
this.bgAudioMannager.startTime = this.playTime; |
|||
this.bgAudioMannager.src = this.dataUrl; |
|||
} else { |
|||
this.bgAudioMannager.seek(this.playTime); |
|||
this.bgAudioMannager.play(); |
|||
} |
|||
}, |
|||
seek: function (e) { |
|||
this.bgAudioMannager.seek(e.detail.value); |
|||
}, |
|||
pause: function () { |
|||
this.bgAudioMannager.pause(); |
|||
}, |
|||
stop: function () { |
|||
this.bgAudioMannager.stop(); |
|||
this.$backgroundAudioData.playing = this.playing = false; |
|||
this.$backgroundAudioData.playTime = this.playTime = 0; |
|||
this.$backgroundAudioData.formatedPlayTime = this.formatedPlayTime = util.formatTime(0); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
image { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.page-body-text { |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.page-body-wrapper { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
.page-body-info { |
|||
padding-bottom: 50rpx; |
|||
} |
|||
|
|||
.time-big { |
|||
font-size: 60rpx; |
|||
margin: 20rpx; |
|||
} |
|||
|
|||
.slider { |
|||
width:630rpx; |
|||
} |
|||
|
|||
.play-time { |
|||
font-size: 28rpx; |
|||
width:100%; |
|||
padding: 20rpx 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.page-body-buttons { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
margin-top: 100rpx; |
|||
} |
|||
|
|||
.page-body-button { |
|||
width: 250rpx; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -1,723 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view> |
|||
本蓝牙协议只支持低功耗蓝牙协议ble。如果想连接非ble蓝牙设备，请在社区搜索 Native.js 蓝牙。 |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" :disabled="disabled[0]" @click="openBluetoothAdapter"> |
|||
初始化蓝牙模块 |
|||
</button> |
|||
<view v-if="!adapterState.available"> |
|||
{{ '蓝牙适配器不可用,请初始化蓝牙模块' }} |
|||
</view> |
|||
<button |
|||
type="primary" |
|||
:loading="searchLoad" |
|||
:disabled="disabled[1]" |
|||
@click="startBluetoothDevicesDiscovery" |
|||
> |
|||
开始搜索蓝牙设备 |
|||
</button> |
|||
<button |
|||
type="primary" |
|||
:disabled="disabled[2]" |
|||
@click="stopBluetoothDevicesDiscovery(false)" |
|||
> |
|||
停止搜索蓝牙设备 |
|||
</button> |
|||
<button |
|||
type="primary" |
|||
:loading="newDeviceLoad" |
|||
:disabled="disabled[3]" |
|||
@click="queryDevices" |
|||
> |
|||
选择设备 |
|||
</button> |
|||
<view v-if="equipment.length > 0"> |
|||
{{ |
|||
(connected ? '已连接设备' : '已选择设备') + |
|||
' : ' + |
|||
equipment[0].name + |
|||
' (' + |
|||
equipment[0].deviceId + |
|||
')' |
|||
}} |
|||
</view> |
|||
<button type="primary" :disabled="disabled[4]" @click="createBLEConnection"> |
|||
连接蓝牙设备 |
|||
</button> |
|||
<button type="primary" :disabled="disabled[5]" @click="getBLEDeviceServices"> |
|||
选择设备服务 |
|||
</button> |
|||
<view v-if="servicesData.length > 0">已选服务uuid：{{ servicesData[0].uuid }}</view> |
|||
<button type="primary" :disabled="disabled[6]" @click="getBLEDeviceCharacteristics"> |
|||
获取服务的特征值 |
|||
</button> |
|||
<view v-if="characteristicsData.length > 0"> |
|||
<view class="uni-list_name">uuid:{{ characteristicsData[0].uuid }}</view> |
|||
<view class="uni-list_item"> |
|||
是否支持 read 操作:{{ characteristicsData[0].properties.read }} |
|||
</view> |
|||
<view class="uni-list_item"> |
|||
是否支持 write 操作:{{ characteristicsData[0].properties.write }} |
|||
</view> |
|||
<view class="uni-list_item"> |
|||
是否支持 notify 操作:{{ characteristicsData[0].properties.notify }} |
|||
</view> |
|||
<view class="uni-list_item"> |
|||
是否支持 indicate 操作:{{ characteristicsData[0].properties.indicate }} |
|||
</view> |
|||
</view> |
|||
<!-- <button type="primary" :disabled="disabled[7]" @click="readBLECharacteristicValue"> |
|||
读取特征值数据 |
|||
</button> |
|||
<view v-if="valueChangeData.serviceId"> |
|||
<view class="list-name"> |
|||
特征值最新的值:{{ valueChangeData.value || '还没有最新值' }} |
|||
</view> |
|||
</view> --> |
|||
<!-- <button type="primary" :disabled="disabled[8]" @click="w">写入特征值数据</button> --> |
|||
<button type="primary" :disabled="disabled[9]" @click="closeBLEConnection"> |
|||
断开蓝牙设备 |
|||
</button> |
|||
<button type="primary" :disabled="disabled[10]" @click="closeBluetoothAdapter"> |
|||
关闭蓝牙模块 |
|||
</button> |
|||
</view> |
|||
</view> |
|||
<!-- 遮罩 --> |
|||
<view v-if="maskShow" class="uni-mask" @touchmove.stop.prevent="moveHandle" @click="maskclose"> |
|||
<scroll-view class="uni-scroll_box" scroll-y @touchmove.stop.prevent="moveHandle" @click.stop="moveHandle"> |
|||
<view class="uni-title"> |
|||
已经发现{{ list.length }}{{ showMaskType === 'device' ? '台设备' : '个服务' }}: |
|||
</view> |
|||
<view |
|||
class="uni-list-box" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
@click="tapQuery(item)" |
|||
> |
|||
<view v-if="showMaskType === 'device'"> |
|||
<view class="uni-list_name">{{ item.name || item.localName }}</view> |
|||
<view class="uni-list_item">信号强度:{{ item.RSSI }}dBm</view> |
|||
<view class="uni-list_item">UUID:{{ item.deviceId }}</view> |
|||
<!-- <view class="list-item" v-if="showMaskType === 'device'"> |
|||
Service数量:{{ item.advertisServiceUUIDs.length }} |
|||
</view> --> |
|||
</view> |
|||
<view v-if="showMaskType === 'service'"> |
|||
<view class="uni-list_item" style="line-height:2.2;"> |
|||
UUID: {{ item.uuid }} |
|||
<text v-if="showMaskType === 'service'"> |
|||
{{ item.isPrimary ? '（主服务）' : '' }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
<view v-if="showMaskType === 'characteristics'"> |
|||
<view class="uni-list_name">uuid:{{ item.uuid }}</view> |
|||
<view class="uni-list_item">是否支持 read 操作:{{ item.properties.read }}</view> |
|||
<view class="uni-list_item"> |
|||
是否支持 write 操作:{{ item.properties.write }} |
|||
</view> |
|||
<view class="uni-list_item"> |
|||
是否支持 notify 操作:{{ item.properties.notify }} |
|||
</view> |
|||
<view class="uni-list_item"> |
|||
是否支持 indicate 操作:{{ item.properties.indicate }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'bluetooth', |
|||
disabled: [false, true, true, true, true, true, true, true, true, true, true], |
|||
newDeviceLoad: false, |
|||
searchLoad: false, |
|||
maskShow: false, |
|||
equipment: [], |
|||
adapterState: { |
|||
discovering: false, |
|||
available: false |
|||
}, |
|||
connected: false, |
|||
showMaskType: 'device', |
|||
servicesData: [], |
|||
characteristicsData: [], |
|||
valueChangeData: {}, |
|||
isStop:true , |
|||
list: [] |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.onBLEConnectionStateChange(); |
|||
}, |
|||
methods: { |
|||
moveHandle() {}, |
|||
/** |
|||
* 关闭遮罩 |
|||
*/ |
|||
maskclose(){ |
|||
this.maskShow = false; |
|||
}, |
|||
/** |
|||
* 选择设备 |
|||
*/ |
|||
queryDevices() { |
|||
// this.newDeviceLoad = true; |
|||
this.showMaskType = 'device'; |
|||
this.maskShow = true; |
|||
}, |
|||
tapQuery(item) { |
|||
if (this.showMaskType === 'device') { |
|||
this.$set(this.disabled, 4, false); |
|||
if (this.equipment.length > 0) { |
|||
this.equipment[0] = item; |
|||
} else { |
|||
this.equipment.push(item); |
|||
} |
|||
this.newDeviceLoad = false; |
|||
} |
|||
if (this.showMaskType === 'service') { |
|||
this.$set(this.disabled, 6, false); |
|||
if (this.servicesData.length > 0) { |
|||
this.servicesData[0] = item; |
|||
} else { |
|||
this.servicesData.push(item); |
|||
} |
|||
} |
|||
if (this.showMaskType === 'characteristics') { |
|||
this.$set(this.disabled, 7, false); |
|||
if (this.characteristicsData.length > 0) { |
|||
this.characteristicsData[0] = item; |
|||
} else { |
|||
this.characteristicsData.push(item); |
|||
} |
|||
} |
|||
this.maskShow = false; |
|||
}, |
|||
/** |
|||
* 初始化蓝牙设备 |
|||
*/ |
|||
openBluetoothAdapter() { |
|||
uni.openBluetoothAdapter({ |
|||
success: e => { |
|||
console.log('初始化蓝牙成功:' + e.errMsg); |
|||
console.log(JSON.stringify(e)); |
|||
this.isStop = false ; |
|||
this.$set(this.disabled, 0, true); |
|||
this.$set(this.disabled, 1, false); |
|||
this.$set(this.disabled, 10, false); |
|||
this.getBluetoothAdapterState(); |
|||
}, |
|||
fail: e => { |
|||
console.log(e) |
|||
console.log('初始化蓝牙失败，错误码：' + (e.errCode || e.errMsg)); |
|||
if (e.errCode !== 0) { |
|||
initTypes(e.errCode,e.errMsg); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 开始搜索蓝牙设备 |
|||
*/ |
|||
startBluetoothDevicesDiscovery() { |
|||
uni.startBluetoothDevicesDiscovery({ |
|||
success: e => { |
|||
console.log('开始搜索蓝牙设备:' + e.errMsg); |
|||
this.searchLoad = true; |
|||
this.$set(this.disabled, 1, true); |
|||
this.$set(this.disabled, 2, false); |
|||
this.$set(this.disabled, 3, false); |
|||
this.onBluetoothDeviceFound(); |
|||
}, |
|||
fail: e => { |
|||
console.log('搜索蓝牙设备失败，错误码：' + e.errCode); |
|||
if (e.errCode !== 0) { |
|||
initTypes(e.errCode); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 停止搜索蓝牙设备 |
|||
*/ |
|||
stopBluetoothDevicesDiscovery(types) { |
|||
uni.stopBluetoothDevicesDiscovery({ |
|||
success: e => { |
|||
console.log('停止搜索蓝牙设备:' + e.errMsg); |
|||
if (types) { |
|||
this.$set(this.disabled, 1, true); |
|||
} else { |
|||
this.$set(this.disabled, 1, false); |
|||
} |
|||
this.$set(this.disabled, 2, true); |
|||
// this.$set(this.disabled, 3, true); |
|||
this.searchLoad = false; |
|||
}, |
|||
fail: e => { |
|||
console.log('停止搜索蓝牙设备失败，错误码：' + e.errCode); |
|||
if (e.errCode !== 0) { |
|||
initTypes(e.errCode); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 发现外围设备 |
|||
*/ |
|||
onBluetoothDeviceFound() { |
|||
uni.onBluetoothDeviceFound(devices => { |
|||
console.log('开始监听寻找到新设备的事件'); |
|||
// this.$set(this.disabled, 3, false); |
|||
this.getBluetoothDevices(); |
|||
}); |
|||
}, |
|||
/** |
|||
* 获取在蓝牙模块生效期间所有已发现的蓝牙设备。包括已经和本机处于连接状态的设备。 |
|||
*/ |
|||
getBluetoothDevices() { |
|||
uni.getBluetoothDevices({ |
|||
success: res => { |
|||
this.newDeviceLoad = false; |
|||
console.log('获取蓝牙设备成功:' + res.errMsg); |
|||
// console.log(JSON.stringify(res)) |
|||
this.list = res.devices; |
|||
}, |
|||
fail: e => { |
|||
console.log('获取蓝牙设备错误，错误码：' + e.errCode); |
|||
if (e.errCode !== 0) { |
|||
initTypes(e.errCode); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 获取本机蓝牙适配器状态 |
|||
*/ |
|||
getBluetoothAdapterState() { |
|||
console.log('--->'); |
|||
uni.getBluetoothAdapterState({ |
|||
success: res => { |
|||
console.log(JSON.stringify(res)); |
|||
this.adapterState = res; |
|||
}, |
|||
fail: e => { |
|||
console.log('获取本机蓝牙适配器状态失败，错误码：' + e.errCode); |
|||
if (e.errCode !== 0) { |
|||
initTypes(e.errCode); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 连接低功耗蓝牙 |
|||
*/ |
|||
createBLEConnection() { |
|||
let deviceId = this.equipment[0].deviceId; |
|||
uni.showToast({ |
|||
title: '连接蓝牙...', |
|||
icon: 'loading', |
|||
duration: 99999 |
|||
}); |
|||
uni.createBLEConnection({ |
|||
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接 |
|||
deviceId, |
|||
success: res => { |
|||
console.log(res); |
|||
console.log('连接蓝牙成功:' + res.errMsg); |
|||
// 连接设备后断开搜索 并且不能搜索设备 |
|||
this.stopBluetoothDevicesDiscovery(true); |
|||
uni.hideToast(); |
|||
uni.showToast({ |
|||
title: '连接成功', |
|||
icon: 'success', |
|||
duration: 2000 |
|||
}); |
|||
this.$set(this.disabled, 3, true); |
|||
this.$set(this.disabled, 4, true); |
|||
this.$set(this.disabled, 5, false); |
|||
this.$set(this.disabled, 9, false); |
|||
this.connected = true; |
|||
}, |
|||
fail: e => { |
|||
console.log('连接低功耗蓝牙失败，错误码：' + e.errCode); |
|||
if (e.errCode !== 0) { |
|||
initTypes(e.errCode); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 断开与低功耗蓝牙设备的连接 |
|||
*/ |
|||
closeBLEConnection() { |
|||
let deviceId = this.equipment[0].deviceId; |
|||
uni.closeBLEConnection({ |
|||
deviceId, |
|||
success: res => { |
|||
console.log(res); |
|||
console.log('断开低功耗蓝牙成功:' + res.errMsg); |
|||
this.$set(this.disabled, 1, false); |
|||
this.$set(this.disabled, 3, true); |
|||
this.$set(this.disabled, 4, true); |
|||
this.$set(this.disabled, 5, true); |
|||
this.$set(this.disabled, 6, true); |
|||
this.$set(this.disabled, 7, true); |
|||
this.$set(this.disabled, 8, true); |
|||
this.$set(this.disabled, 9, true); |
|||
this.equipment = []; |
|||
this.servicesData = []; |
|||
this.characteristicsData = []; |
|||
}, |
|||
fail: e => { |
|||
console.log('断开低功耗蓝牙成功，错误码：' + e.errCode); |
|||
if (e.errCode !== 0) { |
|||
initTypes(e.errCode); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 获取所有服务 |
|||
*/ |
|||
getBLEDeviceServices() { |
|||
let deviceId = this.equipment[0].deviceId; |
|||
console.log('获取所有服务的 uuid:' + deviceId); |
|||
|
|||
uni.getBLEDeviceServices({ |
|||
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接 |
|||
deviceId, |
|||
success: res => { |
|||
console.log(JSON.stringify(res.services)); |
|||
console.log('获取设备服务成功:' + res.errMsg); |
|||
this.$set(this.disabled, 7, true); |
|||
this.$set(this.disabled, 8, true); |
|||
this.showMaskType = 'service'; |
|||
this.list = res.services; |
|||
|
|||
this.characteristicsData = []; |
|||
if (this.list.length <= 0) { |
|||
toast('获取服务失败，请重试!'); |
|||
return; |
|||
} |
|||
this.maskShow = true; |
|||
}, |
|||
fail: e => { |
|||
console.log('获取设备服务失败，错误码：' + e.errCode); |
|||
if (e.errCode !== 0) { |
|||
initTypes(e.errCode); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 获取某个服务下的所有特征值 |
|||
*/ |
|||
getBLEDeviceCharacteristics() { |
|||
let deviceId = this.equipment[0].deviceId; |
|||
let serviceId = this.servicesData[0].uuid; |
|||
console.log(deviceId); |
|||
console.log(serviceId); |
|||
uni.getBLEDeviceCharacteristics({ |
|||
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接 |
|||
deviceId, |
|||
// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取 |
|||
serviceId, |
|||
success: res => { |
|||
console.log(JSON.stringify(res)); |
|||
console.log('获取特征值成功:' + res.errMsg); |
|||
this.$set(this.disabled, 7, true); |
|||
this.valueChangeData = {}; |
|||
this.showMaskType = 'characteristics'; |
|||
this.list = res.characteristics; |
|||
if (this.list.length <= 0) { |
|||
toast('获取特征值失败，请重试!'); |
|||
return; |
|||
} |
|||
this.maskShow = true; |
|||
}, |
|||
fail: e => { |
|||
console.log('获取特征值失败，错误码：' + e.errCode); |
|||
if (e.errCode !== 0) { |
|||
initTypes(e.errCode); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 监听低功耗蓝牙连接状态的改变事件。包括开发者主动连接或断开连接，设备丢失，连接异常断开等等 |
|||
*/ |
|||
onBLEConnectionStateChange() { |
|||
uni.onBLEConnectionStateChange(res => { |
|||
// 该方法回调中可以用于处理连接意外断开等异常情况 |
|||
console.log(`蓝牙连接状态 -------------------------->`); |
|||
console.log(JSON.stringify(res)); |
|||
if (!res.connected) { |
|||
if(this.isStop) return ; |
|||
console.log('断开低功耗蓝牙成功:'); |
|||
this.$set(this.disabled, 1, false); |
|||
this.$set(this.disabled, 3, true); |
|||
this.$set(this.disabled, 4, true); |
|||
this.$set(this.disabled, 5, true); |
|||
this.$set(this.disabled, 6, true); |
|||
this.$set(this.disabled, 7, true); |
|||
this.$set(this.disabled, 8, true); |
|||
this.$set(this.disabled, 9, true); |
|||
this.searchLoad = false; |
|||
this.equipment = []; |
|||
this.servicesData = []; |
|||
this.characteristicsData = []; |
|||
this.valueChangeData = {}; |
|||
toast('已经断开当前蓝牙连接'); |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 读取低功耗蓝牙设备的特征值的二进制数据值。注意：必须设备的特征值支持 read 才可以成功调用 |
|||
*/ |
|||
readBLECharacteristicValue() { |
|||
let deviceId = this.equipment[0].deviceId; |
|||
let serviceId = this.servicesData[0].uuid; |
|||
let characteristicId = this.characteristicsData[0].uuid; |
|||
console.log(deviceId); |
|||
console.log(serviceId); |
|||
console.log(characteristicId); |
|||
uni.readBLECharacteristicValue({ |
|||
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接 |
|||
deviceId, |
|||
// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取 |
|||
serviceId, |
|||
// 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取 |
|||
characteristicId, |
|||
success: res => { |
|||
console.log('读取设备数据值成功'); |
|||
console.log(JSON.stringify(res)); |
|||
this.notifyBLECharacteristicValueChange(); |
|||
}, |
|||
fail(e) { |
|||
console.log('读取设备数据值失败，错误码：' + e.errCode); |
|||
if (e.errCode !== 0) { |
|||
initTypes(e.errCode); |
|||
} |
|||
} |
|||
}); |
|||
this.onBLECharacteristicValueChange(); |
|||
}, |
|||
/** |
|||
* 监听低功耗蓝牙设备的特征值变化事件。必须先启用 notifyBLECharacteristicValueChange 接口才能接收到设备推送的 notification。 |
|||
*/ |
|||
onBLECharacteristicValueChange() { |
|||
// 必须在这里的回调才能获取 |
|||
uni.onBLECharacteristicValueChange(characteristic => { |
|||
console.log('监听低功耗蓝牙设备的特征值变化事件成功'); |
|||
console.log(JSON.stringify(characteristic)); |
|||
this.valueChangeData = characteristic; |
|||
}); |
|||
}, |
|||
/** |
|||
* 订阅操作成功后需要设备主动更新特征值的 value，才会触发 uni.onBLECharacteristicValueChange 回调。 |
|||
*/ |
|||
notifyBLECharacteristicValueChange() { |
|||
let deviceId = this.equipment[0].deviceId; |
|||
let serviceId = this.servicesData[0].uuid; |
|||
let characteristicId = this.characteristicsData[0].uuid; |
|||
let notify = this.characteristicsData[0].properties.notify; |
|||
console.log(deviceId); |
|||
console.log(serviceId); |
|||
console.log(characteristicId); |
|||
console.log(notify); |
|||
uni.notifyBLECharacteristicValueChange({ |
|||
state: true, // 启用 notify 功能 |
|||
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接 |
|||
deviceId, |
|||
// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取 |
|||
serviceId, |
|||
// 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取 |
|||
characteristicId, |
|||
success(res) { |
|||
console.log('notifyBLECharacteristicValueChange success:' + res.errMsg); |
|||
console.log(JSON.stringify(res)); |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 断开蓝牙模块 |
|||
*/ |
|||
closeBluetoothAdapter(OBJECT) { |
|||
uni.closeBluetoothAdapter({ |
|||
success: res => { |
|||
console.log('断开蓝牙模块成功'); |
|||
this.isStop = true ; |
|||
this.$set(this.disabled, 0, false); |
|||
this.$set(this.disabled, 1, true); |
|||
this.$set(this.disabled, 2, true); |
|||
this.$set(this.disabled, 3, true); |
|||
this.$set(this.disabled, 4, true); |
|||
this.$set(this.disabled, 5, true); |
|||
this.$set(this.disabled, 6, true); |
|||
this.$set(this.disabled, 7, true); |
|||
this.$set(this.disabled, 8, true); |
|||
this.$set(this.disabled, 9, true); |
|||
this.$set(this.disabled, 10, true); |
|||
this.equipment = []; |
|||
this.servicesData = []; |
|||
this.characteristicsData = []; |
|||
this.valueChangeData = {}; |
|||
this.adapterState = []; |
|||
this.searchLoad =false; |
|||
toast('断开蓝牙模块'); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
/** |
|||
* 判断初始化蓝牙状态 |
|||
*/ |
|||
function initTypes(code, errMsg) { |
|||
switch (code) { |
|||
case 10000: |
|||
toast('未初始化蓝牙适配器'); |
|||
break; |
|||
case 10001: |
|||
toast('未检测到蓝牙，请打开蓝牙重试！'); |
|||
break; |
|||
case 10002: |
|||
toast('没有找到指定设备'); |
|||
break; |
|||
case 10003: |
|||
toast('连接失败'); |
|||
break; |
|||
case 10004: |
|||
toast('没有找到指定服务'); |
|||
break; |
|||
case 10005: |
|||
toast('没有找到指定特征值'); |
|||
break; |
|||
case 10006: |
|||
toast('当前连接已断开'); |
|||
break; |
|||
case 10007: |
|||
toast('当前特征值不支持此操作'); |
|||
break; |
|||
case 10008: |
|||
toast('其余所有系统上报的异常'); |
|||
break; |
|||
case 10009: |
|||
toast('Android 系统特有，系统版本低于 4.3 不支持 BLE'); |
|||
break; |
|||
default: |
|||
toast(errMsg); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 弹出框封装 |
|||
*/ |
|||
function toast(content, showCancel = false) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content, |
|||
showCancel |
|||
}); |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
.uni-title { |
|||
/* width: 100%; */ |
|||
/* height: 80rpx; */ |
|||
text-align: center; |
|||
} |
|||
|
|||
.uni-mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
padding: 0 30rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.uni-scroll_box { |
|||
height: 70%; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
} |
|||
.uni-list-box { |
|||
margin: 0 20rpx; |
|||
padding: 15rpx 0; |
|||
border-bottom: 1px #f5f5f5 solid; |
|||
box-sizing: border-box; |
|||
} |
|||
.uni-list:last-child { |
|||
border: none; |
|||
} |
|||
.uni-list_name { |
|||
font-size: 30rpx; |
|||
color: #333; |
|||
} |
|||
.uni-list_item { |
|||
font-size: 24rpx; |
|||
color: #555; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.uni-success_box { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
min-height: 100rpx; |
|||
width: 100%; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
border-top: 1px #eee solid; |
|||
} |
|||
.uni-success_sub { |
|||
/* width: 100%%; */ |
|||
height: 100rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 30rpx; |
|||
} |
|||
.uni-close_button { |
|||
padding: 0 20rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
background: #ce3c39; |
|||
color: #ffffff; |
|||
border-radius: 10rpx; |
|||
} |
|||
.uni-success_content { |
|||
height: 600rpx; |
|||
margin: 30rpx; |
|||
margin-top: 0; |
|||
border: 1px #eee solid; |
|||
padding: 30rpx; |
|||
} |
|||
.uni-content_list { |
|||
padding-bottom: 10rpx; |
|||
border-bottom: 1px #f5f5f5 solid; |
|||
} |
|||
.uni-tips { |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
</style> |
|||
@ -1,86 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<!-- #ifndef MP-TOUTIAO --> |
|||
<view class="text-box">亮度 : {{ screen }}</view> |
|||
<view class="uni-slider"><slider :value="screen" @changing="sliderChange" step="1" /></view> |
|||
<!-- #endif --> |
|||
<button type="primary" @click="keep"> |
|||
{{ keepScreenOn ? '保持常亮状态' : '关闭常亮状态' }} |
|||
</button> |
|||
<view class="tips"> |
|||
保持常亮时，屏幕不会熄灭。仅在当前应用生效，离开应用后设置失效。 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'brightness', |
|||
screen: 0, |
|||
keepScreenOn: true |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
uni.getScreenBrightness({ |
|||
success: res => { |
|||
this.screen = (res.value * 100).toFixed(); |
|||
}, |
|||
fail(e) { |
|||
console.log(e); |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
sliderChange(e) { |
|||
let screen = e.detail.value; |
|||
// 判断是否重复 |
|||
if (this.screen !== screen) { |
|||
console.log('当前数值：' + e.detail.value); |
|||
uni.setScreenBrightness({ |
|||
value: screen / 100, |
|||
success: function() { |
|||
}, |
|||
fail(e) { |
|||
console.log(e); |
|||
} |
|||
}); |
|||
this.screen = screen; |
|||
} |
|||
}, |
|||
keep() { |
|||
uni.setKeepScreenOn({ |
|||
keepScreenOn: this.keepScreenOn |
|||
}); |
|||
this.keepScreenOn = !this.keepScreenOn; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.text-box { |
|||
margin-bottom: 40rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 300rpx; |
|||
background-color: #ffffff; |
|||
font-size: 32rpx; |
|||
color: #353535; |
|||
} |
|||
|
|||
.uni-slider { |
|||
margin: 100rpx 0; |
|||
} |
|||
|
|||
.tips { |
|||
font-size: 26rpx; |
|||
text-align: center; |
|||
margin-top: 20rpx; |
|||
color: #999; |
|||
} |
|||
</style> |
|||
@ -1,366 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-common-mt"> |
|||
<canvas class="canvas-element" canvas-id="canvas" id="canvas"></canvas> |
|||
<scroll-view class="canvas-buttons" scroll-y="true"> |
|||
<block v-for="(name, index) in names" :key="index"> |
|||
<button class="canvas-button" @click="handleCanvasButton(name)">{{name}}</button> |
|||
</block> |
|||
<button class="canvas-button" @click="toTempFilePath" type="primary">toTempFilePath</button> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
var context = null; |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'createContext', |
|||
names: ["rotate", "scale", "reset", "translate", "save", "restore", "drawImage", "fillText", "fill", |
|||
"stroke", "clearRect", "beginPath", "closePath", "moveTo", "lineTo", "rect", "arc", |
|||
"quadraticCurveTo", "bezierCurveTo", "setFillStyle", "setStrokeStyle", "setGlobalAlpha", |
|||
"setShadow", "setFontSize", "setLineCap", "setLineJoin", "setLineWidth", "setMiterLimit" |
|||
] |
|||
} |
|||
}, |
|||
onReady: function() { |
|||
context = uni.createCanvasContext('canvas',this) |
|||
}, |
|||
methods: { |
|||
toTempFilePath: function() { |
|||
uni.canvasToTempFilePath({ |
|||
canvasId: 'canvas', |
|||
success: function(res) { |
|||
console.log(res.tempFilePath) |
|||
}, |
|||
fail: function(err) { |
|||
console.error(JSON.stringify(err)) |
|||
} |
|||
}) |
|||
}, |
|||
handleCanvasButton: function(name) { |
|||
this[name] && this[name](); |
|||
}, |
|||
rotate: function() { |
|||
context.beginPath() |
|||
context.rotate(10 * Math.PI / 180) |
|||
context.rect(225, 75, 20, 10) |
|||
context.fill() |
|||
context.draw() |
|||
}, |
|||
scale: function() { |
|||
context.beginPath() |
|||
context.rect(25, 25, 50, 50) |
|||
context.stroke() |
|||
|
|||
context.scale(2, 2) |
|||
|
|||
context.beginPath() |
|||
context.rect(25, 25, 50, 50) |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
reset: function() { |
|||
context.beginPath() |
|||
|
|||
context.setFillStyle('#000000') |
|||
context.setStrokeStyle('#000000') |
|||
context.setFontSize(10) |
|||
context.setGlobalAlpha(1) |
|||
context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)') |
|||
|
|||
context.setLineCap('butt') |
|||
context.setLineJoin('miter') |
|||
context.setLineWidth(1) |
|||
context.setMiterLimit(10) |
|||
context.draw() |
|||
}, |
|||
translate: function() { |
|||
context.beginPath() |
|||
context.rect(10, 10, 100, 50) |
|||
context.fill() |
|||
|
|||
context.translate(70, 70) |
|||
|
|||
context.beginPath() |
|||
context.fill() |
|||
context.draw() |
|||
}, |
|||
save: function() { |
|||
context.beginPath() |
|||
context.setStrokeStyle('#00ff00') |
|||
context.save() |
|||
|
|||
context.scale(2, 2) |
|||
context.setStrokeStyle('#ff0000') |
|||
context.rect(0, 0, 100, 100) |
|||
context.stroke() |
|||
context.restore() |
|||
|
|||
context.rect(0, 0, 50, 50) |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
restore: function() { |
|||
[3, 2, 1].forEach(function(item) { |
|||
context.beginPath() |
|||
context.save() |
|||
context.scale(item, item) |
|||
context.rect(10, 10, 100, 100) |
|||
context.stroke() |
|||
context.restore() |
|||
}); |
|||
context.draw() |
|||
}, |
|||
drawImage: function() { |
|||
// #ifdef APP-PLUS |
|||
context.drawImage('../../../static/app-plus/uni@2x.png', 0, 0) |
|||
// #endif |
|||
// #ifndef APP-PLUS |
|||
context.drawImage('../../../static/uni.png', 0, 0) |
|||
// #endif |
|||
context.draw() |
|||
}, |
|||
fillText: function() { |
|||
context.setStrokeStyle('#ff0000') |
|||
|
|||
context.beginPath() |
|||
context.moveTo(0, 10) |
|||
context.lineTo(300, 10) |
|||
context.stroke() |
|||
// context.save() |
|||
// context.scale(1.5, 1.5) |
|||
// context.translate(20, 20) |
|||
context.setFontSize(10) |
|||
context.fillText('Hello World', 0, 30) |
|||
context.setFontSize(20) |
|||
context.fillText('Hello World', 100, 30) |
|||
|
|||
// context.restore() |
|||
|
|||
context.beginPath() |
|||
context.moveTo(0, 30) |
|||
context.lineTo(300, 30) |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
fill: function() { |
|||
context.beginPath() |
|||
context.rect(20, 20, 150, 100) |
|||
context.setStrokeStyle('#00ff00') |
|||
context.fill() |
|||
context.draw() |
|||
}, |
|||
stroke: function() { |
|||
context.beginPath() |
|||
context.moveTo(20, 20) |
|||
context.lineTo(20, 100) |
|||
context.lineTo(70, 100) |
|||
context.setStrokeStyle('#00ff00') |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
clearRect: function() { |
|||
context.setFillStyle('#ff0000') |
|||
context.beginPath() |
|||
context.rect(0, 0, 300, 150) |
|||
context.fill() |
|||
context.clearRect(20, 20, 100, 50) |
|||
context.draw() |
|||
}, |
|||
beginPath: function() { |
|||
context.beginPath() |
|||
context.setLineWidth(5) |
|||
context.setStrokeStyle('#ff0000') |
|||
context.moveTo(0, 75) |
|||
context.lineTo(250, 75) |
|||
context.stroke() |
|||
context.beginPath() |
|||
context.setStrokeStyle('#0000ff') |
|||
context.moveTo(50, 0) |
|||
context.lineTo(150, 130) |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
closePath: function() { |
|||
context.beginPath() |
|||
context.setLineWidth(1) |
|||
context.moveTo(20, 20) |
|||
context.lineTo(20, 100) |
|||
context.lineTo(70, 100) |
|||
context.closePath() |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
moveTo: function() { |
|||
context.beginPath() |
|||
context.moveTo(0, 0) |
|||
context.lineTo(300, 150) |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
lineTo: function() { |
|||
context.beginPath() |
|||
context.moveTo(20, 20) |
|||
context.lineTo(20, 100) |
|||
context.lineTo(70, 100) |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
rect: function() { |
|||
context.beginPath() |
|||
context.rect(20, 20, 150, 100) |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
arc: function() { |
|||
context.beginPath() |
|||
context.setLineWidth(2) |
|||
context.arc(75, 75, 50, 0, Math.PI * 2, true) |
|||
context.moveTo(110, 75) |
|||
context.arc(75, 75, 35, 0, Math.PI, false) |
|||
context.moveTo(65, 65) |
|||
context.arc(60, 65, 5, 0, Math.PI * 2, true) |
|||
context.moveTo(95, 65) |
|||
context.arc(90, 65, 5, 0, Math.PI * 2, true) |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
quadraticCurveTo: function() { |
|||
context.beginPath() |
|||
context.moveTo(20, 20) |
|||
context.quadraticCurveTo(20, 100, 200, 20) |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
bezierCurveTo: function() { |
|||
context.beginPath() |
|||
context.moveTo(20, 20) |
|||
context.bezierCurveTo(20, 100, 200, 100, 200, 20) |
|||
context.stroke() |
|||
context.draw() |
|||
}, |
|||
setFillStyle: function() { |
|||
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function(item, index) { |
|||
context.setFillStyle(item) |
|||
context.beginPath() |
|||
context.rect(0 + 75 * index, 0, 50, 50) |
|||
context.fill() |
|||
}) |
|||
context.draw() |
|||
}, |
|||
setStrokeStyle: function() { |
|||
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function(item, index) { |
|||
context.setStrokeStyle(item) |
|||
context.beginPath() |
|||
context.rect(0 + 75 * index, 0, 50, 50) |
|||
context.stroke() |
|||
}) |
|||
context.draw() |
|||
}, |
|||
setGlobalAlpha: function() { |
|||
context.setFillStyle('#000000'); |
|||
[1, 0.5, 0.1].forEach(function(item, index) { |
|||
context.setGlobalAlpha(item) |
|||
context.beginPath() |
|||
context.rect(0 + 75 * index, 0, 50, 50) |
|||
context.fill() |
|||
}) |
|||
context.draw() |
|||
context.setGlobalAlpha(1) |
|||
}, |
|||
setShadow: function() { |
|||
context.beginPath() |
|||
context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)') |
|||
context.rect(10, 10, 100, 100) |
|||
context.fill() |
|||
context.draw() |
|||
}, |
|||
setFontSize: function() { |
|||
[10, 20, 30, 40].forEach(function(item, index) { |
|||
context.setFontSize(item) |
|||
context.fillText('Hello, world', 20, 20 + 40 * index) |
|||
}) |
|||
context.draw() |
|||
}, |
|||
setLineCap: function() { |
|||
context.setLineWidth(10); |
|||
['butt', 'round', 'square'].forEach(function(item, index) { |
|||
context.beginPath() |
|||
context.setLineCap(item) |
|||
context.moveTo(20, 20 + 20 * index) |
|||
context.lineTo(100, 20 + 20 * index) |
|||
context.stroke() |
|||
}) |
|||
context.draw() |
|||
}, |
|||
setLineJoin: function() { |
|||
context.setLineWidth(10); |
|||
['bevel', 'round', 'miter'].forEach(function(item, index) { |
|||
context.beginPath() |
|||
context.setLineJoin(item) |
|||
context.moveTo(20 + 80 * index, 20) |
|||
context.lineTo(100 + 80 * index, 50) |
|||
context.lineTo(20 + 80 * index, 100) |
|||
context.stroke() |
|||
}) |
|||
context.draw() |
|||
}, |
|||
setLineWidth: function() { |
|||
[2, 4, 6, 8, 10].forEach(function(item, index) { |
|||
context.beginPath() |
|||
context.setLineWidth(item) |
|||
context.moveTo(20, 20 + 20 * index) |
|||
context.lineTo(100, 20 + 20 * index) |
|||
context.stroke() |
|||
}) |
|||
context.draw() |
|||
}, |
|||
setMiterLimit: function() { |
|||
context.setLineWidth(4); |
|||
[2, 4, 6, 8, 10].forEach(function(item, index) { |
|||
context.beginPath() |
|||
context.setMiterLimit(item) |
|||
context.moveTo(20 + 80 * index, 20) |
|||
context.lineTo(100 + 80 * index, 50) |
|||
context.lineTo(20 + 80 * index, 100) |
|||
context.stroke() |
|||
}) |
|||
context.draw() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.canvas-element-wrapper { |
|||
display: block; |
|||
margin-bottom: 100rpx; |
|||
} |
|||
|
|||
.canvas-element { |
|||
width: 100%; |
|||
height: 500rpx; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.canvas-buttons { |
|||
padding: 30rpx 50rpx 10rpx; |
|||
width: 100%; |
|||
height: 360rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.canvas-button { |
|||
float: left; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 40px; |
|||
line-height: 1; |
|||
width: 300rpx; |
|||
margin: 15rpx 12rpx; |
|||
} |
|||
</style> |
|||
@ -1,62 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view style="background:#FFFFFF; padding:40rpx;"> |
|||
<view class="uni-hello-text uni-center">当前位置信息</view> |
|||
<block v-if="hasLocation === false"> |
|||
<view class="uni-h2 uni-center uni-common-mt">未选择位置</view> |
|||
</block> |
|||
<block v-if="hasLocation === true"> |
|||
<view class="uni-hello-text uni-center" style="margin-top:10px;"> |
|||
{{locationAddress}} |
|||
</view> |
|||
<view class="uni-h2 uni-center uni-common-mt"> |
|||
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text> |
|||
<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" @tap="chooseLocation">选择位置</button> |
|||
<button @tap="clear">清空</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import * as util from '../../../common/util.js' |
|||
var formatLocation = util.formatLocation; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'chooseLocation', |
|||
hasLocation: false, |
|||
location: {}, |
|||
locationAddress: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
chooseLocation: function () { |
|||
uni.chooseLocation({ |
|||
success: (res) => { |
|||
this.hasLocation = true, |
|||
this.location = formatLocation(res.longitude, res.latitude), |
|||
this.locationAddress = res.address |
|||
} |
|||
}) |
|||
}, |
|||
clear: function () { |
|||
this.hasLocation = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.page-body-info { |
|||
padding-bottom: 0; |
|||
height: 440rpx; |
|||
} |
|||
</style> |
|||
@ -1,91 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-title">请输入剪贴板内容</view> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<input class="uni-input" type="text" placeholder="请输入剪贴板内容" :value="data" @input="dataChange"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" @click="setClipboard">存储数据</button> |
|||
<button @tap="getClipboard">读取数据</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'get/setClipboardData', |
|||
data: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
dataChange: function (e) { |
|||
this.data = e.detail.value |
|||
}, |
|||
getClipboard: function () { |
|||
uni.getClipboardData({ |
|||
success: (res) => { |
|||
console.log(res.data); |
|||
const content = res.data ? '剪贴板内容为:' + res.data : '剪贴板暂无内容'; |
|||
uni.showModal({ |
|||
content, |
|||
title: '读取剪贴板', |
|||
showCancel: false |
|||
}) |
|||
}, |
|||
fail: () => { |
|||
uni.showModal({ |
|||
content: '读取剪贴板失败!', |
|||
showCancel: false |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
setClipboard: function () { |
|||
var data = this.data; |
|||
if (data.length === 0) { |
|||
uni.showModal({ |
|||
title: '设置剪贴板失败', |
|||
content: '内容不能为空', |
|||
showCancel: false |
|||
}) |
|||
} else { |
|||
uni.setClipboardData({ |
|||
data: data, |
|||
success: () => { |
|||
// 成功处理 |
|||
// #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO |
|||
uni.showToast({ |
|||
title: '设置剪贴板成功', |
|||
icon: "success", |
|||
mask: !1 |
|||
}) |
|||
// #endif |
|||
}, |
|||
fail: () => { |
|||
// 失败处理 |
|||
// #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO |
|||
uni.showToast({ |
|||
title: '储存数据失败!', |
|||
icon: "none", |
|||
mask: !1 |
|||
}) |
|||
// #endif |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
|
|||
|
|||
@ -1,63 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view v-if="imageSrc" class="image-container"> |
|||
<image class="img" :src="imageSrc" mode="center" /> |
|||
</view> |
|||
<block v-else style="margin-top: 50px;"> |
|||
<view class="uni-hello-text"> |
|||
点击按钮下载服务端示例图片（下载网络文件到本地临时目录） |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" @tap="downloadImage">下载</button> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'downloadFile', |
|||
imageSrc: '' |
|||
} |
|||
}, |
|||
onUnload() { |
|||
this.imageSrc = ''; |
|||
}, |
|||
methods: { |
|||
downloadImage: function () { |
|||
uni.showLoading({ |
|||
title:'下载中' |
|||
}) |
|||
var self = this |
|||
uni.downloadFile({ |
|||
url: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png", |
|||
success: (res) => { |
|||
console.log('downloadFile success, res is', res) |
|||
self.imageSrc = res.tempFilePath; |
|||
uni.hideLoading(); |
|||
}, |
|||
fail: (err) => { |
|||
console.log('downloadFile fail, err is:', err) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.img { |
|||
width: 500rpx; |
|||
height: 500rpx; |
|||
margin: 0 auto; |
|||
} |
|||
.image-container { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -1,129 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<block v-if="tempFilePath"> |
|||
<image :src="tempFilePath" class="image" mode="aspectFit"></image> |
|||
</block> |
|||
<block v-if="!tempFilePath && savedFilePath"> |
|||
<image :src="savedFilePath" class="image" mode="aspectFit"></image> |
|||
</block> |
|||
<block v-if="!tempFilePath && !savedFilePath"> |
|||
<view class="uni-hello-addfile" @click="chooseImage">+ 请选择文件</view> |
|||
</block> |
|||
<view class="uni-btn-v"> |
|||
<button class="btn-savefile" @click="saveFile">保存文件</button> |
|||
<button @click="clear">删除文件</button> |
|||
</view> |
|||
<!-- #ifndef MP-ALIPAY || MP-TOUTIAO --> |
|||
<view class="btn-area"> |
|||
<button @click="openDocument">打开pdf文件</button> |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'saveFile', |
|||
tempFilePath: '', |
|||
savedFilePath: '' |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.savedFilePath = uni.getStorageSync('savedFilePath'); |
|||
}, |
|||
methods: { |
|||
chooseImage() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
success: (res) => { |
|||
this.tempFilePath = res.tempFilePaths[0]; |
|||
}, |
|||
fail: (err) => { |
|||
// #ifdef MP |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
let authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera']; |
|||
if (!authStatus) { |
|||
uni.showModal({ |
|||
title: '授权失败', |
|||
content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
uni.openSetting() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
// #endif |
|||
} |
|||
}); |
|||
}, |
|||
saveFile() { |
|||
if (this.tempFilePath.length > 0) { |
|||
uni.saveFile({ |
|||
tempFilePath: this.tempFilePath, |
|||
success: (res) => { |
|||
this.savedFilePath = res.savedFilePath; |
|||
uni.setStorageSync('savedFilePath', res.savedFilePath); |
|||
uni.showModal({ |
|||
title: '保存成功', |
|||
content: '下次进入页面时，此文件仍可用', |
|||
showCancel: false |
|||
}); |
|||
}, |
|||
fail: (res) => { |
|||
uni.showModal({ |
|||
title: '保存失败', |
|||
content: '失败原因: ' + JSON.stringify(res), |
|||
showCancel: false |
|||
}); |
|||
} |
|||
}) |
|||
} else { |
|||
uni.showModal({ |
|||
content: '请选择文件', |
|||
showCancel: false |
|||
}); |
|||
} |
|||
}, |
|||
clear() { |
|||
uni.setStorageSync('savedFilePath', ''); |
|||
this.tempFilePath = ''; |
|||
this.savedFilePath = ''; |
|||
}, |
|||
// #ifndef MP-ALIPAY || MP-TOUTIAO |
|||
openDocument() { |
|||
uni.downloadFile({ |
|||
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b3f1d0b0-5168-11eb-bd01-97bc1429a9ff.pdf', |
|||
success: (res) => { |
|||
uni.openDocument({ |
|||
filePath: res.tempFilePath, |
|||
success: () => { |
|||
console.log('打开文档成功'); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.image { |
|||
width: 100%; |
|||
height: 360rpx; |
|||
} |
|||
|
|||
.btn-savefile { |
|||
background-color: #007aff; |
|||
color: #ffffff; |
|||
} |
|||
</style> |
|||
@ -1,84 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<button :loading="loading" :disabled="loading" type="primary" class="btn" @click="showAd">显示广告</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '全屏视频广告', |
|||
loading: false, |
|||
loadError: false |
|||
} |
|||
}, |
|||
onReady() { |
|||
// #ifdef APP-PLUS |
|||
this.adOption = { |
|||
adpid: '1507000611' |
|||
}; |
|||
// #endif |
|||
this.createAd(); |
|||
}, |
|||
methods: { |
|||
createAd() { |
|||
var _ad = this._ad = uni.createFullScreenVideoAd(this.adOption); |
|||
_ad.onLoad(() => { |
|||
this.loading = false; |
|||
this.loadError = false; |
|||
_ad.show(); |
|||
console.log('onLoad event') |
|||
}); |
|||
_ad.onClose((res) => { |
|||
// 用户点击了【关闭广告】按钮 |
|||
if (res && res.isEnded) { |
|||
// 正常播放结束 |
|||
console.log("onClose " + res.isEnded); |
|||
} else { |
|||
// 播放中途退出 |
|||
console.log("onClose " + res.isEnded); |
|||
} |
|||
|
|||
setTimeout(() => { |
|||
uni.showToast({ |
|||
title: "全屏视频" + (res.isEnded ? "成功" : "未") + "播放完毕", |
|||
duration: 10000, |
|||
position: 'bottom' |
|||
}) |
|||
}, 500) |
|||
}); |
|||
_ad.onError((err) => { |
|||
this.loading = false; |
|||
if (err.code) { |
|||
this.loadError = true; |
|||
} |
|||
console.log('onError event', err) |
|||
uni.showToast({ |
|||
title: err.errMsg, |
|||
position: 'bottom' |
|||
}) |
|||
}); |
|||
}, |
|||
showAd() { |
|||
this.loading = true; |
|||
this._ad.load(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.btn { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.ad-tips { |
|||
color: #999; |
|||
padding: 30px 0; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -1,186 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view style="background:#FFFFFF; padding:40rpx;"> |
|||
<view class="uni-hello-text uni-center">当前位置经纬度</view> |
|||
<block v-if="hasLocation === false"> |
|||
<view class="uni-h2 uni-center uni-common-mt">未获取</view> |
|||
</block> |
|||
<block v-if="hasLocation === true"> |
|||
<view class="uni-h2 uni-center uni-common-mt"> |
|||
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text> |
|||
<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" @tap="getLocation">获取位置</button> |
|||
<button @tap="clear">清空</button> |
|||
</view> |
|||
</view> |
|||
<uni-popup :show="type === 'showpopup'" mode="fixed" @hidePopup="togglePopup('')"> |
|||
<view class="popup-view"> |
|||
<text class="popup-title">需要用户授权位置权限</text> |
|||
<view class="uni-flex popup-buttons"> |
|||
<button class="uni-flex-item" type="primary" open-type="openSetting" @tap="openSetting">设置</button> |
|||
<button class="uni-flex-item" @tap="togglePopup('')">取消</button> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import * as util from '../../../common/util.js' |
|||
var formatLocation = util.formatLocation; |
|||
// #ifdef APP-PLUS |
|||
import permision from "@/common/permission.js" |
|||
// #endif |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'getLocation', |
|||
hasLocation: false, |
|||
location: {}, |
|||
type: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
togglePopup(type) { |
|||
this.type = type; |
|||
}, |
|||
showConfirm() { |
|||
this.type = 'showpopup'; |
|||
}, |
|||
hideConfirm() { |
|||
this.type = ''; |
|||
}, |
|||
async getLocation() { |
|||
// #ifdef APP-PLUS |
|||
let status = await this.checkPermission(); |
|||
if (status !== 1) { |
|||
return; |
|||
} |
|||
// #endif |
|||
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ |
|||
let status = await this.getSetting(); |
|||
if (status === 2) { |
|||
this.showConfirm(); |
|||
return; |
|||
} |
|||
// #endif |
|||
|
|||
this.doGetLocation(); |
|||
}, |
|||
doGetLocation() { |
|||
uni.getLocation({ |
|||
success: (res) => { |
|||
this.hasLocation = true; |
|||
this.location = formatLocation(res.longitude, res.latitude); |
|||
}, |
|||
fail: (err) => { |
|||
// #ifdef MP-BAIDU |
|||
if (err.errCode === 202 || err.errCode === 10003) { // 202模拟器 10003真机 user deny |
|||
this.showConfirm(); |
|||
} |
|||
// #endif |
|||
// #ifndef MP-BAIDU |
|||
if (err.errMsg.indexOf("auth deny") >= 0) { |
|||
uni.showToast({ |
|||
title: "访问位置被拒绝" |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: err.errMsg |
|||
}) |
|||
} |
|||
// #endif |
|||
} |
|||
}) |
|||
}, |
|||
getSetting: function() { |
|||
return new Promise((resolve, reject) => { |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
if (res.authSetting['scope.userLocation'] === undefined) { |
|||
resolve(0); |
|||
return; |
|||
} |
|||
if (res.authSetting['scope.userLocation']) { |
|||
resolve(1); |
|||
} else { |
|||
resolve(2); |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
openSetting: function() { |
|||
this.hideConfirm(); |
|||
uni.openSetting({ |
|||
success: (res) => { |
|||
if (res.authSetting && res.authSetting['scope.userLocation']) { |
|||
this.doGetLocation(); |
|||
} |
|||
}, |
|||
fail: (err) => {} |
|||
}) |
|||
}, |
|||
async checkPermission() { |
|||
let status = permision.isIOS ? await permision.requestIOS('location') : |
|||
await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION'); |
|||
|
|||
if (status === null || status === 1) { |
|||
status = 1; |
|||
} else if (status === 2) { |
|||
uni.showModal({ |
|||
content: "系统定位已关闭", |
|||
confirmText: "确定", |
|||
showCancel: false, |
|||
success: function(res) { |
|||
} |
|||
}) |
|||
} else if (status.code) { |
|||
uni.showModal({ |
|||
content: status.message |
|||
}) |
|||
} else { |
|||
uni.showModal({ |
|||
content: "需要定位权限", |
|||
confirmText: "设置", |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
permision.gotoAppSetting(); |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
return status; |
|||
}, |
|||
clear: function() { |
|||
this.hasLocation = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.popup-view { |
|||
width: 500rpx; |
|||
} |
|||
|
|||
.popup-title { |
|||
display: block; |
|||
font-size: 16px; |
|||
line-height: 3; |
|||
margin-bottom: 10px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.popup-buttons button { |
|||
margin-left: 4px; |
|||
margin-right: 4px; |
|||
} |
|||
</style> |
|||
@ -1,86 +0,0 @@ |
|||
<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-hello-text uni-center">网络状态</view> |
|||
<block v-if="hasNetworkType === false"> |
|||
<view class="uni-h2 uni-center uni-common-mt">未获取</view> |
|||
<view class="uni-hello-text uni-center uni-common-mt">请点击下面按钮获取网络状态</view> |
|||
</block> |
|||
<block v-if="hasNetworkType === true"> |
|||
<view class="uni-h2 uni-center uni-common-mt">{{networkType}}</view> |
|||
</block> |
|||
<view v-if="hasNetworkType === true && networkType === 'wifi'" class="uni-textarea uni-common-mt"> |
|||
<textarea :value="connectedWifi"></textarea> |
|||
</view> |
|||
</view> |
|||
<view class="uni-btn-v uni-common-mt"> |
|||
<button type="primary" @tap="getNetworkType">获取设备网络状态</button> |
|||
<!-- #ifdef MP-WEIXIN || MP-JD--> |
|||
<button v-if="hasNetworkType === true && networkType === 'wifi'" class="uni-common-mt" type="primary" @tap="getConnectedWifi">获取 wifi 信息</button> |
|||
<!-- #endif --> |
|||
<button class="uni-common-mt" @tap="clear">清空</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'getNetworkType', |
|||
hasNetworkType: false, |
|||
networkType: '', |
|||
connectedWifi: '' |
|||
} |
|||
}, |
|||
onUnload:function(){ |
|||
this.networkType = '',this.hasNetworkType = false; |
|||
}, |
|||
methods: { |
|||
getNetworkType: function () { |
|||
uni.getNetworkType({ |
|||
success: (res) => { |
|||
console.log(res) |
|||
this.hasNetworkType = true, this.networkType = res.subtype || res.networkType |
|||
}, |
|||
fail: () => { |
|||
uni.showModal({ |
|||
content:'获取失败！', |
|||
showCancel:false |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
clear: function () { |
|||
this.hasNetworkType = false, |
|||
this.networkType = '', |
|||
this.connectedWifi = '' |
|||
}, |
|||
// #ifdef MP-WEIXIN || MP-JD |
|||
getConnectedWifi() { |
|||
const that = this |
|||
uni.startWifi({ |
|||
success: function() { |
|||
uni.getConnectedWifi({ |
|||
success: function(res) { |
|||
const { wifi } = res |
|||
that.connectedWifi = JSON.stringify(wifi) |
|||
}, |
|||
fail: function(res) { |
|||
} |
|||
}) |
|||
}, |
|||
fail: function(res) { |
|||
} |
|||
}) |
|||
} |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,117 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="movable block"> |
|||
<!-- #ifndef MP-TOUTIAO --> |
|||
<movable-area> |
|||
<movable-view class="target" direction="all" @change="getNodeInfo">Drag</movable-view> |
|||
</movable-area> |
|||
<!-- #endif --> |
|||
<!-- #ifdef MP-TOUTIAO --> |
|||
<view class="target" @click="setPosition" :style="{top:top,left:left}">Click</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
<view class="movable"> |
|||
<view class="info"> |
|||
<view v-for="(item,index) in info" :key="index"> |
|||
<text class="b">{{item.key}}</text> |
|||
<text class="span">{{item.val}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'createSelectorQuery', |
|||
top: 0, |
|||
left: '0px', |
|||
info: [] |
|||
} |
|||
}, |
|||
onReady() { |
|||
this.getNodeInfo() |
|||
}, |
|||
methods: { |
|||
setPosition() { |
|||
this.left = Math.random() * uni.upx2px(320) + 'px' |
|||
this.top = Math.random() * uni.upx2px(320) + 'px' |
|||
this.getNodeInfo() |
|||
}, |
|||
getNodeInfo() { |
|||
uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => { |
|||
const rect = ret[0] |
|||
if (rect) { |
|||
const sort = ['left','right','top','bottom','width','height'] |
|||
const info = [] |
|||
for (let i in sort) { |
|||
let key = sort[i] |
|||
info.push({ |
|||
'key': key, |
|||
'val': rect[key] |
|||
}) |
|||
} |
|||
this.info = info |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.movable { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.block { |
|||
height: 400rpx; |
|||
width: 400rpx; |
|||
background-color: #FFFFFF; |
|||
border: 1px solid #ccc; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
movable-area { |
|||
height: 400rpx; |
|||
width: 400rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.target { |
|||
height: 80rpx; |
|||
width: 80rpx; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
color: #FFFFFF; |
|||
background-color: #4cd964; |
|||
font-size: 28rpx; |
|||
position: absolute; |
|||
} |
|||
|
|||
.info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.b { |
|||
font-weight: bold; |
|||
width: 150rpx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.span { |
|||
width: 100rpx; |
|||
display: inline-block; |
|||
} |
|||
</style> |
|||
@ -1,148 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-common-mt"> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">设备型号</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.model"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">客户端平台</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.platform"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">操作系统版本</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.system"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">语言</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.language"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">版本</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.version"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">屏幕宽度</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.screenWidth"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">屏幕高度</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.screenHeight"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">可使用窗口高度</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowHeight"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">可使用窗口的顶部位置</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowTop"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">可使用窗口的底部位置</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowBottom"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">状态栏的高度</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.statusBarHeight"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">DPI</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.pixelRatio"/> |
|||
</view> |
|||
</view> |
|||
<!-- #ifdef MP --> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-pd"> |
|||
<view class="uni-label" style="width:180px;">基础库版本</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.SDKVersion"/> |
|||
</view> |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" @tap="getSystemInfo">获取设备系统信息</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'getSystemInfo', |
|||
systemInfo: {} |
|||
} |
|||
}, |
|||
onUnload:function(){ |
|||
this.systemInfo = {}; |
|||
}, |
|||
methods: { |
|||
getSystemInfo: function () { |
|||
uni.getSystemInfo({ |
|||
success: (res) => { |
|||
this.systemInfo = res |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-pd { |
|||
padding-left: 30rpx; |
|||
} |
|||
</style> |
|||
@ -1,165 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view style="background:#FFF; padding:40rpx;"> |
|||
<block v-if="hasUserInfo === false"> |
|||
<view class="uni-hello-text uni-center"> |
|||
<text>请点击下方按钮获取用户头像及昵称或手机号</text> |
|||
</view> |
|||
</block> |
|||
<block v-if="hasUserInfo === true"> |
|||
<view class="uni-h4 uni-center uni-common-mt">{{userInfo.nickName || userInfo.nickname || userInfo.gender || userInfo.email || userInfo.phoneNumber}}</view> |
|||
<view v-if="userInfo.avatarUrl || userInfo.avatar_url " style="padding:30rpx 0; text-align:center;"> |
|||
<image class="userinfo-avatar" :src="userInfo.avatarUrl||userInfo.avatar_url"></image> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<!-- #ifdef APP-PLUS || MP-ALIPAY || MP-TOUTIAO --> |
|||
<button type="primary" :loading="btnLoading" @click="getUserInfo">获取用户信息</button> |
|||
<!-- #endif --> |
|||
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-JD --> |
|||
<button type="primary" open-type="getUserInfo" @getuserinfo="mpGetUserInfo">获取用户信息</button> |
|||
<!-- #endif --> |
|||
<button @click="clear">清空</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import { |
|||
mapState, |
|||
mapMutations, |
|||
mapActions |
|||
} from 'vuex' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'getUserInfo', |
|||
hasUserInfo: false, |
|||
userInfo: {}, |
|||
btnLoading: false |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState([ |
|||
'loginProvider', |
|||
'isUniverifyLogin' |
|||
]) |
|||
}, |
|||
methods: { |
|||
...mapActions(['getPhoneNumber']), |
|||
// 获取用户信息 API 在小程序可直接使用，在 5+App 里面需要先登录才能调用 |
|||
getUserInfo() { |
|||
this.btnLoading = true; |
|||
if (this.isUniverifyLogin) { |
|||
// 一键登录 |
|||
this.getPhoneNumber(uni.getStorageSync('univerifyInfo')).then(phoneNumber => { |
|||
this.hasUserInfo = true; |
|||
this.userInfo = { |
|||
phoneNumber |
|||
}; |
|||
}).catch(err => { |
|||
console.error('getUserInfo fail:', err); |
|||
this.hasUserInfo = false; |
|||
}).finally(() => { |
|||
this.btnLoading = false; |
|||
}) |
|||
return; |
|||
} |
|||
|
|||
if(this.loginProvider === 'apple'){ |
|||
const nickname = uni.getStorageSync('apple_nickname') |
|||
if(nickname){ |
|||
this.hasUserInfo = true; |
|||
this.userInfo = { nickName:nickname } |
|||
this.btnLoading = false; |
|||
return; |
|||
} |
|||
} |
|||
|
|||
uni.getUserInfo({ |
|||
provider: this.loginProvider, |
|||
success: (result) => { |
|||
this.hasUserInfo = true; |
|||
this.userInfo = result.userInfo; |
|||
}, |
|||
fail: (error) => { |
|||
console.log('getUserInfo fail', error); |
|||
let content = error.errMsg; |
|||
if (~content.indexOf('uni.login')) { |
|||
content = '请在登录页面完成登录操作'; |
|||
} |
|||
// #ifndef APP-PLUS |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
let authStatus = res.authSetting['scope.userInfo']; |
|||
if (!authStatus) { |
|||
uni.showModal({ |
|||
title: '授权失败', |
|||
content: 'Hello uni-app需要获取您的用户信息，请在设置界面打开相关权限', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
uni.openSetting() |
|||
} |
|||
} |
|||
}) |
|||
} else { |
|||
uni.showModal({ |
|||
title: '获取用户信息失败', |
|||
content: '错误原因' + content, |
|||
showCancel: false |
|||
}); |
|||
} |
|||
} |
|||
}) |
|||
// #endif |
|||
// #ifdef APP-PLUS |
|||
uni.showModal({ |
|||
title: '获取用户信息失败', |
|||
content: '错误原因' + content, |
|||
showCancel: false |
|||
}); |
|||
// #endif |
|||
}, |
|||
complete: () => { |
|||
this.btnLoading = false; |
|||
} |
|||
}); |
|||
}, |
|||
mpGetUserInfo(result) { |
|||
console.log('mpGetUserInfo', result); |
|||
if (result.detail.errMsg !== 'getUserInfo:ok') { |
|||
uni.showModal({ |
|||
title: '获取用户信息失败', |
|||
content: '错误原因' + result.detail.errMsg, |
|||
showCancel: false |
|||
}); |
|||
return; |
|||
} |
|||
this.hasUserInfo = true; |
|||
if(result.detail && result.detail.userInfo){ |
|||
this.userInfo = result.detail.userInfo; |
|||
}else{ |
|||
// #ifdef MP-JD |
|||
this.userInfo = result.detail.user_info; |
|||
// #endif |
|||
} |
|||
}, |
|||
clear() { |
|||
this.hasUserInfo = false; |
|||
this.userInfo = {}; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.userinfo-avatar { |
|||
border-radius: 128rpx; |
|||
width: 128rpx; |
|||
height: 128rpx; |
|||
} |
|||
</style> |
|||
@ -1,300 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" :disabled="isOpen" @click="openBluetoothAdapter">打开蓝牙模块</button> |
|||
<button type="primary" :disabled="!isOpen" @click="closeBluetoothAdapter">关闭蓝牙模块</button> |
|||
<button type="primary" :disabled="!isOpen || isStarted" :loading="isStarted" @click="startBeaconDiscovery">开始搜索附近的iBeacon设备</button> |
|||
<button type="primary" :disabled="!isStarted" @click="stopBeaconDiscovery">停止搜索附近的iBeacon设备</button> |
|||
</view> |
|||
</view> |
|||
<scroll-view class="uni-scroll_box"> |
|||
<view class="uni-title" v-if="isStarted || deviceList.length > 0">已经发现 {{ deviceList.length }} 台设备:</view> |
|||
<view class="uni-list-box" v-for="(item, index) in deviceList" :key="item.uuid"> |
|||
<view> |
|||
<view class="uni-list_name">UUID: {{ item.uuid }}</view> |
|||
<view class="uni-list_item">major: {{ item.major }}</view> |
|||
<view class="uni-list_item">minor: {{ item.minor }}</view> |
|||
<view class="uni-list_item">rssi: {{ item.rssi }} dBm</view> |
|||
<view class="uni-list_item">accuracy: {{ item.accuracy }}</view> |
|||
<view class="uni-list_item">heading: {{ item.heading }}</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
const DEVICE_UUID_WEICHAT = 'FDA50693-A4E2-4FB1-AFCF-C6EB07647825'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'iBeacon', |
|||
isOpen: false, |
|||
isStarted: false, |
|||
deviceList: [], |
|||
isPageOpened: false |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.onBeaconUpdate(); |
|||
}, |
|||
onShow() { |
|||
this.isPageOpened = true; |
|||
}, |
|||
methods: { |
|||
maskclose() { |
|||
this.maskShow = false; |
|||
}, |
|||
openBluetoothAdapter() { |
|||
uni.openBluetoothAdapter({ |
|||
success: (res) => { |
|||
console.log('初始化蓝牙成功:' + res.errMsg); |
|||
console.log(res); |
|||
this.isOpen = true; |
|||
this.deviceList = []; |
|||
}, |
|||
fail: (err) => { |
|||
console.log('初始化蓝牙失败，错误码：' + (err.errCode || err.errMsg)); |
|||
if (err.errCode !== 0) { |
|||
initTypes(err.errCode, err.errMsg); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
closeBluetoothAdapter(OBJECT) { |
|||
this.stopBeaconDiscovery(); |
|||
wx.closeBluetoothAdapter({ |
|||
success: (res) => { |
|||
this.isOpen = false; |
|||
console.log('断开蓝牙模块成功'); |
|||
} |
|||
}); |
|||
}, |
|||
onBeaconUpdate() { |
|||
uni.onBeaconUpdate(res => { |
|||
if (!this.isPageOpened || !this.isOpen || !this.isStarted) { |
|||
return; |
|||
} |
|||
console.log(res); |
|||
// if (res.code !== 0) { |
|||
// return; |
|||
// } |
|||
if (res.beacons && res.beacons.length > 0) { |
|||
this.getBeacons(); |
|||
} else if (!res.connected) { |
|||
this.deviceList = []; |
|||
} |
|||
}); |
|||
}, |
|||
startBeaconDiscovery() { |
|||
uni.startBeaconDiscovery({ |
|||
uuids: this.getUUIDList(), |
|||
success: (res) => { |
|||
this.isStarted = true; |
|||
console.log(res); |
|||
}, |
|||
fail: (err) => { |
|||
console.error(err); |
|||
} |
|||
}); |
|||
}, |
|||
stopBeaconDiscovery(types) { |
|||
if(this.isStarted) { |
|||
uni.stopBeaconDiscovery({ |
|||
success: (res) => { |
|||
this.isStarted = false; |
|||
}, |
|||
fail: (err) => { |
|||
console.error(err); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
getBeacons() { |
|||
uni.getBeacons({ |
|||
success: (res) => { |
|||
if (res.beacons && res.beacons.length > 0) { |
|||
console.log(res.beacons); |
|||
this.deviceList = res.beacons; |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
console.log('获取设备服务失败，错误码：' + err.errCode); |
|||
if (errCode.errCode !== 0) { |
|||
initTypes(errCode.errCode); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
getUUIDList() { |
|||
// #ifdef APP-PLUS |
|||
const sysInfo = uni.getSystemInfoSync(); |
|||
if (!sysInfo) { |
|||
return []; |
|||
} |
|||
let isIOS = sysInfo.platform ? (sysInfo.platform.toLowerCase() === "ios") : false; |
|||
if (isIOS) { |
|||
return [DEVICE_UUID_WEICHAT]; |
|||
} |
|||
return []; |
|||
// #endif |
|||
|
|||
// #ifndef APP-PLUS |
|||
return [DEVICE_UUID_WEICHAT]; |
|||
// #endif |
|||
} |
|||
}, |
|||
onUnload() { |
|||
this.isPageOpened = false; |
|||
} |
|||
}; |
|||
|
|||
/** |
|||
* 判断初始化蓝牙状态 |
|||
*/ |
|||
function initTypes(code, errMsg) { |
|||
switch (code) { |
|||
case 10000: |
|||
toast('未初始化蓝牙适配器'); |
|||
break; |
|||
case 10001: |
|||
toast('未检测到蓝牙，请打开蓝牙重试！'); |
|||
break; |
|||
case 10002: |
|||
toast('没有找到指定设备'); |
|||
break; |
|||
case 10003: |
|||
toast('连接失败'); |
|||
break; |
|||
case 10004: |
|||
toast('没有找到指定服务'); |
|||
break; |
|||
case 10005: |
|||
toast('没有找到指定特征值'); |
|||
break; |
|||
case 10006: |
|||
toast('当前连接已断开'); |
|||
break; |
|||
case 10007: |
|||
toast('当前特征值不支持此操作'); |
|||
break; |
|||
case 10008: |
|||
toast('其余所有系统上报的异常'); |
|||
break; |
|||
case 10009: |
|||
toast('Android 系统特有，系统版本低于 4.3 不支持 BLE'); |
|||
break; |
|||
default: |
|||
toast(errMsg); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 弹出框封装 |
|||
*/ |
|||
function toast(content, showCancel = false) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content, |
|||
showCancel |
|||
}); |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-title { |
|||
/* width: 100%; */ |
|||
/* height: 80rpx; */ |
|||
text-align: center; |
|||
} |
|||
|
|||
.uni-mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
padding: 0 30rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.uni-scroll_box { |
|||
height: 70%; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.uni-list-box { |
|||
margin: 0 20rpx; |
|||
padding: 15rpx 0; |
|||
border-bottom: 1px #f5f5f5 solid; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.uni-list:last-child { |
|||
border: none; |
|||
} |
|||
|
|||
.uni-list_name { |
|||
font-size: 30rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.uni-list_item { |
|||
font-size: 24rpx; |
|||
color: #555; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.uni-success_box { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
min-height: 100rpx; |
|||
width: 100%; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
border-top: 1px #eee solid; |
|||
} |
|||
|
|||
.uni-success_sub { |
|||
/* width: 100%%; */ |
|||
height: 100rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.uni-close_button { |
|||
padding: 0 20rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
background: #ce3c39; |
|||
color: #ffffff; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
.uni-success_content { |
|||
height: 600rpx; |
|||
margin: 30rpx; |
|||
margin-top: 0; |
|||
border: 1px #eee solid; |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.uni-content_list { |
|||
padding-bottom: 10rpx; |
|||
border-bottom: 1px #f5f5f5 solid; |
|||
} |
|||
|
|||
.uni-tips { |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
</style> |
|||
@ -1,239 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-common-mt"> |
|||
<form> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">图片来源</view> |
|||
</view> |
|||
<view class="uni-list-cell-right"> |
|||
<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector"> |
|||
<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">图片质量</view> |
|||
</view> |
|||
<view class="uni-list-cell-right"> |
|||
<picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector"> |
|||
<view class="uni-input">{{sizeType[sizeTypeIndex]}}</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">数量限制</view> |
|||
</view> |
|||
<view class="uni-list-cell-right"> |
|||
<picker :range="count" @change="countChange" mode="selector"> |
|||
<view class="uni-input">{{count[countIndex]}}</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="uni-list list-pd"> |
|||
<view class="uni-list-cell cell-pd"> |
|||
<view class="uni-uploader"> |
|||
<view class="uni-uploader-head"> |
|||
<view class="uni-uploader-title">点击可预览选好的图片</view> |
|||
<view class="uni-uploader-info">{{imageList.length}}/9</view> |
|||
</view> |
|||
<view class="uni-uploader-body"> |
|||
<view class="uni-uploader__files"> |
|||
<block v-for="(image,index) in imageList" :key="index"> |
|||
<view class="uni-uploader__file"> |
|||
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image> |
|||
</view> |
|||
</block> |
|||
<view class="uni-uploader__input-box"> |
|||
<view class="uni-uploader__input" @tap="chooseImage"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</form> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import permision from "@/common/permission.js" |
|||
var sourceType = [ |
|||
['camera'], |
|||
['album'], |
|||
['camera', 'album'] |
|||
] |
|||
var sizeType = [ |
|||
['compressed'], |
|||
['original'], |
|||
['compressed', 'original'] |
|||
] |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'choose/previewImage', |
|||
imageList: [], |
|||
sourceTypeIndex: 2, |
|||
sourceType: ['拍照', '相册', '拍照或相册'], |
|||
sizeTypeIndex: 2, |
|||
sizeType: ['压缩', '原图', '压缩或原图'], |
|||
countIndex: 8, |
|||
count: [1, 2, 3, 4, 5, 6, 7, 8, 9] |
|||
} |
|||
}, |
|||
onUnload() { |
|||
this.imageList = [], |
|||
this.sourceTypeIndex = 2, |
|||
this.sourceType = ['拍照', '相册', '拍照或相册'], |
|||
this.sizeTypeIndex = 2, |
|||
this.sizeType = ['压缩', '原图', '压缩或原图'], |
|||
this.countIndex = 8; |
|||
}, |
|||
methods: { |
|||
sourceTypeChange: function(e) { |
|||
this.sourceTypeIndex = parseInt(e.detail.value) |
|||
}, |
|||
sizeTypeChange: function(e) { |
|||
this.sizeTypeIndex = parseInt(e.detail.value) |
|||
}, |
|||
countChange: function(e) { |
|||
this.countIndex = e.detail.value; |
|||
}, |
|||
chooseImage: async function() { |
|||
// #ifdef APP-PLUS |
|||
// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理 |
|||
if (this.sourceTypeIndex !== 2) { |
|||
let status = await this.checkPermission(); |
|||
if (status !== 1) { |
|||
return; |
|||
} |
|||
} |
|||
// #endif |
|||
|
|||
if (this.imageList.length === 9) { |
|||
let isContinue = await this.isFullImg(); |
|||
console.log("是否继续?", isContinue); |
|||
if (!isContinue) { |
|||
return; |
|||
} |
|||
} |
|||
uni.chooseImage({ |
|||
sourceType: sourceType[this.sourceTypeIndex], |
|||
sizeType: sizeType[this.sizeTypeIndex], |
|||
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex], |
|||
success: (res) => { |
|||
this.imageList = this.imageList.concat(res.tempFilePaths); |
|||
}, |
|||
fail: (err) => { |
|||
console.log("err: ",err); |
|||
// #ifdef APP-PLUS |
|||
if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) { |
|||
this.checkPermission(err.code); |
|||
} |
|||
// #endif |
|||
// #ifdef MP |
|||
if(err.errMsg.indexOf('cancel') !== '-1'){ |
|||
return; |
|||
} |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
let authStatus = false; |
|||
switch (this.sourceTypeIndex) { |
|||
case 0: |
|||
authStatus = res.authSetting['scope.camera']; |
|||
break; |
|||
case 1: |
|||
authStatus = res.authSetting['scope.album']; |
|||
break; |
|||
case 2: |
|||
authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera']; |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
if (!authStatus) { |
|||
uni.showModal({ |
|||
title: '授权失败', |
|||
content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
uni.openSetting() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
// #endif |
|||
} |
|||
}) |
|||
}, |
|||
isFullImg: function() { |
|||
return new Promise((res) => { |
|||
uni.showModal({ |
|||
content: "已经有9张图片了,是否清空现有图片？", |
|||
success: (e) => { |
|||
if (e.confirm) { |
|||
this.imageList = []; |
|||
res(true); |
|||
} else { |
|||
res(false) |
|||
} |
|||
}, |
|||
fail: () => { |
|||
res(false) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
previewImage: function(e) { |
|||
var current = e.target.dataset.src |
|||
uni.previewImage({ |
|||
current: current, |
|||
urls: this.imageList |
|||
}) |
|||
}, |
|||
async checkPermission(code) { |
|||
let type = code ? code - 1 : this.sourceTypeIndex; |
|||
let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) : |
|||
await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' : |
|||
'android.permission.READ_EXTERNAL_STORAGE'); |
|||
|
|||
if (status === null || status === 1) { |
|||
status = 1; |
|||
} else { |
|||
uni.showModal({ |
|||
content: "没有开启权限", |
|||
confirmText: "设置", |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
permision.gotoAppSetting(); |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
return status; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.cell-pd { |
|||
padding: 22rpx 30rpx; |
|||
} |
|||
|
|||
.list-pd { |
|||
margin-top: 50rpx; |
|||
} |
|||
</style> |
|||
@ -1,124 +0,0 @@ |
|||
<template> |
|||
<view class="uni-padding-wrap"> |
|||
<page-head title="audio"></page-head> |
|||
<view class="uni-common-mt"> |
|||
<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider> |
|||
</view> |
|||
<!-- <view class="uni-common-mt play-time-area"> |
|||
<text class="current-time">{{currentTime}}</text> |
|||
<text class="duration">{{duration}}</text> |
|||
</view> --> |
|||
<view class="play-button-area"> |
|||
<image class="icon-play" :src="playImage" @click="play"></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
const audioUrl = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3' |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: "innerAudioContext", |
|||
isPlaying: false, |
|||
isPlayEnd: false, |
|||
currentTime: 0, |
|||
duration: 100 |
|||
} |
|||
}, |
|||
computed: { |
|||
position() { |
|||
return this.isPlayEnd ? 0 : this.currentTime; |
|||
}, |
|||
playImage() { |
|||
return this.isPlaying ? "/static/pause.png" : "/static/play.png" |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this._isChanging = false; |
|||
this._audioContext = null; |
|||
this.createAudio(); |
|||
}, |
|||
onUnload() { |
|||
if (this._audioContext != null && this.isPlaying) { |
|||
this.stop(); |
|||
} |
|||
}, |
|||
methods: { |
|||
createAudio() { |
|||
var innerAudioContext = this._audioContext = uni.createInnerAudioContext(); |
|||
innerAudioContext.autoplay = false; |
|||
innerAudioContext.src = audioUrl; |
|||
innerAudioContext.onPlay(() => { |
|||
console.log('开始播放'); |
|||
}); |
|||
innerAudioContext.onTimeUpdate((e) => { |
|||
if (this._isChanging === true) { |
|||
return; |
|||
} |
|||
this.currentTime = innerAudioContext.currentTime || 0; |
|||
this.duration = innerAudioContext.duration || 0; |
|||
}); |
|||
innerAudioContext.onEnded(() => { |
|||
this.currentTime = 0; |
|||
this.isPlaying = false; |
|||
this.isPlayEnd = true; |
|||
}); |
|||
innerAudioContext.onError((res) => { |
|||
this.isPlaying = false; |
|||
console.log(res.errMsg); |
|||
console.log(res.errCode); |
|||
}); |
|||
return innerAudioContext; |
|||
}, |
|||
onchanging() { |
|||
this._isChanging = true; |
|||
}, |
|||
onchange(e) { |
|||
console.log(e.detail.value); |
|||
console.log(typeof e.detail.value); |
|||
this._audioContext.seek(e.detail.value); |
|||
this._isChanging = false; |
|||
}, |
|||
play() { |
|||
if (this.isPlaying) { |
|||
this.pause(); |
|||
return; |
|||
} |
|||
this.isPlaying = true; |
|||
this._audioContext.play(); |
|||
this.isPlayEnd = false; |
|||
}, |
|||
pause() { |
|||
this._audioContext.pause(); |
|||
this.isPlaying = false; |
|||
}, |
|||
stop() { |
|||
this._audioContext.stop(); |
|||
this.isPlaying = false; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.play-time-area { |
|||
display: flex; |
|||
flex-direction: row; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.duration { |
|||
margin-left: auto; |
|||
} |
|||
|
|||
.play-button-area { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
margin-top: 50px; |
|||
} |
|||
|
|||
.icon-play { |
|||
width: 60px; |
|||
height: 60px; |
|||
} |
|||
</style> |
|||
@ -1,69 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-title uni-common-mt"> |
|||
{{appear ? '小球出现' : '小球消失'}} |
|||
</view> |
|||
<scroll-view class="scroll-view" scroll-y> |
|||
<view class="scroll-area"> |
|||
<text class="notice">向下滚动让小球出现</text> |
|||
<view class="ball"></view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
let observer = null; |
|||
export default { |
|||
data() { |
|||
return { |
|||
appear: false, |
|||
title:'intersectionObserver' |
|||
} |
|||
}, |
|||
onReady() { |
|||
observer = uni.createIntersectionObserver(this); |
|||
observer.relativeTo('.scroll-view').observe('.ball', (res) => { |
|||
if (res.intersectionRatio > 0 && !this.appear) { |
|||
this.appear = true; |
|||
} else if (!res.intersectionRatio > 0 && this.appear) { |
|||
this.appear = false; |
|||
} |
|||
}) |
|||
}, |
|||
onUnload() { |
|||
if (observer) { |
|||
observer.disconnect() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.scroll-view { |
|||
height: 400rpx; |
|||
background: #fff; |
|||
border: 1px solid #ccc; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.scroll-area { |
|||
height: 1300rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.notice { |
|||
margin-top: 150rpx; |
|||
margin: 150rpx 0 400rpx 0; |
|||
} |
|||
|
|||
.ball { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
background: #4cd964; |
|||
border-radius: 50%; |
|||
} |
|||
</style> |
|||
@ -1,322 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view style="background:#FFF; padding:40rpx;"> |
|||
<block v-if="hasLogin === true"> |
|||
<view class="uni-h3 uni-center uni-common-mt">已登录 |
|||
<text v-if="isUniverifyLogin" style="font-size: 0.8em;"> |
|||
<i v-if="!phoneNumber.length" class="uni-icon_toast uni-loading"></i> |
|||
<i v-else>（{{phoneNumber}}）</i> |
|||
</text> |
|||
</view> |
|||
<view class="uni-hello-text uni-center"> |
|||
<text>每个账号仅需登录 1 次，\n后续每次进入页面即可自动拉取用户信息。</text> |
|||
</view> |
|||
</block> |
|||
<block v-if="hasLogin === false"> |
|||
<view class="uni-h3 uni-center uni-common-mt">未登录</view> |
|||
<view class="uni-hello-text uni-center"> |
|||
请点击按钮登录 |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<view class="uni-btn-v uni- uni-common-mt"> |
|||
<!-- #ifdef MP-TOUTIAO --> |
|||
<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @click="tologin(value)" :key="key"> |
|||
登录 |
|||
</button> |
|||
<!-- #endif --> |
|||
<!-- #ifndef MP-TOUTIAO --> |
|||
<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @click="tologin(value)" |
|||
:loading="value.id === 'univerify' ? univerifyBtnLoading : false" :key="key">{{value.name}}</button> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import { |
|||
mapState, |
|||
mapMutations, |
|||
mapActions |
|||
} from 'vuex' |
|||
const univerifyInfoKey = 'univerifyInfo'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'login', |
|||
providerList: [], |
|||
phoneNumber: '', |
|||
univerifyBtnLoading: false |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['hasLogin', 'isUniverifyLogin', 'univerifyErrorMsg']) |
|||
}, |
|||
onLoad() { |
|||
uni.getProvider({ |
|||
service: 'oauth', |
|||
success: (result) => { |
|||
this.providerList = result.provider.map((value) => { |
|||
let providerName = ''; |
|||
switch (value) { |
|||
case 'weixin': |
|||
providerName = '微信登录' |
|||
break; |
|||
case 'qq': |
|||
providerName = 'QQ登录' |
|||
break; |
|||
case 'sinaweibo': |
|||
providerName = '新浪微博登录' |
|||
break; |
|||
case 'xiaomi': |
|||
providerName = '小米登录' |
|||
break; |
|||
case 'alipay': |
|||
providerName = '支付宝登录' |
|||
break; |
|||
case 'baidu': |
|||
providerName = '百度登录' |
|||
break; |
|||
case 'jd': |
|||
providerName = '京东登录' |
|||
break; |
|||
case 'toutiao': |
|||
providerName = '头条登录' |
|||
break; |
|||
case 'apple': |
|||
providerName = '苹果登录' |
|||
break; |
|||
case 'univerify': |
|||
providerName = '一键登录' |
|||
break; |
|||
} |
|||
return { |
|||
name: providerName, |
|||
id: value |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
fail: (error) => { |
|||
console.log('获取登录通道失败', error); |
|||
} |
|||
}); |
|||
|
|||
if (this.hasLogin && this.isUniverifyLogin) { |
|||
this.getPhoneNumber(uni.getStorageSync(univerifyInfoKey)).then((phoneNumber) => { |
|||
this.phoneNumber = phoneNumber |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapMutations(['login', 'setUniverifyLogin']), |
|||
...mapActions(['getPhoneNumber']), |
|||
Toast(data, duration = 1000) { |
|||
uni.showToast(Object.assign({}, data, { |
|||
duration |
|||
})) |
|||
}, |
|||
tologin(provider) { |
|||
if (provider.id === 'univerify') { |
|||
this.univerifyBtnLoading = true; |
|||
} |
|||
|
|||
// 一键登录已在APP onLaunch的时候进行了预登陆，可以显著提高登录速度。登录成功后，预登陆状态会重置 |
|||
uni.login({ |
|||
provider: provider.id, |
|||
// #ifdef MP-ALIPAY |
|||
scopes: 'auth_user', //支付宝小程序需设置授权类型 |
|||
// #endif |
|||
success: async (res) => { |
|||
console.log('login success:', res); |
|||
this.Toast({ |
|||
title: '登录成功' |
|||
}) |
|||
// 更新保存在 store 中的登录状态 |
|||
this.login(provider.id); |
|||
|
|||
// #ifdef APP-PLUS |
|||
this.setUniverifyLogin(provider.id === 'univerify') |
|||
switch (provider.id) { |
|||
case 'univerify': |
|||
this.loginByUniverify(provider.id, res) |
|||
break; |
|||
case 'apple': |
|||
this.loginByApple(provider.id, res) |
|||
break; |
|||
} |
|||
// #endif |
|||
|
|||
// #ifdef MP-WEIXIN |
|||
console.warn('如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id') |
|||
uni.request({ |
|||
url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center', |
|||
method: 'POST', |
|||
data: { |
|||
action: 'loginByWeixin', |
|||
params: { |
|||
code: res.code, |
|||
platform: 'mp-weixin' |
|||
} |
|||
}, |
|||
success(res) { |
|||
console.log(res); |
|||
if (res.data.code !== 0) { |
|||
console.log('获取openid失败：', res.data.errMsg); |
|||
return |
|||
} |
|||
uni.setStorageSync('openid', res.data.openid) |
|||
}, |
|||
fail(err) { |
|||
console.log('获取openid失败：', err); |
|||
} |
|||
}) |
|||
// #endif |
|||
}, |
|||
fail: (err) => { |
|||
console.log('login fail:', err); |
|||
|
|||
// 一键登录点击其他登录方式 |
|||
if (err.code == '30002') { |
|||
uni.closeAuthView(); |
|||
this.Toast({ |
|||
title: '其他登录方式' |
|||
}) |
|||
return; |
|||
} |
|||
|
|||
// 未开通 |
|||
if (err.code == 1000) { |
|||
uni.showModal({ |
|||
title: '登录失败', |
|||
content: `${err.errMsg}\n，错误码：${err.code}`, |
|||
confirmText: '开通指南', |
|||
cancelText: '确定', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
setTimeout(() => { |
|||
plus.runtime.openWeb('https://ask.dcloud.net.cn/article/37965') |
|||
}, 500) |
|||
} |
|||
} |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 一键登录预登陆失败 |
|||
if (err.code == '30005') { |
|||
uni.showModal({ |
|||
showCancel: false, |
|||
title: '预登录失败', |
|||
content: this.univerifyErrorMsg || err.errMsg |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 一键登录用户关闭验证界面 |
|||
if (err.code != '30003') { |
|||
uni.showModal({ |
|||
showCancel: false, |
|||
title: '登录失败', |
|||
content: JSON.stringify(err) |
|||
}); |
|||
} |
|||
}, |
|||
complete: () => { |
|||
this.univerifyBtnLoading = false; |
|||
} |
|||
}); |
|||
}, |
|||
loginByUniverify(provider, res) { |
|||
this.setUniverifyLogin(true); |
|||
uni.closeAuthView(); |
|||
|
|||
const univerifyInfo = { |
|||
provider, |
|||
...res.authResult, |
|||
} |
|||
|
|||
this.getPhoneNumber(univerifyInfo).then((phoneNumber) => { |
|||
this.phoneNumber = phoneNumber; |
|||
uni.setStorageSync(univerifyInfoKey, univerifyInfo) |
|||
}).catch(err => { |
|||
uni.showModal({ |
|||
showCancel: false, |
|||
title: '手机号获取失败', |
|||
content: `${err.errMsg}\n，错误码：${err.code}` |
|||
}) |
|||
console.error(res); |
|||
}) |
|||
}, |
|||
async loginByApple(provider, res) { |
|||
// 获取用户信息 |
|||
let getUserInfoErr, result |
|||
// #ifndef VUE3 |
|||
[getUserInfoErr, result] = await uni.getUserInfo({ |
|||
provider |
|||
}); |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
try { |
|||
result = await uni.getUserInfo({ |
|||
provider |
|||
}); |
|||
} catch(e) { |
|||
getUserInfoErr = e |
|||
} |
|||
// #endif |
|||
|
|||
if (getUserInfoErr) { |
|||
let content = getUserInfoErr.errMsg; |
|||
if (~content.indexOf('uni.login')) { |
|||
content = '请在登录页面完成登录操作'; |
|||
} |
|||
uni.showModal({ |
|||
title: '获取用户信息失败', |
|||
content: '错误原因' + content, |
|||
showCancel: false |
|||
}); |
|||
} |
|||
// uni-id 苹果登录 |
|||
console.warn('此处使用uni-id处理苹果登录，详情参考: https://uniapp.dcloud.net.cn/uniCloud/uni-id') |
|||
uni.request({ |
|||
url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center', |
|||
method: 'POST', |
|||
data: { |
|||
action: 'loginByApple', |
|||
params: result.userInfo |
|||
}, |
|||
success: (res) => { |
|||
console.log('uniId login success', res); |
|||
if(res.data.code !== 0){ |
|||
uni.showModal({ |
|||
showCancel: false, |
|||
content: `苹果登录失败: ${JSON.stringify(res.data.msg)}`, |
|||
}) |
|||
} else { |
|||
uni.setStorageSync('openid', res.data.openid) |
|||
uni.setStorageSync('apple_nickname', res.data.userInfo.nickname) |
|||
} |
|||
}, |
|||
fail: (e) => { |
|||
uni.showModal({ |
|||
content: `苹果登录失败: ${JSON.stringify(e)}`, |
|||
showCancel: false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
button { |
|||
background-color: #007aff; |
|||
color: #ffffff; |
|||
} |
|||
</style> |
|||
@ -1,50 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-hello-text uni-center">请在下方输入电话号码</view> |
|||
<input class="input uni-common-mt" type="number" name="input" @input="bindInput" /> |
|||
<view class="uni-btn-v uni-common-mt"> |
|||
<button @tap="makePhoneCall" type="primary" :disabled="disabled">拨打</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'makePhoneCall', |
|||
disabled: true |
|||
} |
|||
}, |
|||
methods: { |
|||
bindInput: function (e) { |
|||
this.inputValue = e.detail.value |
|||
if (this.inputValue.length > 0) { |
|||
this.disabled = false |
|||
} else { |
|||
this.disabled = true |
|||
} |
|||
}, |
|||
makePhoneCall: function () { |
|||
uni.makePhoneCall({ |
|||
phoneNumber: this.inputValue, |
|||
success: () => { |
|||
console.log("成功拨打电话") |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.input { |
|||
height: 119rpx; |
|||
line-height: 119rpx; |
|||
font-size: 78rpx; |
|||
border-bottom: 1rpx solid #E2E2E2; |
|||
text-align:center; |
|||
} |
|||
</style> |
|||
@ -1,102 +0,0 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<map class="map" ref="dcmap" :markers="markers" @tap="selectPoint"></map> |
|||
<scroll-view class="scrollview" scroll-y="true"> |
|||
<button class="button" @click="reverseGeocode">reverseGeocode</button> |
|||
<button class="button" @click="poiSearchNearBy">poiSearchNearBy</button> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// 116.397477,39.908692 |
|||
let mapSearch = weex.requireModule('mapSearch') |
|||
export default { |
|||
data() { |
|||
return { |
|||
markers: [{ |
|||
id: '1', |
|||
latitude: 39.9086920000, |
|||
longitude: 116.3974770000, |
|||
title: '天安门', |
|||
zIndex: '1', |
|||
iconPath: '/static/gps.png', |
|||
width: 20, |
|||
height: 20, |
|||
anchor: { |
|||
x: 0.5, |
|||
y: 1 |
|||
}, |
|||
callout: { |
|||
content: '首都北京\n天安门', |
|||
color: '#00BFFF', |
|||
fontSize: 12, |
|||
borderRadius: 2, |
|||
borderWidth: 0, |
|||
borderColor: '#333300', |
|||
bgColor: '#CCFF11', |
|||
padding: '1', |
|||
display: 'ALWAYS' |
|||
} |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
selectPoint(e) { |
|||
console.log(e); |
|||
}, |
|||
reverseGeocode() { |
|||
var point = this.markers[0] |
|||
mapSearch.reverseGeocode({ |
|||
point: { |
|||
latitude: point.latitude, |
|||
longitude: point.longitude |
|||
} |
|||
}, ret => { |
|||
console.log(JSON.stringify(ret)); |
|||
uni.showModal({ |
|||
content: JSON.stringify(ret) |
|||
}) |
|||
}) |
|||
}, |
|||
poiSearchNearBy() { |
|||
var point = this.markers[0] |
|||
mapSearch.poiSearchNearBy({ |
|||
point: { |
|||
latitude: point.latitude, |
|||
longitude: point.longitude |
|||
}, |
|||
key: '停车场', |
|||
radius: 1000 |
|||
}, ret => { |
|||
console.log(ret); |
|||
uni.showModal({ |
|||
content: JSON.stringify(ret) |
|||
}) |
|||
}) |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
flex: 1; |
|||
} |
|||
|
|||
.map { |
|||
width: 750rpx; |
|||
height: 500rpx; |
|||
background-color: black; |
|||
} |
|||
|
|||
.scrollview { |
|||
flex: 1; |
|||
} |
|||
|
|||
.button { |
|||
margin-top: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
</style> |
|||
@ -1,447 +0,0 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude" |
|||
:latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew" |
|||
:show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom" |
|||
:enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite" |
|||
:enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons" |
|||
:include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap" |
|||
@callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map> |
|||
<scroll-view class="scrollview" scroll-y="true"> |
|||
<!-- <view class="list-item"> |
|||
<text class="list-text">显示3D楼块</text> |
|||
<switch :checked="enable3D" @change="enableThreeD" /> |
|||
</view> |
|||
<view class="list-item"> |
|||
<text class="list-text">显示指南针</text> |
|||
<switch :checked="showCompass" @change="changeShowCompass" /> |
|||
</view> |
|||
<view class="list-item"> |
|||
<text class="list-text">开启俯视</text> |
|||
<switch :checked="enableOverlooking" @change="changeEnableOverlooking" /> |
|||
</view> |
|||
<view class="list-item"> |
|||
<text class="list-text">是否支持缩放</text> |
|||
<switch :checked="enableZoom" @change="changeEnableZoom" /> |
|||
</view> |
|||
<view class="list-item"> |
|||
<text class="list-text">是否支持拖动</text> |
|||
<switch :checked="enableScroll" @change="changeEnableScroll" /> |
|||
</view> |
|||
<view class="list-item"> |
|||
<text class="list-text">是否支持旋转</text> |
|||
<switch :checked="enableRotate" @change="changeEnableRotate" /> |
|||
</view> |
|||
<view class="list-item"> |
|||
<text class="list-text">是否开启卫星图</text> |
|||
<switch :checked="enableSatellite" @change="changeEnableSatellite" /> |
|||
</view> |
|||
<view class="list-item"> |
|||
<text class="list-text">是否开启实时路况</text> |
|||
<switch :checked="enableTraffic" @change="changeEnableTraffic" /> |
|||
</view> --> |
|||
<!-- #ifndef MP-JD --> |
|||
<button class="button" @click="changeScale">changeScale</button> |
|||
<button class="button" @click="changeRotate">changeRotate</button> |
|||
<button class="button" @click="changeSkew">skew</button> |
|||
<!-- #endif --> |
|||
<button class="button" @click="addMarkers">addMarkers</button> |
|||
<button class="button" @click="addPolyline">addPolyline</button> |
|||
<!-- #ifndef MP-JD --> |
|||
<button class="button" @click="addPolygons">addPolygons</button> |
|||
<!-- #endif --> |
|||
<button class="button" @click="addCircles">addCircles</button> |
|||
<button class="button" @click="includePoint">includePoints</button> |
|||
<button class="button" @click="handleGetCenterLocation">getCenterLocation</button> |
|||
<button class="button" @click="handleGetRegion">getRegion</button> |
|||
<!-- #ifndef MP-JD --> |
|||
<button class="button" @click="handleTranslateMarker">translateMarker</button> |
|||
<!-- #endif --> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
const testMarkers = [{ |
|||
id: 0, |
|||
latitude: 39.989631, |
|||
longitude: 116.481018, |
|||
title: '方恒国际 阜通东大街6号', |
|||
zIndex: '1', |
|||
rotate: 0, |
|||
width: 20, |
|||
height: 20, |
|||
anchor: { |
|||
x: 0.5, |
|||
y: 1 |
|||
}, |
|||
callout: { |
|||
content: '方恒国际 阜通东大街6号', |
|||
color: '#00BFFF', |
|||
fontSize: 10, |
|||
borderRadius: 4, |
|||
borderWidth: 1, |
|||
borderColor: '#333300', |
|||
bgColor: '#CCFF99', |
|||
padding: '5', |
|||
display: 'ALWAYS' |
|||
} |
|||
}, |
|||
{ |
|||
id: 1, |
|||
latitude: 39.9086920000, |
|||
longitude: 116.3974770000, |
|||
title: '天安门', |
|||
zIndex: '1', |
|||
iconPath: '/static/location.png', |
|||
width: 40, |
|||
height: 40, |
|||
anchor: { |
|||
x: 0.5, |
|||
y: 1 |
|||
}, |
|||
callout: { |
|||
content: '首都北京\n天安门', |
|||
color: '#00BFFF', |
|||
fontSize: 12, |
|||
borderRadius: 2, |
|||
borderWidth: 0, |
|||
borderColor: '#333300', |
|||
bgColor: '#CCFF11', |
|||
padding: '1', |
|||
display: 'ALWAYS' |
|||
} |
|||
} |
|||
]; |
|||
const testPolyline = [{ |
|||
points: [{ |
|||
latitude: 39.925539, |
|||
longitude: 116.279037 |
|||
}, |
|||
{ |
|||
latitude: 39.925539, |
|||
longitude: 116.520285 |
|||
} |
|||
], |
|||
color: '#FFCCFF', |
|||
width: 7, |
|||
dottedLine: true, |
|||
arrowLine: true, |
|||
borderColor: '#000000', |
|||
borderWidth: 2 |
|||
}, |
|||
{ |
|||
points: [{ |
|||
latitude: 39.938698, |
|||
longitude: 116.275177 |
|||
}, |
|||
{ |
|||
latitude: 39.966069, |
|||
longitude: 116.289253 |
|||
}, |
|||
{ |
|||
latitude: 39.944226, |
|||
longitude: 116.306076 |
|||
}, |
|||
{ |
|||
latitude: 39.966069, |
|||
longitude: 116.322899 |
|||
}, |
|||
{ |
|||
latitude: 39.938698, |
|||
longitude: 116.336975 |
|||
} |
|||
], |
|||
color: '#CCFFFF', |
|||
width: 5, |
|||
dottedLine: true, |
|||
arrowLine: true, |
|||
borderColor: '#CC0000', |
|||
borderWidth: 3 |
|||
} |
|||
]; |
|||
const testPolygons = [{ |
|||
points: [{ |
|||
latitude: 39.781892, |
|||
longitude: 116.293413 |
|||
}, |
|||
{ |
|||
latitude: 39.787600, |
|||
longitude: 116.391842 |
|||
}, |
|||
{ |
|||
latitude: 39.733187, |
|||
longitude: 116.417932 |
|||
}, |
|||
{ |
|||
latitude: 39.704653, |
|||
longitude: 116.338255 |
|||
} |
|||
], |
|||
fillColor: '#FFCCFF', |
|||
strokeWidth: 3, |
|||
strokeColor: '#CC99CC', |
|||
zIndex: 11 |
|||
}, |
|||
{ |
|||
points: [{ |
|||
latitude: 39.887600, |
|||
longitude: 116.518932 |
|||
}, |
|||
{ |
|||
latitude: 39.781892, |
|||
longitude: 116.518932 |
|||
}, |
|||
{ |
|||
latitude: 39.781892, |
|||
longitude: 116.428932 |
|||
}, |
|||
{ |
|||
latitude: 39.887600, |
|||
longitude: 116.428932 |
|||
} |
|||
], |
|||
fillColor: '#CCFFFF', |
|||
strokeWidth: 5, |
|||
strokeColor: '#CC0000', |
|||
zIndex: 3 |
|||
} |
|||
]; |
|||
const testCircles = [{ |
|||
latitude: 39.996441, |
|||
longitude: 116.411146, |
|||
radius: 15000, |
|||
strokeWidth: 5, |
|||
color: '#CCFFFF', |
|||
fillColor: '#CC0000' |
|||
}, |
|||
{ |
|||
latitude: 40.096441, |
|||
longitude: 116.511146, |
|||
radius: 12000, |
|||
strokeWidth: 3, |
|||
color: '#CCFFFF', |
|||
fillColor: '#FFCCFF' |
|||
}, |
|||
{ |
|||
latitude: 39.896441, |
|||
longitude: 116.311146, |
|||
radius: 9000, |
|||
strokeWidth: 1, |
|||
color: '#CCFFFF', |
|||
fillColor: '#CC0000' |
|||
} |
|||
]; |
|||
const testIncludePoints = [{ |
|||
latitude: 39.989631, |
|||
longitude: 116.481018, |
|||
}, |
|||
{ |
|||
latitude: 39.9086920000, |
|||
longitude: 116.3974770000, |
|||
} |
|||
]; |
|||
export default { |
|||
data() { |
|||
return { |
|||
location: { |
|||
longitude: 116.3974770000, |
|||
latitude: 39.9086920000 |
|||
}, |
|||
controls: [{ |
|||
id: 1, |
|||
position: { |
|||
left: 5, |
|||
top: 180, |
|||
width: 30, |
|||
height: 30 |
|||
}, |
|||
iconPath: '/static/logo.png', |
|||
clickable: true |
|||
}], |
|||
showLocation: false, |
|||
scale: 13, |
|||
showCompass: true, |
|||
enable3D: true, |
|||
enableOverlooking: true, |
|||
enableZoom: true, |
|||
enableScroll: true, |
|||
enableRotate: true, |
|||
enableSatellite: false, |
|||
enableTraffic: false, |
|||
polyline: [], |
|||
markers: [], |
|||
polygons: [], |
|||
circles: [], |
|||
includePoints: [], |
|||
rotate: 0, |
|||
skew: 0 |
|||
} |
|||
}, |
|||
onLoad() {}, |
|||
onReady() { |
|||
this.map = uni.createMapContext("map1", this); |
|||
}, |
|||
methods: { |
|||
// #ifndef MP-JD |
|||
changeScale() { |
|||
this.scale = this.scale == 9 ? 15 : 9; |
|||
}, |
|||
changeRotate() { |
|||
this.rotate = this.rotate == 90 ? 0 : 90; |
|||
}, |
|||
changeSkew() { |
|||
this.skew = this.skew == 30 ? 0 : 30; |
|||
}, |
|||
// #endif |
|||
enableThreeD(e) { |
|||
this.enable3D = e.detail.value; |
|||
}, |
|||
changeShowCompass(e) { |
|||
this.showCompass = e.detail.value; |
|||
}, |
|||
changeEnableOverlooking(e) { |
|||
this.enableOverlooking = e.detail.value; |
|||
}, |
|||
changeEnableZoom(e) { |
|||
this.enableZoom = e.detail.value; |
|||
}, |
|||
changeEnableScroll(e) { |
|||
this.enableScroll = e.detail.value; |
|||
}, |
|||
changeEnableRotate(e) { |
|||
this.enableRotate = e.detail.value; |
|||
}, |
|||
changeEnableSatellite(e) { |
|||
this.enableSatellite = e.detail.value; |
|||
}, |
|||
changeEnableTraffic(e) { |
|||
this.enableTraffic = e.detail.value; |
|||
}, |
|||
addMarkers() { |
|||
this.markers = testMarkers; |
|||
}, |
|||
addPolyline() { |
|||
this.polyline = testPolyline; |
|||
}, |
|||
// #ifndef MP-JD |
|||
addPolygons() { |
|||
this.polygons = testPolygons; |
|||
}, |
|||
// #endif |
|||
addCircles() { |
|||
this.circles = testCircles; |
|||
}, |
|||
includePoint() { |
|||
this.includePoints = testIncludePoints; |
|||
}, |
|||
handleGetCenterLocation() { |
|||
this.map.getCenterLocation({ |
|||
success: ret => { |
|||
console.log(JSON.stringify(ret)); |
|||
uni.showModal({ |
|||
content: JSON.stringify(ret) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
handleGetRegion() { |
|||
this.map.getRegion({ |
|||
success: ret => { |
|||
console.log(JSON.stringify(ret)); |
|||
uni.showModal({ |
|||
content: JSON.stringify(ret) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// #ifndef MP-JD |
|||
handleTranslateMarker() { |
|||
this.map.translateMarker({ |
|||
markerId: 1, |
|||
destination: { |
|||
latitude: 39.989631, |
|||
longitude: 116.481018 |
|||
}, |
|||
duration: 2000 |
|||
}, ret => { |
|||
console.log(JSON.stringify(ret)); |
|||
uni.showModal({ |
|||
content: JSON.stringify(ret) |
|||
}) |
|||
}); |
|||
}, |
|||
// #endif |
|||
maptap(e) { |
|||
uni.showModal({ |
|||
content: JSON.stringify(e) |
|||
}) |
|||
}, |
|||
onmarkertap(e) { |
|||
uni.showModal({ |
|||
content: JSON.stringify(e) |
|||
}) |
|||
}, |
|||
oncontroltap(e) { |
|||
uni.showModal({ |
|||
content: JSON.stringify(e) |
|||
}) |
|||
}, |
|||
oncallouttap(e) { |
|||
uni.showModal({ |
|||
content: JSON.stringify(e) |
|||
}) |
|||
}, |
|||
onupdated(e) { |
|||
console.log(JSON.stringify(e)) |
|||
}, |
|||
onregionchange(e) { |
|||
console.log(JSON.stringify(e)); |
|||
}, |
|||
onpoitap(e) { |
|||
uni.showModal({ |
|||
content: JSON.stringify(e) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
flex: 1; |
|||
} |
|||
|
|||
.map { |
|||
width: 750rpx; |
|||
/* #ifdef H5 */ |
|||
width: 100%; |
|||
/* #endif */ |
|||
height: 250px; |
|||
background-color: #f0f0f0; |
|||
} |
|||
|
|||
.scrollview { |
|||
/* #ifdef H5 */ |
|||
margin-top: 240px; |
|||
/* #endif */ |
|||
flex: 1; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.list-item { |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
align-items: center; |
|||
padding: 5px 0px; |
|||
} |
|||
|
|||
.list-text { |
|||
flex: 1; |
|||
} |
|||
|
|||
.button { |
|||
margin-top: 5px; |
|||
margin-bottom: 5px; |
|||
} |
|||
</style> |
|||
@ -1,40 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-btn-v"> |
|||
<button type="default" @tap="modalTap">有标题的modal</button> |
|||
<button type="default" @tap="noTitlemodalTap">无标题的modal</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'modal', |
|||
modalHidden: true, |
|||
modalHidden2: true |
|||
} |
|||
}, |
|||
methods: { |
|||
modalTap: function (e) { |
|||
uni.showModal({ |
|||
title: "弹窗标题", |
|||
content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内", |
|||
showCancel: false, |
|||
confirmText: "确定" |
|||
}) |
|||
}, |
|||
noTitlemodalTap: function (e) { |
|||
uni.showModal({ |
|||
content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内", |
|||
confirmText: "确定", |
|||
cancelText: "取消" |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,105 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-btn-v"> |
|||
<button @tap="navigateTo">跳转新页面，并传递数据</button> |
|||
<button @tap="navigateBack">返回上一页</button> |
|||
<button @tap="redirectTo">在当前页面打开</button> |
|||
<button @tap="switchTab">切换到模板选项卡</button> |
|||
<button v-if="!hasLeftWin" @tap="reLaunch">关闭所有页面，打开首页</button> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<button @tap="customAnimation">使用自定义动画打开页面</button> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-PLUS || H5 --> |
|||
<button @tap="preloadPage">预载复杂页面</button> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<button @tap="unPreloadPage">取消页面预载</button> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-PLUS || H5 --> |
|||
<button @tap="navigateToPreloadPage">打开复杂页面</button> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
const preloadPageUrl = '/pages/extUI/calendar/calendar' |
|||
import { mapState } from 'vuex' |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'navigate' |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState({ |
|||
hasLeftWin: state => !state.noMatchLeftWindow |
|||
}) |
|||
}, |
|||
methods: { |
|||
navigateTo() { |
|||
uni.navigateTo({ |
|||
url: 'new-page/new-vue-page-1?data=Hello' |
|||
}) |
|||
}, |
|||
navigateBack() { |
|||
uni.navigateBack(); |
|||
}, |
|||
redirectTo() { |
|||
uni.redirectTo({ |
|||
url: 'new-page/new-vue-page-1' |
|||
}); |
|||
}, |
|||
switchTab() { |
|||
uni.switchTab({ |
|||
url: '/pages/tabBar/template/template' |
|||
}); |
|||
}, |
|||
reLaunch() { |
|||
if (this.hasLeftWin) { |
|||
uni.reLaunch({ |
|||
url: '/pages/component/view/view' |
|||
}); |
|||
return; |
|||
} |
|||
uni.reLaunch({ |
|||
url: '/pages/tabBar/component/component' |
|||
}); |
|||
}, |
|||
customAnimation(){ |
|||
uni.navigateTo({ |
|||
url: 'new-page/new-vue-page-1?data=使用自定义动画打开页面', |
|||
animationType: 'slide-in-bottom', |
|||
animationDuration: 200 |
|||
}) |
|||
}, |
|||
preloadPage(){ |
|||
uni.preloadPage({ |
|||
url: preloadPageUrl, |
|||
success(){ |
|||
uni.showToast({ |
|||
title:'页面预载成功' |
|||
}) |
|||
}, |
|||
fail(){ |
|||
uni.showToast({ |
|||
title:'页面预载失败' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
unPreloadPage(){ |
|||
uni.unPreloadPage({ |
|||
url: preloadPageUrl |
|||
}) |
|||
}, |
|||
navigateToPreloadPage(){ |
|||
uni.navigateTo({ |
|||
url: preloadPageUrl |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,83 +0,0 @@ |
|||
<template> |
|||
<view class="root"> |
|||
<view class="page-body"> |
|||
<view class="new-page__color" @click="setColorIndex(colorIndex>1?0:colorIndex+1)" :style="{backgroundColor:currentColor}"> |
|||
<text class="new-page__color-text">点击改变颜色</text> |
|||
</view> |
|||
<view class="new-page__text-box"> |
|||
<text class="new-page__text">点击上方色块使用vuex在页面之间进行通讯</text> |
|||
</view> |
|||
<view class="new-page__button"> |
|||
<button class="new-page__button-item" @click="navToNvue">跳转NVUE页面</button> |
|||
<button class="new-page__button-item" @click="navToVue">跳转VUE页面</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import {mapState,mapGetters,mapMutations} from 'vuex' |
|||
export default { |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
computed:{ |
|||
...mapState(['colorIndex','colorList']), |
|||
...mapGetters(['currentColor']) |
|||
}, |
|||
methods:{ |
|||
...mapMutations(['setColorIndex']), |
|||
navToNvue(){ |
|||
uni.navigateTo({ |
|||
url:'new-nvue-page-2' |
|||
}) |
|||
}, |
|||
navToVue(){ |
|||
uni.navigateTo({ |
|||
url:'new-vue-page-2' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.new-page__text { |
|||
font-size: 14px; |
|||
color: #666666; |
|||
} |
|||
|
|||
.root{ |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.page-body{ |
|||
flex: 1; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
padding-top: 50px; |
|||
} |
|||
|
|||
.new-page__text-box{ |
|||
padding: 20px; |
|||
} |
|||
|
|||
.new-page__color{ |
|||
width: 200px; |
|||
height: 100px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.new-page__color-text{ |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
line-height: 30px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.new-page__button-item{ |
|||
margin-top: 15px; |
|||
width: 300px; |
|||
} |
|||
</style> |
|||
@ -1,69 +0,0 @@ |
|||
<template> |
|||
<view class="root"> |
|||
<view class="page-body"> |
|||
<view class="new-page__color" @click="setColorIndex(colorIndex>1?0:colorIndex+1)" :style="{backgroundColor:currentColor}"> |
|||
<text class="new-page__color-text">点击改变颜色</text> |
|||
</view> |
|||
<view class="new-page__text-box"> |
|||
<text class="new-page__text">点击上方色块使用vuex在页面之间进行通讯</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import {mapState,mapGetters,mapMutations} from 'vuex' |
|||
export default { |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
computed:{ |
|||
...mapState(['colorIndex','colorList']), |
|||
...mapGetters(['currentColor']) |
|||
}, |
|||
methods:{ |
|||
...mapMutations(['setColorIndex']) |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.new-page__text { |
|||
font-size: 14px; |
|||
color: #666666; |
|||
} |
|||
|
|||
.root{ |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.page-body{ |
|||
flex: 1; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
padding-top: 50px; |
|||
} |
|||
|
|||
.new-page__text-box{ |
|||
padding: 20px; |
|||
} |
|||
|
|||
.new-page__color{ |
|||
width: 200px; |
|||
height: 100px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.new-page__color-text{ |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
line-height: 30px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.new-page__button-item{ |
|||
margin-top: 15px; |
|||
width: 300px; |
|||
} |
|||
</style> |
|||
@ -1,108 +0,0 @@ |
|||
<template> |
|||
<view class="root"> |
|||
<page-head :title="title"></page-head> |
|||
<view class="page-body"> |
|||
<view class="new-page__text-box"> |
|||
<text class="new-page__text">从上个页面接收到参数：{{data}}</text> |
|||
</view> |
|||
<view class="new-page__color" @click="setColorIndex(colorIndex>1?0:colorIndex+1)" :style="{backgroundColor:currentColor}"> |
|||
<text class="new-page__color-text">点击改变颜色</text> |
|||
</view> |
|||
<view class="new-page__text-box"> |
|||
<text class="new-page__text">点击上方色块使用vuex在页面之间进行通讯</text> |
|||
</view> |
|||
<view class="new-page__button"> |
|||
<!-- #ifndef VUE3--> |
|||
<button class="new-page__button-item" @click="navToNvue">跳转NVUE页面</button> |
|||
<!-- #endif --> |
|||
<button class="new-page__button-item" @click="navToVue">跳转VUE页面</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import {mapState,mapGetters,mapMutations} from 'vuex' |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '新页面', |
|||
data:"" |
|||
} |
|||
}, |
|||
computed:{ |
|||
...mapState(['colorIndex','colorList']), |
|||
...mapGetters(['currentColor']) |
|||
}, |
|||
onLoad(e){ |
|||
if(e.data){ |
|||
this.data = e.data; |
|||
} |
|||
uni.$on('postMsg',(res)=>{ |
|||
uni.showModal({ |
|||
content: `收到uni.$emit消息:${res.msg}`, |
|||
showCancel: false |
|||
}) |
|||
}) |
|||
}, |
|||
onUnload() { |
|||
uni.$off('postMsg') |
|||
}, |
|||
methods:{ |
|||
...mapMutations(['setColorIndex']), |
|||
navToNvue(){ |
|||
uni.navigateTo({ |
|||
url:'new-nvue-page-1' |
|||
}) |
|||
}, |
|||
navToVue(){ |
|||
uni.navigateTo({ |
|||
url:'new-vue-page-2' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.new-page__text { |
|||
font-size: 14px; |
|||
color: #666666; |
|||
} |
|||
|
|||
.root{ |
|||
display: flex; |
|||
flex: 1; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.page-body{ |
|||
/* flex: 1; */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
|
|||
.new-page__text-box{ |
|||
padding: 20px; |
|||
} |
|||
|
|||
.new-page__color{ |
|||
display: flex; |
|||
width: 200px; |
|||
height: 100px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.new-page__color-text{ |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
line-height: 30px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.new-page__button-item{ |
|||
margin-top: 15px; |
|||
width: 300px; |
|||
} |
|||
</style> |
|||
@ -1,84 +0,0 @@ |
|||
<template> |
|||
<view class="root"> |
|||
<view class="page-body"> |
|||
<view class="new-page__color" @click="setColorIndex(colorIndex>1?0:colorIndex+1)" :style="{backgroundColor:currentColor}"> |
|||
<text class="new-page__color-text">点击改变颜色</text> |
|||
</view> |
|||
<view class="new-page__text-box"> |
|||
<text class="new-page__text">点击上方色块使用vuex在页面之间进行通讯</text> |
|||
</view> |
|||
<view class="new-page__button"> |
|||
<button class="new-page__button-item" @click="emitMsg">向上一页面传递数据</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import { |
|||
mapState, |
|||
mapGetters, |
|||
mapMutations |
|||
} from 'vuex' |
|||
export default { |
|||
data() { |
|||
return {} |
|||
}, |
|||
computed: { |
|||
...mapState(['colorIndex', 'colorList']), |
|||
...mapGetters(['currentColor']) |
|||
}, |
|||
methods: { |
|||
...mapMutations(['setColorIndex']), |
|||
emitMsg() { |
|||
uni.$emit('postMsg', { |
|||
msg: 'From: Vue Page' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.new-page__text { |
|||
font-size: 14px; |
|||
color: #666666; |
|||
} |
|||
|
|||
.root { |
|||
display: flex; |
|||
flex: 1; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.page-body { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
padding-top: 50px; |
|||
} |
|||
|
|||
.new-page__text-box { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.new-page__color { |
|||
display: flex; |
|||
width: 200px; |
|||
height: 100px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.new-page__color-text { |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
line-height: 30px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.new-page__button-item { |
|||
margin-top: 15px; |
|||
width: 300px; |
|||
} |
|||
</style> |
|||
@ -1,62 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<view class="uni-btn-v"> |
|||
<button class="shake" @tap="shake">摇一摇</button> |
|||
</view> |
|||
<!-- #endif --> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" @tap="watchAcce">监听设备的加速度变化</button> |
|||
<button type="primary" @tap="stopAcce">停止监听设备的加速度变化</button> |
|||
</view> |
|||
<view class="uni-textarea uni-common-mt"> |
|||
<textarea class="acc-show" :value="value" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'onAccelerometerChange', |
|||
value: '' |
|||
} |
|||
}, |
|||
onUnload() { |
|||
uni.stopAccelerometer(); |
|||
}, |
|||
methods: { |
|||
//#ifdef APP-PLUS |
|||
shake() { |
|||
uni.navigateTo({ |
|||
url: '/platforms/app-plus/shake/shake' |
|||
}) |
|||
}, |
|||
//#endif |
|||
watchAcce() { |
|||
uni.onAccelerometerChange((res) => { |
|||
this.value = "监听设备的加速度变化:\n" + "X轴：" + res.x.toFixed(2) + "\nY轴：" + res.y.toFixed(2) + |
|||
"\nZ轴：" + res.z.toFixed(2); |
|||
}) |
|||
}, |
|||
stopAcce() { |
|||
uni.stopAccelerometer() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.shake { |
|||
background-color: #FFCC33; |
|||
color: #ffffff; |
|||
margin-bottom: 50rpx; |
|||
} |
|||
.uni-textarea .acc-show{ |
|||
height: 240rpx; |
|||
} |
|||
</style> |
|||
@ -1,91 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-hello-text uni-center" style="padding-bottom:50rpx;"> |
|||
旋转手机即可获取方位信息 |
|||
</view> |
|||
<view class="direction"> |
|||
<view class="bg-compass-line"></view> |
|||
<image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'"></image> |
|||
<view class="direction-value"> |
|||
<text>{{direction}}</text> |
|||
<text class="direction-degree">o</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'onCompassChange', |
|||
direction: 0 |
|||
} |
|||
}, |
|||
onReady: function () { |
|||
uni.onCompassChange((res) => { |
|||
this.direction = parseInt(res.direction) |
|||
}) |
|||
}, |
|||
onUnload() { |
|||
// #ifndef MP-ALIPAY |
|||
uni.stopCompass(); |
|||
this.direction = 0; |
|||
// #endif |
|||
|
|||
// #ifdef MP-ALIPAY |
|||
uni.offCompassChange(); |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.direction { |
|||
position: relative; |
|||
margin-top: 70rpx; |
|||
display: flex; |
|||
width: 540rpx; |
|||
height: 540rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin:0 auto; |
|||
} |
|||
|
|||
.direction-value { |
|||
position: relative; |
|||
font-size: 200rpx; |
|||
color: #353535; |
|||
line-height: 1; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.direction-degree { |
|||
position: absolute; |
|||
top: 0; |
|||
right: -40rpx; |
|||
font-size: 60rpx; |
|||
} |
|||
|
|||
.bg-compass { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 540rpx; |
|||
height: 540rpx; |
|||
transition: .1s; |
|||
} |
|||
|
|||
.bg-compass-line { |
|||
position: absolute; |
|||
left: 267rpx; |
|||
top: -10rpx; |
|||
width: 6rpx; |
|||
height: 56rpx; |
|||
background-color: #1AAD19; |
|||
border-radius: 999rpx; |
|||
z-index: 1; |
|||
} |
|||
</style> |
|||
@ -1,75 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-common-mt"> |
|||
<form @submit="openLocation"> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">经度</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">纬度</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">位置名称</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" value="天安门" name="name"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">详细位置</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address"/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-btn-v uni-common-mt"> |
|||
<button type="primary" formType="submit">查看位置</button> |
|||
</view> |
|||
</view> |
|||
</form> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'openLocation' |
|||
} |
|||
}, |
|||
methods: { |
|||
openLocation: function (e) { |
|||
console.log(e) |
|||
var value = e.detail.value |
|||
uni.openLocation({ |
|||
longitude: Number(value.longitude), |
|||
latitude: Number(value.latitude), |
|||
name: value.name, |
|||
address: value.address |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-list-cell-left { |
|||
padding: 0 30rpx; |
|||
} |
|||
</style> |
|||
@ -1,83 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view style="font-size: 12px; color: #666;">注：PC 不支持下拉刷新</view> |
|||
<view class="text" v-for="(num,index) in data" :key="index">list - {{num}}</view> |
|||
<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '下拉刷新 + 加载更多', |
|||
data: [], |
|||
loadMoreText: "加载中...", |
|||
showLoadMore: false, |
|||
max: 0 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.initData(); |
|||
}, |
|||
onUnload() { |
|||
this.max = 0, |
|||
this.data = [], |
|||
this.loadMoreText = "加载更多", |
|||
this.showLoadMore = false; |
|||
}, |
|||
onReachBottom() { |
|||
console.log("onReachBottom"); |
|||
if (this.max > 40) { |
|||
this.loadMoreText = "没有更多数据了!" |
|||
return; |
|||
} |
|||
this.showLoadMore = true; |
|||
setTimeout(() => { |
|||
this.setListData(); |
|||
}, 300); |
|||
}, |
|||
onPullDownRefresh() { |
|||
console.log('onPullDownRefresh'); |
|||
this.initData(); |
|||
}, |
|||
methods: { |
|||
initData(){ |
|||
setTimeout(() => { |
|||
this.max = 0; |
|||
this.data = []; |
|||
let data = []; |
|||
this.max += 20; |
|||
for (var i = this.max - 19; i < this.max + 1; i++) { |
|||
data.push(i) |
|||
} |
|||
this.data = this.data.concat(data); |
|||
uni.stopPullDownRefresh(); |
|||
}, 300); |
|||
}, |
|||
setListData() { |
|||
let data = []; |
|||
this.max += 10; |
|||
for (var i = this.max - 9; i < this.max + 1; i++) { |
|||
data.push(i) |
|||
} |
|||
this.data = this.data.concat(data); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.text { |
|||
margin: 16rpx 0; |
|||
width:100%; |
|||
background-color: #fff; |
|||
height: 120rpx; |
|||
line-height: 120rpx; |
|||
text-align: center; |
|||
color: #555; |
|||
border-radius: 8rpx; |
|||
} |
|||
</style> |
|||
@ -1,256 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view style="background:#FFF; padding:50rpx 0;"> |
|||
<view class="uni-hello-text uni-center"><text>支付金额</text></view> |
|||
<view class="uni-h1 uni-center uni-common-mt"> |
|||
<text class="rmbLogo">￥</text> |
|||
<input class="price" type="digit" :value="price" maxlength="4" @input="priceChange" /> |
|||
</view> |
|||
</view> |
|||
<view class="uni-btn-v uni-common-mt"> |
|||
<!-- #ifdef MP-WEIXIN --> |
|||
<button type="primary" @click="weixinPay" :loading="loading">微信支付</button> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<template v-if="providerList.length > 0"> |
|||
<button v-for="(item,index) in providerList" :key="index" @click="requestPayment(item,index)" :loading="item.loading">{{item.name}}支付</button> |
|||
</template> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'request-payment', |
|||
loading: false, |
|||
price: 1, |
|||
providerList: [] |
|||
} |
|||
}, |
|||
onLoad: function() { |
|||
// #ifdef APP-PLUS |
|||
uni.getProvider({ |
|||
service: "payment", |
|||
success: (e) => { |
|||
console.log("payment success:" + JSON.stringify(e)); |
|||
let providerList = []; |
|||
e.provider.map((value) => { |
|||
switch (value) { |
|||
case 'alipay': |
|||
providerList.push({ |
|||
name: '支付宝', |
|||
id: value, |
|||
loading: false |
|||
}); |
|||
break; |
|||
case 'wxpay': |
|||
providerList.push({ |
|||
name: '微信', |
|||
id: value, |
|||
loading: false |
|||
}); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}) |
|||
this.providerList = providerList; |
|||
}, |
|||
fail: (e) => { |
|||
console.log("获取支付通道失败：", e); |
|||
} |
|||
}); |
|||
// #endif |
|||
}, |
|||
methods: { |
|||
loginMpWeixin() { |
|||
return new Promise((resolve, reject) => { |
|||
uni.login({ |
|||
provider: 'weixin', |
|||
success(res) { |
|||
console.warn('此处使用uni-id处理微信小程序登录，详情参考: https://uniapp.dcloud.net.cn/uniCloud/uni-id') |
|||
uni.request({ |
|||
url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center', |
|||
method: 'POST', |
|||
data: { |
|||
action: 'loginByWeixin', |
|||
params: { |
|||
code: res.code, |
|||
platform: 'mp-weixin' |
|||
} |
|||
}, |
|||
success(res) { |
|||
if (res.data.code !== 0) { |
|||
reject(new Error('获取openid失败：', res.result.msg)) |
|||
return |
|||
} |
|||
uni.setStorageSync('openid', res.data.openid) |
|||
resolve(res.data.openid) |
|||
}, |
|||
fail(err) { |
|||
reject(new Error('获取openid失败：' + err)) |
|||
} |
|||
}) |
|||
}, |
|||
fail(err) { |
|||
reject(err) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
async weixinPay() { |
|||
let openid = uni.getStorageSync('openid') |
|||
console.log("发起支付"); |
|||
this.loading = true; |
|||
if (!openid) { |
|||
try { |
|||
openid = await this.loginMpWeixin() |
|||
} catch (e) { |
|||
console.error(e) |
|||
} |
|||
|
|||
if (!openid) { |
|||
uni.showModal({ |
|||
content: '获取openid失败', |
|||
showCancel: false |
|||
}) |
|||
this.loading = false |
|||
return |
|||
} |
|||
} |
|||
this.openid = openid |
|||
let orderInfo = await this.getOrderInfo('wxpay') |
|||
if (!orderInfo) { |
|||
uni.showModal({ |
|||
content: '获取支付信息失败', |
|||
showCancel: false |
|||
}) |
|||
return |
|||
} |
|||
uni.requestPayment({ |
|||
...orderInfo, |
|||
success: (res) => { |
|||
uni.showToast({ |
|||
title: "感谢您的赞助!" |
|||
}) |
|||
}, |
|||
fail: (res) => { |
|||
uni.showModal({ |
|||
content: "支付失败,原因为: " + res |
|||
.errMsg, |
|||
showCancel: false |
|||
}) |
|||
}, |
|||
complete: () => { |
|||
this.loading = false; |
|||
} |
|||
}) |
|||
}, |
|||
async requestPayment(e, index) { |
|||
this.providerList[index].loading = true; |
|||
const provider = e.id |
|||
let orderInfo = await this.getOrderInfo(provider); |
|||
if (!orderInfo) { |
|||
uni.showModal({ |
|||
content: '获取支付信息失败', |
|||
showCancel: false |
|||
}) |
|||
return |
|||
} |
|||
console.log('--------orderInfo--------') |
|||
console.log(orderInfo); |
|||
uni.requestPayment({ |
|||
provider, |
|||
orderInfo: orderInfo, |
|||
success: (e) => { |
|||
console.log("success", e); |
|||
uni.showToast({ |
|||
title: "感谢您的赞助!" |
|||
}) |
|||
}, |
|||
fail: (e) => { |
|||
console.log("fail", e); |
|||
uni.showModal({ |
|||
content: "支付失败,原因为: " + e.errMsg, |
|||
showCancel: false |
|||
}) |
|||
}, |
|||
complete: () => { |
|||
this.providerList[index].loading = false; |
|||
} |
|||
}) |
|||
}, |
|||
getOrderInfo(provider) { |
|||
return new Promise((resolve, reject) => { |
|||
if (!this.price) { |
|||
reject(new Error('请输入金额')) |
|||
} |
|||
console.warn('此处使用uni-pay处理支付，详情参考: https://uniapp.dcloud.io/uniCloud/unipay') |
|||
uni.request({ |
|||
method: 'POST', |
|||
url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/pay', |
|||
data: { |
|||
provider, |
|||
openid: this.openid, |
|||
totalFee: Number(this.price) * 100, // 转为以分为单位 |
|||
// #ifdef APP-PLUS |
|||
platform: 'app-plus', |
|||
// #endif |
|||
// #ifdef MP-WEIXIN |
|||
platform: 'mp-weixin', |
|||
// #endif |
|||
}, |
|||
success(res) { |
|||
if (res.data.code === 0) { |
|||
resolve(res.data.orderInfo) |
|||
} else { |
|||
reject(new Error('获取支付信息失败' + res.data.msg)) |
|||
} |
|||
}, |
|||
fail(err) { |
|||
reject(new Error('请求支付接口失败' + err)) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
priceChange(e) { |
|||
console.log(e.detail.value) |
|||
this.price = e.detail.value; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.rmbLogo { |
|||
font-size: 40rpx; |
|||
} |
|||
|
|||
button { |
|||
background-color: #007aff; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.uni-h1.uni-center { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.price { |
|||
border-bottom: 1px solid #eee; |
|||
width: 200rpx; |
|||
height: 80rpx; |
|||
padding-bottom: 4rpx; |
|||
} |
|||
|
|||
.ipaPayBtn { |
|||
margin-top: 30rpx; |
|||
} |
|||
</style> |
|||
@ -1,176 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-hello-text"> |
|||
请点击按钮向服务器发起请求 |
|||
</view> |
|||
<view class="uni-textarea uni-common-mt"> |
|||
<textarea :value="res"></textarea> |
|||
</view> |
|||
<view class="uni-btn-v uni-common-mt"> |
|||
<button type="primary" @click="sendRequest" :loading="loading">发起请求（Callback）</button> |
|||
<button type="primary" @click="sendRequest('promise')" :loading="loading">发起请求（Promise）</button> |
|||
<button type="primary" @click="sendRequest('await')" :loading="loading">发起请求（Async/Await）</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
const requestUrl = 'https://unidemo.dcloud.net.cn/ajax/echo/text?name=uni-app' |
|||
const duration = 2000 |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'request', |
|||
loading: false, |
|||
res: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
sendRequest(mode) { |
|||
this.loading = true; |
|||
switch (mode) { |
|||
case 'promise': |
|||
this._requestPromise(); |
|||
break; |
|||
case 'await': |
|||
this._requestAwait(); |
|||
break; |
|||
default: |
|||
this._request(); |
|||
break; |
|||
} |
|||
}, |
|||
_request() { |
|||
uni.request({ |
|||
url: requestUrl, |
|||
dataType: 'text', |
|||
data: { |
|||
noncestr: Date.now() |
|||
}, |
|||
success: (res) => { |
|||
console.log('request success', res) |
|||
uni.showToast({ |
|||
title: '请求成功', |
|||
icon: 'success', |
|||
mask: true, |
|||
duration: duration |
|||
}); |
|||
this.res = '请求结果 : ' + JSON.stringify(res); |
|||
}, |
|||
fail: (err) => { |
|||
console.log('request fail', err); |
|||
uni.showModal({ |
|||
content: err.errMsg, |
|||
showCancel: false |
|||
}); |
|||
}, |
|||
complete: () => { |
|||
this.loading = false; |
|||
} |
|||
}); |
|||
}, |
|||
_requestPromise() { |
|||
// #ifndef VUE3 |
|||
uni.request({ |
|||
url: requestUrl, |
|||
dataType: 'text', |
|||
data: { |
|||
noncestr: Date.now() |
|||
} |
|||
}).then(res => { |
|||
console.log('request success', res[1]); |
|||
uni.showToast({ |
|||
title: '请求成功', |
|||
icon: 'success', |
|||
mask: true, |
|||
duration: duration |
|||
}); |
|||
this.res = '请求结果 : ' + JSON.stringify(res[1]); |
|||
this.loading = false; |
|||
}).catch(err => { |
|||
console.log('request fail', err); |
|||
uni.showModal({ |
|||
content: err.errMsg, |
|||
showCancel: false |
|||
}); |
|||
|
|||
this.loading = false; |
|||
}); |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
uni.request({ |
|||
url: requestUrl, |
|||
dataType: 'text', |
|||
data: { |
|||
noncestr: Date.now() |
|||
} |
|||
}).then(res => { |
|||
console.log('request success', res); |
|||
uni.showToast({ |
|||
title: '请求成功', |
|||
icon: 'success', |
|||
mask: true, |
|||
duration: duration |
|||
}); |
|||
this.res = '请求结果 : ' + JSON.stringify(res); |
|||
|
|||
this.loading = false; |
|||
}).catch(err => { |
|||
console.log('request fail', err); |
|||
uni.showModal({ |
|||
content: err.errMsg, |
|||
showCancel: false |
|||
}); |
|||
|
|||
this.loading = false; |
|||
}); |
|||
// #endif |
|||
}, |
|||
async _requestAwait() { |
|||
let res, err |
|||
// #ifndef VUE3 |
|||
[err, res] = await uni.request({ |
|||
url: requestUrl, |
|||
dataType: 'text', |
|||
data: { |
|||
noncestr: Date.now() |
|||
} |
|||
}); |
|||
// #endif |
|||
// #ifdef VUE3 |
|||
try { |
|||
res = await uni.request({ |
|||
url: requestUrl, |
|||
dataType: 'text', |
|||
data: { |
|||
noncestr: Date.now() |
|||
} |
|||
}); |
|||
} catch(e){ |
|||
err=e |
|||
} |
|||
// #endif |
|||
if (err) { |
|||
console.log('request fail', err); |
|||
uni.showModal({ |
|||
content: err.errMsg, |
|||
showCancel: false |
|||
}); |
|||
} else { |
|||
console.log('request success', res) |
|||
uni.showToast({ |
|||
title: '请求成功', |
|||
icon: 'success', |
|||
mask: true, |
|||
duration: duration |
|||
}); |
|||
this.res = '请求结果 : ' + JSON.stringify(res); |
|||
} |
|||
this.loading = false; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,109 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<button v-if="!loadError" :loading="loading" :disabled="loading" type="primary" class="btn" @click="show">显示广告</button> |
|||
<button v-if="loadError" :loading="loading" :disabled="loading" type="primary" class="btn" @click="reloadAd">重新加载广告</button> |
|||
</view> |
|||
<!-- #ifndef APP-PLUS --> |
|||
<view class="ad-tips"> |
|||
<text>小程序端的广告ID由小程序平台提供</text> |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
const ERROR_CODE = [-5001, -5002, -5003, -5004, -5005, -5006]; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '激励视频广告', |
|||
loading: false, |
|||
loadError: false |
|||
} |
|||
}, |
|||
onReady() { |
|||
// #ifdef APP-PLUS |
|||
this.adOption = { |
|||
adpid: '1507000689' |
|||
}; |
|||
// #endif |
|||
// #ifdef MP-WEIXIN |
|||
this.adOption = { |
|||
adUnitId: '' |
|||
}; |
|||
// #endif |
|||
this.createAd(); |
|||
}, |
|||
methods: { |
|||
createAd() { |
|||
var rewardedVideoAd = this.rewardedVideoAd = uni.createRewardedVideoAd(this.adOption); |
|||
rewardedVideoAd.onLoad(() => { |
|||
this.loading = false; |
|||
this.loadError = false; |
|||
console.log('onLoad event') |
|||
}); |
|||
rewardedVideoAd.onClose((res) => { |
|||
this.loading = true; |
|||
// 用户点击了【关闭广告】按钮 |
|||
if (res && res.isEnded) { |
|||
// 正常播放结束 |
|||
console.log("onClose " + res.isEnded); |
|||
} else { |
|||
// 播放中途退出 |
|||
console.log("onClose " + res.isEnded); |
|||
} |
|||
|
|||
setTimeout(() => { |
|||
uni.showToast({ |
|||
title: "激励视频" + (res.isEnded ? "成功" : "未") + "播放完毕", |
|||
duration: 10000, |
|||
position: 'bottom' |
|||
}) |
|||
}, 500) |
|||
}); |
|||
rewardedVideoAd.onError((err) => { |
|||
this.loading = false; |
|||
if (err.code && ERROR_CODE.indexOf(err.code) !== -1) { |
|||
this.loadError = true; |
|||
} |
|||
console.log('onError event', err) |
|||
}); |
|||
this.loading = true; |
|||
}, |
|||
show() { |
|||
const rewardedVideoAd = this.rewardedVideoAd; |
|||
rewardedVideoAd.show().catch(() => { |
|||
rewardedVideoAd.load() |
|||
.then(() => rewardedVideoAd.show()) |
|||
.catch(err => { |
|||
console.log('激励视频 广告显示失败', err) |
|||
uni.showToast({ |
|||
title: err.errMsg || err.message, |
|||
duration: 5000, |
|||
position: 'bottom' |
|||
}) |
|||
}) |
|||
}) |
|||
}, |
|||
reloadAd() { |
|||
this.loading = true; |
|||
this.rewardedVideoAd.load(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.btn { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.ad-tips { |
|||
color: #999; |
|||
padding: 30px 0; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -1,158 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view v-if="imagePath !== ''" class="media-box image"> |
|||
<image class="image" mode="widthFix" :src="imagePath" /> |
|||
</view> |
|||
<button type="primary" class="uni-button" @click="saveImage">拍摄图片并保存到本地</button> |
|||
<view v-if="videoPath !== ''" class="media-box"> |
|||
<video |
|||
id="myVideo" |
|||
:src="videoPath" |
|||
@error="videoErrorCallback" |
|||
enable-danmu |
|||
danmu-btn |
|||
controls |
|||
></video> |
|||
</view> |
|||
<button type="primary" class="uni-button" @click="saveVideo">录制视频并保存到本地</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'saveImage/saveVideo', |
|||
imagePath: '', |
|||
videoPath: '' |
|||
}; |
|||
}, |
|||
onLoad() {}, |
|||
methods: { |
|||
videoErrorCallback: function() { |
|||
uni.showModal({ |
|||
content: '视频加载失败', |
|||
showCancel: false |
|||
}); |
|||
}, |
|||
saveImage() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sourceType: ['camera'], |
|||
success: res => { |
|||
this.imagePath = res.tempFilePaths[0]; |
|||
this.getTempFilePath(res.tempFilePaths[0], 'imageTempPath'); |
|||
}, |
|||
fail: (err) => { |
|||
// #ifdef MP |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
let authStatus = res.authSetting['scope.camera']; |
|||
if (!authStatus) { |
|||
uni.showModal({ |
|||
title: '授权失败', |
|||
content: 'Hello uni-app需要从您的相机获取图片，请在设置界面打开相关权限', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
uni.openSetting() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
// #endif |
|||
} |
|||
}); |
|||
}, |
|||
saveVideo() { |
|||
let _this = this; |
|||
uni.chooseVideo({ |
|||
count: 1, |
|||
sourceType: ['camera'], |
|||
success: res => { |
|||
console.log(res.tempFilePath) |
|||
this.videoPath = res.tempFilePath; |
|||
this.getTempFilePath(res.tempFilePath, 'videoTempPath'); |
|||
}, |
|||
fail: (err) => { |
|||
// #ifdef MP |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
let authStatus = res.authSetting['scope.camera']; |
|||
if (!authStatus) { |
|||
uni.showModal({ |
|||
title: '授权失败', |
|||
content: 'Hello uni-app需要从您的相机获取视频，请在设置界面打开相关权限', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
uni.openSetting() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
// #endif |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
getTempFilePath(url, types) { |
|||
// 如果已经下载本地路径，那么直接储存 |
|||
let obj = { |
|||
filePath: url, |
|||
success: () => { |
|||
console.log('save success'); |
|||
uni.showModal({ |
|||
content: '保存成功', |
|||
showCancel: false |
|||
}); |
|||
uni.hideLoading(); |
|||
}, |
|||
fail: e => { |
|||
uni.hideLoading(); |
|||
uni.showModal({ |
|||
content: '保存失败', |
|||
showCancel: false |
|||
}); |
|||
} |
|||
}; |
|||
uni.showLoading({ |
|||
title: '保存中...' |
|||
}); |
|||
if (types === 'videoTempPath') { |
|||
uni.saveVideoToPhotosAlbum(obj); |
|||
} else { |
|||
uni.saveImageToPhotosAlbum(obj); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.media-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 30rpx 0; |
|||
width: 100%; |
|||
} |
|||
.image { |
|||
height: 400rpx; |
|||
overflow: hidden; |
|||
} |
|||
.image image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
video { |
|||
width: 100%; |
|||
} |
|||
.uni-button { |
|||
margin: 30rpx 0; |
|||
} |
|||
</style> |
|||
@ -1,76 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-title">扫码结果：</view> |
|||
<view class="uni-list" v-if="result"> |
|||
<view class="uni-cell"> |
|||
<view class="scan-result"> |
|||
{{result}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" @click="scan">扫一扫</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import permision from "@/common/permission.js" |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'scanCode', |
|||
result: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
async scan() { |
|||
// #ifdef APP-PLUS |
|||
let status = await this.checkPermission(); |
|||
if (status !== 1) { |
|||
return; |
|||
} |
|||
// #endif |
|||
uni.scanCode({ |
|||
success: (res) => { |
|||
this.result = res.result |
|||
}, |
|||
fail: (err) => { |
|||
// 需要注意的是小程序扫码不需要申请相机权限 |
|||
} |
|||
}); |
|||
} |
|||
// #ifdef APP-PLUS |
|||
, |
|||
async checkPermission(code) { |
|||
let status = permision.isIOS ? await permision.requestIOS('camera') : |
|||
await permision.requestAndroid('android.permission.CAMERA'); |
|||
|
|||
if (status === null || status === 1) { |
|||
status = 1; |
|||
} else { |
|||
uni.showModal({ |
|||
content: "需要相机权限", |
|||
confirmText: "设置", |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
permision.gotoAppSetting(); |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
return status; |
|||
} |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.scan-result { |
|||
min-height: 50rpx; |
|||
line-height: 50rpx; |
|||
} |
|||
</style> |
|||
@ -1,22 +0,0 @@ |
|||
|
|||
describe('pages/API/set-navigation-bar-title/set-navigation-bar-title.vue', () => { |
|||
let page |
|||
beforeAll(async () => { |
|||
// 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
|
|||
page = await program.reLaunch('/pages/API/set-navigation-bar-title/set-navigation-bar-title') |
|||
|
|||
if (process.env.UNI_PLATFORM === "mp-weixin") { |
|||
await page.waitFor(10000) |
|||
} else { |
|||
await page.waitFor(5000) |
|||
} |
|||
|
|||
page = await program.currentPage() |
|||
|
|||
}) |
|||
|
|||
it('set-navigation-bar-title 组件标题', async () => { |
|||
let view = await page.$('.common-page-head-title') |
|||
expect(await view.text()).toBe('nav-default') |
|||
}) |
|||
}) |
|||
@ -1,44 +0,0 @@ |
|||
<template> |
|||
<view class="page"> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-helllo-text"> |
|||
本页标题栏是uni-app的默认配置，开发者可在pages.json里配置文字内容及标题颜色，也可通过api接口将其改变。 |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<button type="default" @click="setText">改变标题栏文字</button> |
|||
<button type="primary" @click="setBg">改变标题栏颜色</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'nav-default', |
|||
hasSetText:false, |
|||
hasSetBg:false |
|||
} |
|||
}, |
|||
methods: { |
|||
setText() { |
|||
this.hasSetText = !this.hasSetText; |
|||
uni.setNavigationBarTitle({ |
|||
title: this.hasSetText ? "Hello uni-app" : "默认导航栏" |
|||
}) |
|||
}, |
|||
setBg() { |
|||
this.hasSetBg = !this.hasSetBg; |
|||
uni.setNavigationBarColor({ |
|||
frontColor: this.hasSetBg ? "#000000" : "#ffffff", |
|||
backgroundColor: this.hasSetBg ? "#F8F8F8" : "#007AFF" |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,293 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-title">分享内容</view> |
|||
<view class="uni-textarea"> |
|||
<textarea class="textarea" v-model="shareText" /> |
|||
</view> |
|||
<view class="uni-title">分享图片：</view> |
|||
<view class="uni-uploader" style="padding:15rpx; background:#FFF;"> |
|||
<view class="uni-uploader__input-box" v-if="!image" @tap="chooseImage"></view> |
|||
<image class="uni-uploader__img" v-if="image" :src="image"></image> |
|||
</view> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<view class="uni-title">分享类型：</view> |
|||
<view> |
|||
<radio-group @change="radioChange"> |
|||
<label class="radio"> |
|||
<radio value="1" checked="true"/>文字 |
|||
</label> |
|||
<label class="radio"> |
|||
<radio value="2" />图片 |
|||
</label> |
|||
<label class="radio"> |
|||
<radio value="0" />图文 |
|||
</label> |
|||
<label class="radio"> |
|||
<radio value="5" />小程序 |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<view class="uni-btn-v uni-common-mt" v-if="providerList.length > 0"> |
|||
<block v-for="(value,index) in providerList" :key="index"> |
|||
<button type="primary" v-if="value" :disabled="isDisableButton(value)" @tap="share(value)">{{value.name}}</button> |
|||
</block> |
|||
</view> |
|||
<!-- #endif --> |
|||
<!-- #ifdef MP || QUICKAPP-WEBVIEW --> |
|||
<view class="uni-btn-v uni-common-mt"> |
|||
<button type="primary" open-type="share">分享</button> |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'share', |
|||
shareText: 'uni-app可以同时发布成原生App、小程序、H5，邀请你一起体验！', |
|||
href:"https://uniapp.dcloud.io", |
|||
image: '', |
|||
shareType:1, |
|||
providerList: [] |
|||
} |
|||
}, |
|||
computed:{ |
|||
isDisableButton() { |
|||
return function(item) { |
|||
if(this.shareType === 0 && item.id === 'qq'){ |
|||
return true; |
|||
} |
|||
if(this.shareType === 5 && item.name !== '分享到微信好友'){ |
|||
return true; |
|||
} |
|||
return false; |
|||
} |
|||
} |
|||
}, |
|||
onShareAppMessage() { |
|||
return { |
|||
title: this.shareText ? this.shareText : "欢迎体验uni-app", |
|||
path: '/pages/tabBar/component/component', |
|||
imageUrl:this.image ? this.image : 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b6304f00-5168-11eb-bd01-97bc1429a9ff.png' |
|||
} |
|||
}, |
|||
onUnload:function(){ |
|||
this.shareText='uni-app可以同时发布成原生App、小程序、H5，邀请你一起体验！', |
|||
this.href = 'https://uniapp.dcloud.io', |
|||
this.image=''; |
|||
}, |
|||
onLoad: function () { |
|||
uni.getProvider({ |
|||
service: 'share', |
|||
success: (e) => { |
|||
console.log('success', e); |
|||
let data = [] |
|||
for (let i = 0; i < e.provider.length; i++) { |
|||
switch (e.provider[i]) { |
|||
case 'weixin': |
|||
data.push({ |
|||
name: '分享到微信好友', |
|||
id: 'weixin', |
|||
sort:0 |
|||
}) |
|||
data.push({ |
|||
name: '分享到微信朋友圈', |
|||
id: 'weixin', |
|||
type:'WXSenceTimeline', |
|||
sort:1 |
|||
}) |
|||
break; |
|||
case 'sinaweibo': |
|||
data.push({ |
|||
name: '分享到新浪微博', |
|||
id: 'sinaweibo', |
|||
sort:2 |
|||
}) |
|||
break; |
|||
case 'qq': |
|||
data.push({ |
|||
name: '分享到QQ', |
|||
id: 'qq', |
|||
sort:3 |
|||
}) |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
} |
|||
this.providerList = data.sort((x,y) => { |
|||
return x.sort - y.sort |
|||
}); |
|||
}, |
|||
fail: (e) => { |
|||
console.log('获取分享通道失败', e); |
|||
uni.showModal({ |
|||
content:'获取分享通道失败', |
|||
showCancel:false |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
async share(e) { |
|||
console.log('分享通道:'+ e.id +'； 分享类型:' + this.shareType); |
|||
|
|||
if(!this.shareText && (this.shareType === 1 || this.shareType === 0)){ |
|||
uni.showModal({ |
|||
content:'分享内容不能为空', |
|||
showCancel:false |
|||
}) |
|||
return; |
|||
} |
|||
|
|||
if(!this.image && (this.shareType === 2 || this.shareType === 0)){ |
|||
uni.showModal({ |
|||
content:'分享图片不能为空', |
|||
showCancel:false |
|||
}) |
|||
return; |
|||
} |
|||
|
|||
let shareOPtions = { |
|||
provider: e.id, |
|||
scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : 'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏 |
|||
type: this.shareType, |
|||
success: (e) => { |
|||
console.log('success', e); |
|||
uni.showModal({ |
|||
content: '已分享', |
|||
showCancel:false |
|||
}) |
|||
}, |
|||
fail: (e) => { |
|||
console.log('fail', e) |
|||
uni.showModal({ |
|||
content: e.errMsg, |
|||
showCancel:false |
|||
}) |
|||
}, |
|||
complete:function(){ |
|||
console.log('分享操作结束!') |
|||
} |
|||
} |
|||
|
|||
switch (this.shareType){ |
|||
case 0: |
|||
shareOPtions.summary = this.shareText; |
|||
shareOPtions.imageUrl = this.image; |
|||
shareOPtions.title = '欢迎体验uniapp'; |
|||
shareOPtions.href = 'https://uniapp.dcloud.io'; |
|||
break; |
|||
case 1: |
|||
shareOPtions.summary = this.shareText; |
|||
break; |
|||
case 2: |
|||
shareOPtions.imageUrl = this.image; |
|||
break; |
|||
case 5: |
|||
shareOPtions.imageUrl = this.image ? this.image : 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b6304f00-5168-11eb-bd01-97bc1429a9ff.png' |
|||
shareOPtions.title = '欢迎体验uniapp'; |
|||
shareOPtions.miniProgram = { |
|||
id:'gh_33446d7f7a26', |
|||
path:'/pages/tabBar/component/component', |
|||
webUrl:'https://uniapp.dcloud.io', |
|||
type:0 |
|||
}; |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
|
|||
if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享，且是ios平台，则压缩图片 |
|||
shareOPtions.imageUrl = await this.compress(); |
|||
} |
|||
if(shareOPtions.type === 1 && shareOPtions.provider === 'qq'){//如果是分享文字到qq，则必须加上href和title |
|||
shareOPtions.href = 'https://uniapp.dcloud.io'; |
|||
shareOPtions.title = '欢迎体验uniapp'; |
|||
} |
|||
uni.share(shareOPtions); |
|||
}, |
|||
radioChange(e){ |
|||
console.log('type:' + e.detail.value); |
|||
this.shareType = parseInt(e.detail.value); |
|||
}, |
|||
chooseImage() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sourceType: ['album', 'camera'], |
|||
sizeType: ['compressed', 'original'], |
|||
success: (res) => { |
|||
this.image = res.tempFilePaths[0]; |
|||
}, |
|||
fail: (err) => { |
|||
// #ifdef MP |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
let authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera']; |
|||
if (!authStatus) { |
|||
uni.showModal({ |
|||
title: '授权失败', |
|||
content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
uni.openSetting() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
// #endif |
|||
} |
|||
}) |
|||
}, |
|||
compress(){//压缩图片 图文分享要求分享图片大小不能超过20Kb |
|||
console.log('开始压缩'); |
|||
let img = this.image; |
|||
return new Promise((res) => { |
|||
var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', '')); |
|||
console.log('after' + localPath); |
|||
// 压缩size |
|||
plus.io.resolveLocalFileSystemURL(localPath, (entry) => { |
|||
entry.file((file) => {// 可通过entry对象操作图片 |
|||
console.log('getFile:' + JSON.stringify(file)); |
|||
if(file.size > 20480) {// 压缩后size 大于20Kb |
|||
plus.zip.compressImage({ |
|||
src: img, |
|||
dst: img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG'), |
|||
width: '10%', |
|||
height: '10%', |
|||
quality: 1, |
|||
overwrite: true |
|||
}, (event) => { |
|||
console.log('success zip****' + event.size); |
|||
let newImg = img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG'); |
|||
res(newImg); |
|||
}, function(error) { |
|||
uni.showModal({ |
|||
content:'分享图片太大,需要请重新选择图片!', |
|||
showCancel:false |
|||
}) |
|||
}); |
|||
} |
|||
}); |
|||
}, (e) => { |
|||
console.log('Resolve file URL failed: ' + e.message); |
|||
uni.showModal({ |
|||
content:'分享图片太大,需要请重新选择图片!', |
|||
showCancel:false |
|||
}) |
|||
}); |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,49 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-btn-v"> |
|||
<button class="btn-load" type="primary" @click="showLoading">显示 loading 提示框</button> |
|||
<!-- #ifndef MP-ALIPAY --> |
|||
<button @click="hideLoading">隐藏 loading 提示框</button> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'loading' |
|||
} |
|||
}, |
|||
methods: { |
|||
showLoading: function() { |
|||
uni.showLoading({ |
|||
title: 'loading' |
|||
}); |
|||
|
|||
// #ifdef MP-ALIPAY |
|||
this._showTimer && clearTimeout(this._showTimer); |
|||
this._showTimer = setTimeout(() => { |
|||
this.hideLoading(); |
|||
}, 3000) |
|||
// #endif |
|||
}, |
|||
hideLoading: function() { |
|||
uni.hideLoading(); |
|||
} |
|||
} |
|||
// #ifdef MP-ALIPAY |
|||
, |
|||
onUnload() { |
|||
this._showTimer && clearTimeout(this._showTimer); |
|||
} |
|||
// #endif |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,141 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" @click="checkIsSupportSoterAuthentication">检查支持的认证方式</button> |
|||
<button type="primary" @click="checkIsSoterEnrolledInDeviceFingerPrint">检查是否录入指纹</button> |
|||
<button type="primary" @click="checkIsSoterEnrolledInDeviceFaceID">检查是否录入FaceID</button> |
|||
<button type="primary" @click="startSoterAuthenticationFingerPrint">开始指纹认证</button> |
|||
<button type="primary" @click="startSoterAuthenticationFaceID">开始FaceID认证</button> |
|||
</view> |
|||
<view style="width: 100%;text-align: center;">{{ result }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '生物认证', |
|||
result: '' |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
checkIsSupportSoterAuthentication() { |
|||
uni.checkIsSupportSoterAuthentication({ |
|||
success(res) { |
|||
uni.showModal({ |
|||
content: '支持的认证方式：' + res.supportMode, |
|||
showCancel: false |
|||
}) |
|||
console.log(res); |
|||
}, |
|||
fail(err) { |
|||
console.log(err); |
|||
} |
|||
}) |
|||
}, |
|||
checkIsSoterEnrolledInDeviceFingerPrint() { |
|||
uni.checkIsSoterEnrolledInDevice({ |
|||
checkAuthMode: 'fingerPrint', |
|||
success(res) { |
|||
if(res.isEnrolled) { |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '已录入指纹' |
|||
}) |
|||
}else { |
|||
uni.showModal({ |
|||
content: '未录入指纹', |
|||
showCancel: false |
|||
}) |
|||
} |
|||
console.log(res); |
|||
}, |
|||
fail(err) { |
|||
uni.showModal({ |
|||
content: '未录入指纹', |
|||
showCancel: false |
|||
}) |
|||
console.log(err); |
|||
} |
|||
}) |
|||
}, |
|||
checkIsSoterEnrolledInDeviceFaceID() { |
|||
uni.checkIsSoterEnrolledInDevice({ |
|||
checkAuthMode: 'facial', |
|||
success(res) { |
|||
if(res.isEnrolled) { |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '已录入FaceID' |
|||
}) |
|||
}else { |
|||
uni.showModal({ |
|||
content: '未录入FaceID', |
|||
showCancel: false |
|||
}) |
|||
} |
|||
console.log(res); |
|||
}, |
|||
fail(err) { |
|||
uni.showModal({ |
|||
content: '未录入FaceID', |
|||
showCancel: false |
|||
}) |
|||
console.log(err); |
|||
} |
|||
}) |
|||
}, |
|||
startSoterAuthenticationFingerPrint() { |
|||
uni.startSoterAuthentication({ |
|||
requestAuthModes: ['fingerPrint'], |
|||
challenge: '123456', |
|||
authContent: '请用指纹解锁', |
|||
success(res) { |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '指纹验证成功' |
|||
}) |
|||
console.log(res); |
|||
}, |
|||
fail(err) { |
|||
uni.showModal({ |
|||
content: '指纹验证失败，errCode：' + err.errCode, |
|||
showCancel: false |
|||
}) |
|||
console.log(err); |
|||
} |
|||
}) |
|||
}, |
|||
startSoterAuthenticationFaceID() { |
|||
uni.startSoterAuthentication({ |
|||
requestAuthModes: ['facial'], |
|||
challenge: '123456', |
|||
authContent: '请用FaceID解锁', |
|||
success(res) { |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: 'FaceID验证成功' |
|||
}) |
|||
console.log(res); |
|||
}, |
|||
fail(err) { |
|||
uni.showModal({ |
|||
content: 'FaceID验证失败，errCode：' + err.errCode, |
|||
showCancel: false |
|||
}) |
|||
console.log(err); |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -1,120 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-btn-v"><button type="primary" @click="openDB">打开数据库test.db</button></view> |
|||
<view class="uni-btn-v"><button type="primary" @click="executeSQL">创建表database及插入数据</button></view> |
|||
<view class="uni-btn-v"><button type="primary" @click="selectSQL">查询表database的数据</button></view> |
|||
<view class="uni-btn-v"><button type="primary" @click="droptable">删除表database</button></view> |
|||
<view class="uni-btn-v"><button type="primary" @click="closeDB">关闭数据库test.db</button></view> |
|||
<view class="uni-btn-v"><button type="primary" @click="isOpenDB">查询是否打开数据库</button></view> |
|||
|
|||
|
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'SQLite' |
|||
}; |
|||
}, |
|||
methods: { |
|||
openDB: function() { |
|||
plus.sqlite.openDatabase({ |
|||
name: 'first', |
|||
path: '_doc/test.db', |
|||
success: function(e) { |
|||
plus.nativeUI.alert('打开数据库test.db成功 '); |
|||
}, |
|||
fail: function(e) { |
|||
plus.nativeUI.alert('打开数据库test.db失败: ' + JSON.stringify(e)); |
|||
} |
|||
}); |
|||
}, |
|||
// 执行SQL语句 |
|||
executeSQL: function() { |
|||
plus.sqlite.executeSql({ |
|||
name: 'first', |
|||
sql: 'create table if not exists database("name" CHAR(110),"sex" CHAR(10),"age" INT(11))', |
|||
success: function(e) { |
|||
plus.sqlite.executeSql({ |
|||
name: 'first', |
|||
sql: "insert into database values('彦','女','7000')", |
|||
success: function(e) { |
|||
plus.nativeUI.alert('创建表table和插入数据成功'); |
|||
}, |
|||
fail: function(e) { |
|||
plus.nativeUI.alert('创建表table成功但插入数据失败: ' + JSON.stringify(e)); |
|||
} |
|||
}); |
|||
}, |
|||
fail: function(e) { |
|||
plus.nativeUI.alert('创建表table失败: ' + JSON.stringify(e)); |
|||
} |
|||
}); |
|||
}, |
|||
// 查询SQL语句 |
|||
selectSQL: function() { |
|||
plus.sqlite.selectSql({ |
|||
name: 'first', |
|||
sql: 'select * from database', |
|||
success: function(e) { |
|||
plus.nativeUI.alert('查询SQL语句成功: ' + JSON.stringify(e)); |
|||
}, |
|||
fail: function(e) { |
|||
plus.nativeUI.alert('查询SQL语句失败: ' + JSON.stringify(e)); |
|||
} |
|||
}); |
|||
}, |
|||
// 删除表 |
|||
droptable: function() { |
|||
plus.sqlite.executeSql({ |
|||
name: 'first', |
|||
sql: 'drop table database', |
|||
success: function(e) { |
|||
plus.nativeUI.alert('删除表database成功'); |
|||
}, |
|||
fail: function(e) { |
|||
plus.nativeUI.alert('删除表database失败: ' + JSON.stringify(e)); |
|||
} |
|||
}); |
|||
}, |
|||
// 关闭数据库 |
|||
closeDB: function() { |
|||
plus.sqlite.closeDatabase({ |
|||
name: 'first', |
|||
success: function(e) { |
|||
plus.nativeUI.alert('关闭数据库成功'); |
|||
}, |
|||
fail: function(e) { |
|||
plus.nativeUI.alert('关闭数据库失败: ' + JSON.stringify(e)); |
|||
} |
|||
}); |
|||
}, |
|||
isOpenDB: function() { |
|||
if ( |
|||
plus.sqlite.isOpenDatabase({ |
|||
name: 'first', |
|||
path: '_doc/test.db' |
|||
}) |
|||
) { |
|||
plus.nativeUI.alert('Opened!'); |
|||
} else { |
|||
plus.nativeUI.alert('Unopened!'); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-btn-v { |
|||
margin: 20rpx 0; |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
@ -1,131 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-common-mt"> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">key</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key" @input="keyChange"/> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">value</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data" @input="dataChange"/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" class="btn-setstorage" @tap="setStorage">存储数据</button> |
|||
<button @tap="getStorage">读取数据</button> |
|||
<button @tap="clearStorage">清理数据</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'get/set/clearStorage', |
|||
key: '', |
|||
data: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
keyChange: function (e) { |
|||
this.key = e.detail.value |
|||
}, |
|||
dataChange: function (e) { |
|||
this.data = e.detail.value |
|||
}, |
|||
getStorage: function () { |
|||
var key = this.key, |
|||
data = this.data; |
|||
if (key.length === 0) { |
|||
uni.showModal({ |
|||
title: '读取数据失败', |
|||
content: "key 不能为空", |
|||
showCancel:false |
|||
}) |
|||
} else { |
|||
uni.getStorage({ |
|||
key: key, |
|||
success: (res) => { |
|||
uni.showModal({ |
|||
title: '读取数据成功', |
|||
content: "data: '" + res.data + "'", |
|||
showCancel:false |
|||
}) |
|||
}, |
|||
fail: () => { |
|||
uni.showModal({ |
|||
title: '读取数据失败', |
|||
content: "找不到 key 对应的数据", |
|||
showCancel:false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
setStorage: function () { |
|||
var key = this.key |
|||
var data = this.data |
|||
if (key.length === 0) { |
|||
uni.showModal({ |
|||
title: '保存数据失败', |
|||
content: 'key 不能为空', |
|||
showCancel:false |
|||
}) |
|||
} else { |
|||
uni.setStorage({ |
|||
key: key, |
|||
data: data, |
|||
success: (res) => { |
|||
uni.showModal({ |
|||
title: '存储数据成功', |
|||
// #ifndef MP-ALIPAY |
|||
content: JSON.stringify(res.errMsg), |
|||
// #endif |
|||
// #ifdef MP-ALIPAY |
|||
content: data, |
|||
// #endif |
|||
showCancel:false |
|||
}) |
|||
}, |
|||
fail: () => { |
|||
uni.showModal({ |
|||
title: '储存数据失败!', |
|||
showCancel:false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
clearStorage: function () { |
|||
uni.clearStorageSync() |
|||
this.key = '', |
|||
this.data = '' |
|||
uni.showModal({ |
|||
title: '清除数据成功', |
|||
content: ' ', |
|||
showCancel:false |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.btn-setstorage { |
|||
background-color: #007aff; |
|||
color: #ffffff; |
|||
} |
|||
</style> |
|||
@ -1,137 +0,0 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<page-head :title="title"></page-head> |
|||
<view class="example"> |
|||
<view class="example-title">从左侧滑出</view> |
|||
<button @click="showDrawer">显示抽屉</button> |
|||
</view> |
|||
<view class="example"> |
|||
<view class="example-title">从上侧竖向滑出</view> |
|||
<button @click="showPopup">显示 弹出层</button> |
|||
</view> |
|||
<view style="width: 100%;"> |
|||
<video v-if="showVideo" id="video" |
|||
@play="playVideo" |
|||
@pause="closeMask" |
|||
:controls="false" |
|||
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v" |
|||
@error="videoErrorCallback" poster="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b1476d40-4e5f-11eb-b997-9918a5dda011.png"></video> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'SubNvue', |
|||
showVideo: false |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.closeMask(); |
|||
|
|||
// 接收 popup 的消息 |
|||
uni.$on('popup-page', (data) => { |
|||
switch(data.type){ |
|||
case 'interactive': |
|||
uni.showModal({ |
|||
title: '来自Popup的消息', |
|||
content: data.info |
|||
}) |
|||
break; |
|||
default: |
|||
uni.showToast({ |
|||
title: data.title, |
|||
}) |
|||
break; |
|||
} |
|||
}) |
|||
// 监听 drawer 消息 |
|||
uni.$on('drawer-page', (data) => { |
|||
uni.showToast({ |
|||
title: '点击了第' + data + '项', |
|||
icon:"none" |
|||
}); |
|||
}) |
|||
}, |
|||
onUnload() { |
|||
uni.$off('popup-page') |
|||
uni.$off('drawer-page') |
|||
}, |
|||
onReady() { |
|||
this.showVideo = true |
|||
}, |
|||
methods: { |
|||
showDrawer() { |
|||
uni.getSubNVueById('drawer').show('slide-in-left', 200); |
|||
}, |
|||
showPopup() { |
|||
// 向 popup 传递消息 |
|||
uni.$emit('page-popup', { |
|||
title: '请阅读软件内容', |
|||
content: 'uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。' |
|||
}); |
|||
const subNVue = uni.getSubNVueById('popup') |
|||
subNVue.show('slide-in-top', 250) |
|||
}, |
|||
videoErrorCallback: function() { |
|||
uni.showModal({ |
|||
content: '视频加载失败', |
|||
showCancel: false |
|||
}) |
|||
}, |
|||
playVideo() { |
|||
let subNVue = uni.getSubNVueById('video_mask') |
|||
subNVue.show('fade-in', 200, () => { |
|||
uni.$emit('play-video', { |
|||
status: 'open', |
|||
}) |
|||
}) |
|||
}, |
|||
closeMask() { |
|||
let subNVue = uni.getSubNVueById('video_mask') |
|||
uni.$emit('close-video', { |
|||
status: 'close', |
|||
}) |
|||
subNVue.hide('fade-out', 200) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
align-content: center; |
|||
height: 100%; |
|||
background-color: #F4F5F6; |
|||
} |
|||
.example { |
|||
padding: 0 10px 10px |
|||
} |
|||
.example-title { |
|||
font-size: 14px; |
|||
line-height: 14px; |
|||
color: #777; |
|||
margin: 40px 2rpx; |
|||
position: relative |
|||
} |
|||
video { |
|||
position: absolute; |
|||
bottom: 30px; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
.example .example-title { |
|||
margin: 40rpx 0 |
|||
} |
|||
button { |
|||
background-color: #f8f8f8; |
|||
} |
|||
.title { |
|||
font-size: 20px; |
|||
text-align: center; |
|||
color: #8f8f94; |
|||
} |
|||
</style> |
|||
@ -1,103 +0,0 @@ |
|||
<template> |
|||
<div class="wrapper"> |
|||
<text class="nav-text">左侧列表</text> |
|||
<list class="list-wrapper"> |
|||
<cell v-for="item in lists" :key="item.id"> |
|||
<div class="text-wrapper" @click="clickitem(item.id)"> |
|||
<text style="font-size: 30rpx; ">{{item.name}}</text> |
|||
<text class="icon"></text> |
|||
</div> |
|||
</cell> |
|||
</list> |
|||
<div style="flex: 1; text-align: center;"> |
|||
<div class="close-drawer" @click="hideDrawer"> |
|||
<text style="font-size: 34rpx; text-align: center;">关闭抽屉</text> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
lists: [], |
|||
} |
|||
}, |
|||
beforeCreate() { |
|||
const domModule = weex.requireModule('dom') |
|||
domModule.addRule('fontFace', { |
|||
fontFamily: "unibtn", |
|||
'src': "url('../../../../static/uni.ttf')" |
|||
}); |
|||
}, |
|||
created() { |
|||
for(let i = 0; i < 5; i++){ |
|||
this.lists.push({ |
|||
id: i, |
|||
name: 'Item' + i, |
|||
}); |
|||
} |
|||
}, |
|||
methods: { |
|||
hideDrawer() { |
|||
uni.getCurrentSubNVue().hide('auto') |
|||
}, |
|||
clickitem(e) { |
|||
uni.$emit('drawer-page', e); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.wrapper { |
|||
flex-direction: column; |
|||
flex: 1; |
|||
text-align: center; |
|||
padding: 60rpx 0rpx 0rpx 20rpx; |
|||
background-color: #F4F5F6; |
|||
} |
|||
.nav-text { |
|||
color: #8f8f94; |
|||
/* #ifndef APP-PLUS-NVUE */ |
|||
margin-bottom: 40px; |
|||
/* #endif */ |
|||
/* #ifdef APP-PLUS-NVUE */ |
|||
margin-bottom: 40rpx; |
|||
/* #endif */ |
|||
} |
|||
.list-wrapper { |
|||
/* #ifdef APP-PLUS-NVUE */ |
|||
height: 450rpx; |
|||
/* #endif */ |
|||
/* #ifndef APP-PLUS-NVUE */ |
|||
height: 450px; |
|||
/* #endif */ |
|||
} |
|||
.text-wrapper { |
|||
justify-content: center; |
|||
border-bottom-style: solid; |
|||
border-bottom-width: 1rpx; |
|||
border-bottom-color: rgba(0,0,0,.2); |
|||
margin-bottom: 35rpx; |
|||
padding-bottom: 15rpx; |
|||
} |
|||
.close-drawer { |
|||
background-color: #f8f8f8; |
|||
width: 300rpx; |
|||
padding: 15rpx; |
|||
border-radius: 20rpx; |
|||
border-style: solid; |
|||
border-width: 1rpx; |
|||
border-color: rgba(0,0,0,.2); |
|||
} |
|||
.icon { |
|||
position: absolute; |
|||
right: 10rpx; |
|||
color: #000000; |
|||
font-family: unibtn; |
|||
font-size: 30rpx; |
|||
font-weight: 400; |
|||
} |
|||
</style> |
|||
@ -1,121 +0,0 @@ |
|||
<template> |
|||
<div class="wrapper"> |
|||
<text class="title">{{title}}</text> |
|||
<scroller class="scroller"> |
|||
<div> |
|||
<text class="content">{{content}}</text> |
|||
</div> |
|||
<div> |
|||
<text style="color: red; font-size: 30rpx;">以下为 Popup 内部滚动示例：</text> |
|||
</div> |
|||
<div class="cell" v-for="(item, index) in lists" @click="handle(item)" :key="index"> |
|||
<text class="text">{{item}}</text> |
|||
</div> |
|||
</scroller> |
|||
<div class="message-wrapper"> |
|||
<text class="send-message" @click="sendMessage">向页面发送消息</text> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '', |
|||
content: '', |
|||
lists: [], |
|||
} |
|||
}, |
|||
created() { |
|||
const vm = this; |
|||
for (let i = 1; i < 20; i++) { |
|||
this.lists.push('item' + i); |
|||
} |
|||
uni.$on('page-popup', (data) => { |
|||
vm.title = data.title; |
|||
vm.content = data.content; |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
uni.$off('drawer-page') |
|||
}, |
|||
methods: { |
|||
sendMessage() { |
|||
const subNVue = uni.getCurrentSubNVue() |
|||
uni.$emit('popup-page', { |
|||
title: '已读完!', |
|||
}) |
|||
}, |
|||
handle(item, index) { |
|||
const subNVue = uni.getCurrentSubNVue() |
|||
uni.$emit('popup-page', { |
|||
type: 'interactive', |
|||
info: item + ' 该元素被点击了!', |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.wrapper { |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
padding: 10rpx 15rpx; |
|||
background-color: #F4F5F6; |
|||
border-radius: 4rpx; |
|||
} |
|||
|
|||
.title { |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
border-bottom-style: solid; |
|||
border-bottom-width: 1rpx; |
|||
border-bottom-color: #CBCBCB; |
|||
flex: 0; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.scroller { |
|||
height: 400rpx; |
|||
padding: 8rpx 15rpx; |
|||
} |
|||
|
|||
.content { |
|||
color: #555555; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.message-wrapper { |
|||
flex: 0; |
|||
border-top-style: solid; |
|||
border-top-width: 1rpx; |
|||
border-top-color: #CBCBCB; |
|||
height: 80rpx; |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.send-message { |
|||
font-size: 30rpx; |
|||
line-height: 80rpx; |
|||
color: #00CE47; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
.cell { |
|||
margin: 10rpx; |
|||
padding: 20rpx 0; |
|||
top: 10rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 10rpx; |
|||
background-color: #5989B9; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
color: white; |
|||
} |
|||
</style> |
|||
@ -1,114 +0,0 @@ |
|||
<template> |
|||
<div class="wrapper"> |
|||
<list class="list"> |
|||
<cell v-for="(item, index) in lists" :key="index" :ref="'item' + index" class="cell"> |
|||
<text class="name">{{item.name}}:</text> |
|||
<text class="content">{{item.content}}</text> |
|||
</cell> |
|||
</list> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
lists: [], |
|||
interval: null, |
|||
yourTexts: [ |
|||
{ |
|||
name: '学员A', |
|||
content: '老师讲的真好', |
|||
}, { |
|||
name: '学员B', |
|||
content: 'uni-app值得学习', |
|||
}, { |
|||
name: '学员C', |
|||
content: '老师，还有实战例子吗？', |
|||
}, { |
|||
name: '学员D', |
|||
content: '老师，请问是不是要先学会vue才能学uni-app？', |
|||
}, { |
|||
name: '学员E', |
|||
content: '受教了，uni-app太牛了', |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
created() { |
|||
const vm = this; |
|||
uni.$on('play-video', (data) => { |
|||
if(data.status === 'open'){ |
|||
this.addItem(); |
|||
}else{ |
|||
this.closeItem(); |
|||
} |
|||
}) |
|||
}, |
|||
beforeDestroy(){ |
|||
uni.$off('play-video') |
|||
this.closeItem() |
|||
}, |
|||
methods: { |
|||
addItem() { |
|||
const vm = this; |
|||
vm.lists = [{ |
|||
name: '学员E', |
|||
content: '受教了，uni-app太牛了', |
|||
}]; |
|||
const dom = weex.requireModule('dom') |
|||
vm.interval = setInterval(() => { |
|||
if(vm.lists.length > 15) { |
|||
vm.lists.unshift(); |
|||
} |
|||
vm.lists.push({ |
|||
name: vm.yourTexts[vm.lists.length%4].name, |
|||
content: vm.yourTexts[vm.lists.length%4].content |
|||
}); |
|||
if(vm.lists.length > 5) { |
|||
vm.$nextTick(() => { |
|||
if(vm.$refs['item' + (vm.lists.length - 1)]){ |
|||
dom.scrollToElement(vm.$refs['item' + (vm.lists.length - 1)][0]); |
|||
} |
|||
}); |
|||
} |
|||
}, 3500); |
|||
}, |
|||
closeItem() { |
|||
if(this.interval) clearInterval(this.interval); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.wrapper { |
|||
position: relative; |
|||
flex: 1; |
|||
background-color: transparent; |
|||
} |
|||
.list { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.cell { |
|||
padding: 10rpx 0; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
} |
|||
.name { |
|||
flex: 0; |
|||
font-size: 20rpx; |
|||
margin-right: 20rpx; |
|||
color: #FF5A5F; |
|||
} |
|||
.content { |
|||
flex: 1; |
|||
font-size: 20rpx; |
|||
color: #F4F5F6; |
|||
} |
|||
</style> |
|||
@ -1,79 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-btn-v"> |
|||
<button type="default" @tap="toast1Tap">点击弹出默认toast</button> |
|||
<button type="default" @tap="toast2Tap">点击弹出设置duration的toast</button> |
|||
<button type="default" @tap="toast3Tap">点击弹出显示loading的toast</button> |
|||
<!-- #ifndef MP-ALIPAY --> |
|||
<button type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<button type="default" @tap="toast5Tap">点击显示无图标的居底toast</button> |
|||
<!-- #endif --> |
|||
<button type="default" @tap="hideToast">点击隐藏toast</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'toast' |
|||
} |
|||
}, |
|||
// #ifdef MP-ALIPAY |
|||
onUnload() { |
|||
this._showTimer && clearTimeout(this._showTimer); |
|||
}, |
|||
// #endif |
|||
methods: { |
|||
toast1Tap: function () { |
|||
uni.showToast({ |
|||
title: "默认" |
|||
}) |
|||
}, |
|||
toast2Tap: function () { |
|||
uni.showToast({ |
|||
title: "duration 3000", |
|||
duration: 3000 |
|||
}) |
|||
}, |
|||
toast3Tap: function () { |
|||
uni.showToast({ |
|||
title: "loading", |
|||
icon: "loading", |
|||
duration: 5000 |
|||
}) |
|||
// #ifdef MP-ALIPAY |
|||
this._showTimer = setTimeout(() => { |
|||
// icon 是 loading 时，showToast 实际执行的是 showLoading |
|||
my.hideLoading() |
|||
// 执行完所有代码再清除定时器 |
|||
clearTimeout(this._showTimer); |
|||
}, 3000) |
|||
// #endif |
|||
|
|||
}, |
|||
toast4Tap: function () { |
|||
uni.showToast({ |
|||
title: "logo", |
|||
image: "../../../static/uni.png" |
|||
}) |
|||
}, |
|||
// #ifdef APP-PLUS |
|||
toast5Tap: function () { |
|||
uni.showToast({ |
|||
title: "显示一段轻提示", |
|||
position:'bottom' |
|||
}) |
|||
}, |
|||
// #endif |
|||
hideToast: function () { |
|||
uni.hideToast() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,95 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="demo"> |
|||
<block v-if="imageSrc"> |
|||
<image :src="imageSrc" class="image" mode="widthFix"></image> |
|||
</block> |
|||
<block v-else> |
|||
<view class="uni-hello-addfile" @click="chooseImage">+ 选择图片</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'uploadFile', |
|||
imageSrc: '' |
|||
} |
|||
}, |
|||
onUnload() { |
|||
this.imageSrc = ''; |
|||
}, |
|||
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.uploadFile({ |
|||
url: 'https://unidemo.dcloud.net.cn/upload', |
|||
filePath: imageSrc, |
|||
fileType: 'image', |
|||
name: 'data', |
|||
success: (res) => { |
|||
console.log('uploadImage success, res is:', res) |
|||
uni.showToast({ |
|||
title: '上传成功', |
|||
icon: 'success', |
|||
duration: 1000 |
|||
}) |
|||
this.imageSrc = imageSrc |
|||
}, |
|||
fail: (err) => { |
|||
console.log('uploadImage fail', err); |
|||
uni.showModal({ |
|||
content: err.errMsg, |
|||
showCancel: false |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
fail: (err) => { |
|||
console.log('chooseImage fail', err) |
|||
// #ifdef MP |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
let authStatus = res.authSetting['scope.album']; |
|||
if (!authStatus) { |
|||
uni.showModal({ |
|||
title: '授权失败', |
|||
content: 'Hello uni-app需要从您的相册获取图片，请在设置界面打开相关权限', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
uni.openSetting() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
// #endif |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.image { |
|||
width: 100%; |
|||
} |
|||
|
|||
.demo { |
|||
background: #FFF; |
|||
padding: 50rpx; |
|||
} |
|||
</style> |
|||
@ -1,59 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<button class="uni-button" type="primary" @click="longshock">长震动</button> |
|||
<button class="uni-button" @click="shortshock">短震动</button> |
|||
|
|||
<view class="uni-tips"> |
|||
<view>Tips</view> |
|||
<view class="uni-tips-text">iOS上只有长震动，没有短震动</view> |
|||
<view class="uni-tips-text">iOS上需要手机设置“打开响铃时震动”或“静音时震动”，否则无法震动</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'vibrateLong/vibrateShort' |
|||
}; |
|||
}, |
|||
onLoad() {}, |
|||
methods: { |
|||
longshock() { |
|||
uni.vibrateLong({ |
|||
success: function() { |
|||
console.log('success'); |
|||
} |
|||
}); |
|||
}, |
|||
shortshock() { |
|||
uni.vibrateShort({ |
|||
success: function() { |
|||
console.log('success'); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-padding-wrap { |
|||
margin-top: 50rpx 0; |
|||
} |
|||
.uni-button { |
|||
margin: 30rpx 0; |
|||
} |
|||
.uni-tips { |
|||
color: #666; |
|||
font-size: 30rpx; |
|||
} |
|||
.uni-tips-text { |
|||
margin-top: 15rpx; |
|||
line-height: 1.2; |
|||
font-size: 24rpx; |
|||
} |
|||
</style> |
|||
@ -1,134 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-common-mt"> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
<view class="uni-label">视频来源</view> |
|||
</view> |
|||
<view class="uni-list-cell-right"> |
|||
<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex"> |
|||
<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- #ifdef APP-PLUS || MP-WEIXIN --> |
|||
<view class="uni-title uni-common-mt uni-common-pl">摄像头位置</view> |
|||
<view class="uni-hello-text camera-tips">注意：部分 Android 手机下由于系统 ROM 不支持无法生效，打开拍摄界面后可操作切换</view> |
|||
<view class="uni-list"> |
|||
<radio-group @change="radioChange"> |
|||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in cameraList" :key="item.value"> |
|||
<radio :value="item.value" :checked="index === cameraIndex">{{item.name}}</radio> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<!-- #endif --> |
|||
<template v-if="!src"> |
|||
<view class="uni-hello-addfile" @tap="chooseVideo">+ 添加视频</view> |
|||
</template> |
|||
<template v-else> |
|||
<video :src="src" class="video"></video> |
|||
</template> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
var sourceType = [ |
|||
['camera'], |
|||
['album'], |
|||
['camera', 'album'] |
|||
] |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'chooseVideo', |
|||
sourceTypeIndex: 2, |
|||
sourceType: ['拍摄', '相册', '拍摄或相册'], |
|||
src: '', |
|||
cameraList: [{ |
|||
value: 'back', |
|||
name: '后置摄像头', |
|||
checked: 'true' |
|||
}, |
|||
{ |
|||
value: 'front', |
|||
name: '前置摄像头' |
|||
}, |
|||
], |
|||
cameraIndex: 0 |
|||
} |
|||
}, |
|||
onUnload() { |
|||
this.src = '', |
|||
this.sourceTypeIndex = 2, |
|||
this.sourceType = ['拍摄', '相册', '拍摄或相册']; |
|||
}, |
|||
methods: { |
|||
radioChange(evt) { |
|||
for (let i = 0; i < this.cameraList.length; i++) { |
|||
if (this.cameraList[i].value === evt.detail.value) { |
|||
this.cameraIndex = i; |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
sourceTypeChange: function(e) { |
|||
this.sourceTypeIndex = parseInt(e.detail.value) |
|||
}, |
|||
chooseVideo: function() { |
|||
uni.chooseVideo({ |
|||
camera: this.cameraList[this.cameraIndex].value, |
|||
sourceType: sourceType[this.sourceTypeIndex], |
|||
success: (res) => { |
|||
this.src = res.tempFilePath |
|||
}, |
|||
fail: (err) => { |
|||
// #ifdef MP |
|||
uni.getSetting({ |
|||
success: (res) => { |
|||
let authStatus = false; |
|||
switch (this.sourceTypeIndex) { |
|||
case 0: |
|||
authStatus = res.authSetting['scope.camera']; |
|||
break; |
|||
case 1: |
|||
authStatus = res.authSetting['scope.album']; |
|||
break; |
|||
case 2: |
|||
authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera']; |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
if (!authStatus) { |
|||
uni.showModal({ |
|||
title: '授权失败', |
|||
content: 'Hello uni-app需要从您的相机或相册获取视频，请在设置界面打开相关权限', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
uni.openSetting() |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
// #endif |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.video { |
|||
width: 100%; |
|||
} |
|||
|
|||
.camera-tips { |
|||
padding: 10rpx 30rpx; |
|||
} |
|||
</style> |
|||
@ -1,243 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<block v-if="!recording && !playing && !hasRecord"> |
|||
<view class="page-body-time"> |
|||
<text class="time-big">{{formatedRecordTime}}</text> |
|||
</view> |
|||
<view class="page-body-buttons"> |
|||
<view class="page-body-button"></view> |
|||
<view class="page-body-button" @click="startRecord"> |
|||
<image src="../../../static/record.png"></image> |
|||
</view> |
|||
<view class="page-body-button"></view> |
|||
</view> |
|||
</block> |
|||
<block v-if="recording === true"> |
|||
<view class="page-body-time"> |
|||
<text class="time-big">{{formatedRecordTime}}</text> |
|||
</view> |
|||
<view class="page-body-buttons"> |
|||
<view class="page-body-button"></view> |
|||
<view class="page-body-button" @click="stopRecord"> |
|||
<view class="button-stop-record"></view> |
|||
</view> |
|||
<view class="page-body-button"></view> |
|||
</view> |
|||
</block> |
|||
<block v-if="hasRecord === true && playing === false"> |
|||
<view class="page-body-time"> |
|||
<text class="time-big">{{formatedPlayTime}}</text> |
|||
<text class="time-small">{{formatedRecordTime}}</text> |
|||
</view> |
|||
<view class="page-body-buttons"> |
|||
<view class="page-body-button" @click="playVoice"> |
|||
<image src="../../../static/play.png"></image> |
|||
</view> |
|||
<view class="page-body-button" @click="clear"> |
|||
<image src="../../../static/trash.png"></image> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<block v-if="hasRecord === true && playing === true"> |
|||
<view class="page-body-time"> |
|||
<text class="time-big">{{formatedPlayTime}}</text> |
|||
<text class="time-small">{{formatedRecordTime}}</text> |
|||
</view> |
|||
<view class="page-body-buttons"> |
|||
<view class="page-body-button" @click="stopVoice"> |
|||
<image src="../../../static/stop.png"></image> |
|||
</view> |
|||
<view class="page-body-button" @click="clear"> |
|||
<image src="../../../static/trash.png"></image> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
// #ifdef APP-PLUS |
|||
import permision from "@/common/permission.js" |
|||
// #endif |
|||
import * as util from '../../../common/util.js' |
|||
var playTimeInterval = null; |
|||
var recordTimeInterval = null; |
|||
var recorderManager = null; |
|||
var music = null; |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'start/stopRecord、play/stopVoice', |
|||
recording: false, //录音中 |
|||
playing: false, //播放中 |
|||
hasRecord: false, //是否有了一个 |
|||
tempFilePath: '', |
|||
recordTime: 0, |
|||
playTime: 0, |
|||
formatedRecordTime: '00:00:00', //录音的总时间 |
|||
formatedPlayTime: '00:00:00' //播放录音的当前时间 |
|||
} |
|||
}, |
|||
onUnload: function() { |
|||
this.end(); |
|||
}, |
|||
onLoad: function() { |
|||
music = uni.createInnerAudioContext(); |
|||
music.onEnded(() => { |
|||
clearInterval(playTimeInterval) |
|||
var playTime = 0 |
|||
console.log('play voice finished') |
|||
this.playing = false; |
|||
this.formatedPlayTime = util.formatTime(playTime); |
|||
this.playTime = playTime; |
|||
}); |
|||
recorderManager = uni.getRecorderManager(); |
|||
recorderManager.onStart(() => { |
|||
console.log('recorder start'); |
|||
|
|||
this.recording = true; |
|||
recordTimeInterval = setInterval(() => { |
|||
this.recordTime += 1; |
|||
this.formatedRecordTime = util.formatTime(this.recordTime); |
|||
}, 1000) |
|||
}); |
|||
recorderManager.onStop((res) => { |
|||
console.log('on stop'); |
|||
music.src = res.tempFilePath; |
|||
|
|||
this.hasRecord = true; |
|||
this.recording = false; |
|||
}); |
|||
recorderManager.onError(() => { |
|||
console.log('recorder onError'); |
|||
}); |
|||
}, |
|||
methods: { |
|||
async startRecord() { //开始录音 |
|||
// #ifdef APP-PLUS |
|||
let status = await this.checkPermission(); |
|||
if (status !== 1) { |
|||
return; |
|||
} |
|||
// #endif |
|||
|
|||
// TODO ios 在没有请求过权限之前无法得知是否有相关权限，这种状态下需要直接调用录音，但没有状态或回调判断用户拒绝 |
|||
recorderManager.start({ |
|||
format: 'mp3' |
|||
}); |
|||
}, |
|||
stopRecord() { //停止录音 |
|||
recorderManager.stop(); |
|||
clearInterval(recordTimeInterval); |
|||
}, |
|||
playVoice() { |
|||
console.log('play voice'); |
|||
this.playing = true; |
|||
playTimeInterval = setInterval(() => { |
|||
this.playTime += 1; |
|||
this.formatedPlayTime = util.formatTime(this.playTime); |
|||
}, 1000) |
|||
music.play(); |
|||
}, |
|||
stopVoice() { |
|||
clearInterval(playTimeInterval) |
|||
this.playing = false; |
|||
this.formatedPlayTime = util.formatTime(0); |
|||
this.playTime = 0; |
|||
music.stop(); |
|||
}, |
|||
end() { |
|||
music.stop(); |
|||
recorderManager.stop(); |
|||
clearInterval(recordTimeInterval) |
|||
clearInterval(playTimeInterval); |
|||
this.recording = false, this.playing = false, this.hasRecord = false; |
|||
this.playTime = 0, this.recordTime = 0; |
|||
this.formatedRecordTime = "00:00:00", this.formatedRecordTime = "00:00:00"; |
|||
}, |
|||
clear() { |
|||
this.end(); |
|||
} |
|||
// #ifdef APP-PLUS |
|||
, |
|||
async checkPermission() { |
|||
let status = permision.isIOS ? await permision.requestIOS('record') : |
|||
await permision.requestAndroid('android.permission.RECORD_AUDIO'); |
|||
|
|||
if (status === null || status === 1) { |
|||
status = 1; |
|||
} else if (status === 2) { |
|||
uni.showModal({ |
|||
content: "系统麦克风已关闭", |
|||
confirmText: "确定", |
|||
showCancel: false, |
|||
success: function(res) { |
|||
} |
|||
}) |
|||
} else { |
|||
uni.showModal({ |
|||
content: "需要麦克风权限", |
|||
confirmText: "设置", |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
permision.gotoAppSetting(); |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
return status; |
|||
} |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
image { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.page-body-wrapper { |
|||
justify-content: space-between; |
|||
flex-grow: 1; |
|||
margin-bottom: 300rpx; |
|||
} |
|||
|
|||
.page-body-time { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.time-big { |
|||
font-size: 60rpx; |
|||
margin: 20rpx; |
|||
} |
|||
|
|||
.time-small { |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.page-body-buttons { |
|||
margin-top: 60rpx; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.page-body-button { |
|||
width: 250rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.button-stop-record { |
|||
width: 110rpx; |
|||
height: 110rpx; |
|||
border: 20rpx solid #fff; |
|||
background-color: #f55c23; |
|||
border-radius: 130rpx; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -1,160 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head title="websocket通讯示例"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-btn-v"> |
|||
<view class="websocket-msg">{{showMsg}}</view> |
|||
<button type="primary" @click="connect">连接websocket服务</button> |
|||
<button v-show="connected" type="primary" @click="send">发送一条消息</button> |
|||
<button type="primary" @click="close">断开websocket服务</button> |
|||
<view class="websocket-tips">发送消息后会收到一条服务器返回的消息（与发送的消息内容一致）</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
let platform = uni.getSystemInfoSync().platform |
|||
export default { |
|||
data() { |
|||
return { |
|||
connected: false, |
|||
connecting: false, |
|||
msg: false, |
|||
roomId: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
showMsg() { |
|||
if (this.connected) { |
|||
if (this.msg) { |
|||
return '收到消息：' + this.msg |
|||
} else { |
|||
return '等待接收消息' |
|||
} |
|||
} else { |
|||
return '尚未连接' |
|||
} |
|||
} |
|||
}, |
|||
onUnload() { |
|||
uni.closeSocket() |
|||
uni.hideLoading() |
|||
}, |
|||
methods: { |
|||
connect() { |
|||
if (this.connected || this.connecting) { |
|||
uni.showModal({ |
|||
content: '正在连接或者已经连接，请勿重复连接', |
|||
showCancel: false |
|||
}) |
|||
return false |
|||
} |
|||
this.connecting = true |
|||
uni.showLoading({ |
|||
title: '连接中...' |
|||
}) |
|||
uni.connectSocket({ |
|||
url: 'wss://echo.websocket.org', |
|||
data() { |
|||
return { |
|||
msg: 'Hello' |
|||
} |
|||
}, |
|||
// #ifdef MP |
|||
header: { |
|||
'content-type': 'application/json' |
|||
}, |
|||
// #endif |
|||
// #ifdef MP-WEIXIN |
|||
method: 'GET', |
|||
// #endif |
|||
success(res) { |
|||
// 这里是接口调用成功的回调，不是连接成功的回调，请注意 |
|||
}, |
|||
fail(err) { |
|||
// 这里是接口调用失败的回调，不是连接失败的回调，请注意 |
|||
} |
|||
}) |
|||
uni.onSocketOpen((res) => { |
|||
this.connecting = false |
|||
this.connected = true |
|||
uni.hideLoading() |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '连接成功' |
|||
}) |
|||
console.log('onOpen', res); |
|||
}) |
|||
uni.onSocketError((err) => { |
|||
this.connecting = false |
|||
this.connected = false |
|||
uni.hideLoading() |
|||
uni.showModal({ |
|||
content: '连接失败，可能是websocket服务不可用，请稍后再试', |
|||
showCancel: false |
|||
}) |
|||
console.log('onError', err); |
|||
}) |
|||
uni.onSocketMessage((res) => { |
|||
this.msg = res.data |
|||
console.log('onMessage', res) |
|||
}) |
|||
uni.onSocketClose((res) => { |
|||
this.connected = false |
|||
this.startRecive = false |
|||
this.msg = false |
|||
console.log('onClose', res) |
|||
}) |
|||
}, |
|||
send() { |
|||
uni.sendSocketMessage({ |
|||
data: 'from ' + platform + ' : ' + parseInt(Math.random() * 10000).toString(), |
|||
success(res) { |
|||
console.log(res); |
|||
}, |
|||
fail(err) { |
|||
console.log(err); |
|||
} |
|||
}) |
|||
}, |
|||
close() { |
|||
uni.closeSocket() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-btn-v { |
|||
padding: 10rpx 0; |
|||
} |
|||
|
|||
.uni-btn-v button { |
|||
margin: 20rpx 0; |
|||
} |
|||
|
|||
.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-tips{ |
|||
padding: 40px 0px; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
line-height: 24px; |
|||
color: #666666; |
|||
} |
|||
</style> |
|||
@ -1,160 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head title="websocket通讯示例"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-btn-v"> |
|||
<view class="websocket-msg">{{showMsg}}</view> |
|||
<button type="primary" @click="connect">连接websocket服务</button> |
|||
<button v-show="connected" type="primary" @click="send">发送一条消息</button> |
|||
<button type="primary" @click="close">断开websocket服务</button> |
|||
<view class="websocket-tips">发送消息后会收到一条服务器返回的消息（与发送的消息内容一致）</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
let platform = uni.getSystemInfoSync().platform |
|||
export default { |
|||
data() { |
|||
return { |
|||
connected: false, |
|||
connecting: false, |
|||
socketTask: false, |
|||
msg: false, |
|||
} |
|||
}, |
|||
computed: { |
|||
showMsg() { |
|||
if (this.connected) { |
|||
if (this.msg) { |
|||
return '收到消息：' + this.msg |
|||
} else { |
|||
return '等待接收消息' |
|||
} |
|||
} else { |
|||
return '尚未连接' |
|||
} |
|||
} |
|||
}, |
|||
onUnload() { |
|||
uni.hideLoading() |
|||
if (this.socketTask && this.socketTask.close) { |
|||
this.socketTask.close() |
|||
} |
|||
}, |
|||
methods: { |
|||
connect() { |
|||
if (this.connected || this.connecting) { |
|||
uni.showModal({ |
|||
content: '正在连接或者已经连接，请勿重复连接', |
|||
showCancel: false |
|||
}) |
|||
return false |
|||
} |
|||
this.connecting = true |
|||
uni.showLoading({ |
|||
title: '连接中...' |
|||
}) |
|||
this.socketTask = uni.connectSocket({ |
|||
url: 'wss://echo.websocket.org', |
|||
data() { |
|||
return { |
|||
msg: 'Hello' |
|||
} |
|||
}, |
|||
// #ifdef MP |
|||
header: { |
|||
'content-type': 'application/json' |
|||
}, |
|||
// #endif |
|||
// #ifdef MP-WEIXIN |
|||
method: 'GET', |
|||
// #endif |
|||
success(res) { |
|||
// 这里是接口调用成功的回调，不是连接成功的回调，请注意 |
|||
}, |
|||
fail(err) { |
|||
// 这里是接口调用失败的回调，不是连接失败的回调，请注意 |
|||
} |
|||
}) |
|||
console.log(this.socketTask); |
|||
this.socketTask.onOpen((res) => { |
|||
this.connecting = false |
|||
this.connected = true |
|||
uni.hideLoading() |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '连接成功' |
|||
}) |
|||
console.log('onOpen', res); |
|||
}) |
|||
this.socketTask.onError((err) => { |
|||
this.connecting = false |
|||
this.connected = false |
|||
uni.hideLoading() |
|||
uni.showModal({ |
|||
content: '连接失败，可能是websocket服务不可用，请稍后再试', |
|||
showCancel: false |
|||
}) |
|||
console.log('onError', err); |
|||
}) |
|||
this.socketTask.onMessage((res) => { |
|||
this.msg = res.data |
|||
console.log('onMessage', res) |
|||
}) |
|||
this.socketTask.onClose((res) => { |
|||
this.connected = false |
|||
this.startRecive = false |
|||
this.socketTask = false |
|||
this.msg = false |
|||
console.log('onClose', res) |
|||
}) |
|||
console.log('task', this.socketTask) |
|||
}, |
|||
send() { |
|||
this.socketTask.send({ |
|||
data: 'from ' + platform + ' : ' + parseInt(Math.random() * 10000).toString(), |
|||
success(res) { |
|||
console.log(res); |
|||
}, |
|||
fail(err) { |
|||
console.log(err); |
|||
} |
|||
}) |
|||
}, |
|||
close() { |
|||
if (this.socketTask && this.socketTask.close) { |
|||
this.socketTask.close() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
.uni-btn-v { |
|||
padding: 10rpx 0; |
|||
} |
|||
|
|||
.uni-btn-v button { |
|||
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> |
|||
@ -1,217 +0,0 @@ |
|||
<template> |
|||
<view class="about"> |
|||
<view class="content"> |
|||
<view class="qrcode"> |
|||
<image src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/app_download.png" @longtap="save"></image> |
|||
<text class="tip">扫码体验uni-app</text> |
|||
</view> |
|||
<view class="desc"> |
|||
<text class="code">uni-app</text> |
|||
是一个使用 <text class="code">Vue.js</text> 开发跨平台应用的前端框架。 |
|||
</view> |
|||
<view class="source"> |
|||
<view class="title">本示例源码获取方式：</view> |
|||
<view class="source-list"> |
|||
<view class="source-cell"> |
|||
<text space="nbsp">1. </text> |
|||
<text>下载 HBuilderX，新建 uni-app 项目时选择 <text class="code">Hello uni-app</text> 模板。</text> |
|||
</view> |
|||
<view class="source-cell"> |
|||
<text space="nbsp">2. </text> |
|||
<u-link class="link" :href="'https://github.com/dcloudio/hello-uniapp'" :text="'https://github.com/dcloudio/hello-uniapp'"></u-link> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<button type="primary" @click="share">分享</button> |
|||
<!-- #endif --> |
|||
</view> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<view class="version"> |
|||
当前版本：{{version}} |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
providerList: [], |
|||
version: '' |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// #ifdef APP-PLUS |
|||
this.version = plus.runtime.version; |
|||
uni.getProvider({ |
|||
service: 'share', |
|||
success: (result) => { |
|||
const data = []; |
|||
for (let i = 0; i < result.provider.length; i++) { |
|||
switch (result.provider[i]) { |
|||
case 'weixin': |
|||
data.push({ |
|||
name: '分享到微信好友', |
|||
id: 'weixin' |
|||
}); |
|||
data.push({ |
|||
name: '分享到微信朋友圈', |
|||
id: 'weixin', |
|||
type: 'WXSenceTimeline' |
|||
}); |
|||
break; |
|||
case 'qq': |
|||
data.push({ |
|||
name: '分享到QQ', |
|||
id: 'qq' |
|||
}); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
} |
|||
this.providerList = data; |
|||
}, |
|||
fail: (error) => { |
|||
console.log('获取分享通道失败' + JSON.stringify(error)); |
|||
} |
|||
}); |
|||
// #endif |
|||
}, |
|||
methods: { |
|||
// #ifdef APP-PLUS |
|||
save() { |
|||
uni.showActionSheet({ |
|||
itemList: ['保存图片到相册'], |
|||
success: () => { |
|||
plus.gallery.save('https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/app_download.png', function() { |
|||
uni.showToast({ |
|||
title: '保存成功', |
|||
icon: 'none' |
|||
}); |
|||
}, function() { |
|||
uni.showToast({ |
|||
title: '保存失败，请重试！', |
|||
icon: 'none' |
|||
}); |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
share(e) { |
|||
if (this.providerList.length === 0) { |
|||
uni.showModal({ |
|||
title: '当前环境无分享渠道!', |
|||
showCancel: false |
|||
}); |
|||
return; |
|||
} |
|||
let itemList = this.providerList.map(function(value) { |
|||
return value.name; |
|||
}) |
|||
uni.showActionSheet({ |
|||
itemList: itemList, |
|||
success: (res) => { |
|||
let provider = this.providerList[res.tapIndex].id; |
|||
uni.share({ |
|||
provider: provider, |
|||
scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ? |
|||
'WXSenceTimeline' : "WXSceneSession", |
|||
type: (provider === "qq") ? 1 : 0, |
|||
title: '欢迎体验uni-app', |
|||
summary: 'uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架', |
|||
imageUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b09e38e0-5168-11eb-b680-7980c8a877b8.jpg', |
|||
href: "https://m3w.cn/uniapp", |
|||
success: (res) => { |
|||
console.log("success:" + JSON.stringify(res)); |
|||
}, |
|||
fail: (e) => { |
|||
uni.showModal({ |
|||
content: e.errMsg, |
|||
showCancel: false |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page, |
|||
view { |
|||
display: flex; |
|||
} |
|||
|
|||
page { |
|||
min-height: 100%; |
|||
background-color: #FFFFFF; |
|||
} |
|||
|
|||
image { |
|||
width: 360rpx; |
|||
height: 360rpx; |
|||
} |
|||
|
|||
.about { |
|||
flex-direction: column; |
|||
flex: 1; |
|||
} |
|||
|
|||
.content { |
|||
flex: 1; |
|||
padding: 30rpx; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.qrcode { |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.qrcode .tip { |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.desc { |
|||
margin-top: 30rpx; |
|||
display: block; |
|||
} |
|||
|
|||
.code { |
|||
color: #e96900; |
|||
background-color: #f8f8f8; |
|||
} |
|||
|
|||
button { |
|||
width: 100%; |
|||
margin-top: 40rpx; |
|||
} |
|||
|
|||
.version { |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
justify-content: center; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.source { |
|||
margin-top: 30rpx; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.source-list { |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.link { |
|||
color: #007AFF; |
|||
} |
|||
</style> |
|||
@ -1,96 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="ad-view"> |
|||
<!-- #ifdef MP-WEIXIN --> |
|||
<ad :unit-id="unitId" type="feed" @load="adload" @error="aderror"/> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<ad adpid="1111111111" @load="adload" @error="aderror"/> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<view class="ad-tips" v-if="!isLoad"> |
|||
<text>{{adMessage}}</text> |
|||
</view> |
|||
<!-- #endif --> |
|||
<!-- #ifndef APP-PLUS --> |
|||
<view class="ad-tips"> |
|||
<text>小程序端的广告ID由小程序平台提供</text> |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
<view class="tips"> |
|||
<text class="tips-text">本示例页面仅演示ad组件。另点此可体验</text><text class="tips-hl" @click="gotoapi">激励视频API</text><text class="tips-text">。</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'AD组件', |
|||
unitId: '', |
|||
isLoad: false, |
|||
adMessage: "广告加载中..." |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// #ifdef MP-WEIXIN |
|||
this.unitId = ''; |
|||
// #endif |
|||
// #ifdef MP-TOUTIAO |
|||
this.unitId = '' |
|||
// #endif |
|||
// #ifdef MP-QQ |
|||
this.unitId = '' |
|||
// #endif |
|||
}, |
|||
methods: { |
|||
adload() { |
|||
this.isLoad = true; |
|||
}, |
|||
aderror(e) { |
|||
this.adMessage = e.detail.errMsg; |
|||
}, |
|||
gotoapi() { |
|||
uni.navigateTo({ |
|||
url: "/pages/API/rewarded-video-ad/rewarded-video-ad" |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
background-color: #DBDBDB; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.ad-view { |
|||
background-color: #FFFFFF; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.ad-tips { |
|||
color: #999; |
|||
padding: 30px 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.tips { |
|||
margin-top: 30px; |
|||
text-align: center; |
|||
line-height: 42px; |
|||
} |
|||
|
|||
.tips-text { |
|||
color: #444; |
|||
} |
|||
|
|||
.tips-hl { |
|||
color: #007AFF; |
|||
margin-left: 1px; |
|||
} |
|||
</style> |
|||
@ -1,29 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head title="audio"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-center"> |
|||
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" |
|||
:action="audioAction" controls></audio> |
|||
<view class="">audio组件不再维护，建议使用能力更强的uni.createInnerAudioContext()</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
current: { |
|||
poster: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c517b410-5184-11eb-b997-9918a5dda011.jpeg', |
|||
name: '致爱丽丝', |
|||
author: '暂无', |
|||
src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3', |
|||
}, |
|||
audioAction: { |
|||
method: 'pause' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,81 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<button type="primary">页面主操作 Normal</button> |
|||
<button type="primary" :loading="loading">页面主操作 Loading</button> |
|||
<button type="primary" disabled="true">页面主操作 Disabled</button> |
|||
|
|||
<button type="default">页面次要操作 Normal</button> |
|||
<button type="default" disabled="true">页面次要操作 Disabled</button> |
|||
|
|||
<button type="warn">警告类操作 Normal</button> |
|||
<button type="warn" disabled="true">警告类操作 Disabled</button> |
|||
|
|||
<view class="button-sp-area"> |
|||
<button type="primary" plain="true">按钮</button> |
|||
<button type="primary" disabled="true" plain="true">不可点击的按钮</button> |
|||
|
|||
<button type="default" plain="true">按钮</button> |
|||
<button type="default" disabled="true" plain="true">按钮</button> |
|||
|
|||
<button class="mini-btn" type="primary" size="mini">按钮</button> |
|||
<button class="mini-btn" type="default" size="mini">按钮</button> |
|||
<button class="mini-btn" type="warn" size="mini">按钮</button> |
|||
</view> |
|||
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-JD --> |
|||
<button open-type="launchApp" app-parameter="uni-app" @error="openTypeError">打开APP</button> |
|||
<button open-type="feedback">意见反馈</button> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'button', |
|||
loading: false |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this._timer = null; |
|||
}, |
|||
onShow() { |
|||
this.clearTimer(); |
|||
this._timer = setTimeout(() => { |
|||
this.loading = true; |
|||
}, 300) |
|||
}, |
|||
onUnload() { |
|||
this.clearTimer(); |
|||
this.loading = false; |
|||
}, |
|||
methods: { |
|||
openTypeError(error) { |
|||
console.error('open-type error:', error); |
|||
}, |
|||
clearTimer() { |
|||
if (this._timer != null) { |
|||
clearTimeout(this._timer); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
button { |
|||
margin-top: 30rpx; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.button-sp-area { |
|||
margin: 0 auto; |
|||
width: 60%; |
|||
} |
|||
|
|||
.mini-btn { |
|||
margin-right: 10rpx; |
|||
} |
|||
</style> |
|||
@ -1,263 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="page-body"> |
|||
<view class="page-body-wrapper"> |
|||
<!-- #ifdef APP-PLUS || H5 --> |
|||
<canvas canvas-id="canvas" class="canvas" :start="startStatus" :change:start="animate.start" |
|||
:data-width="canvasWidth" :data-height="canvasWidth"></canvas> |
|||
<!-- #endif --> |
|||
<!-- #ifndef APP-PLUS || H5 --> |
|||
<canvas canvas-id="canvas" id="canvas" class="canvas"></canvas> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script module="animate" lang="renderjs"> |
|||
function Ball({ |
|||
x, |
|||
y, |
|||
vx, |
|||
vy, |
|||
canvasWidth, |
|||
canvasHeight, |
|||
ctx |
|||
}) { |
|||
this.canvasWidth = canvasWidth |
|||
this.canvasHeight = canvasHeight |
|||
this.ctx = ctx |
|||
this.x = x |
|||
this.y = y |
|||
this.vx = vx |
|||
this.vy = vy |
|||
this.radius = 5 |
|||
} |
|||
|
|||
Ball.prototype.draw = function() { |
|||
this.ctx.beginPath() |
|||
this.ctx.fillStyle = '#007AFF' |
|||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI) |
|||
this.ctx.closePath() |
|||
this.ctx.fill() |
|||
} |
|||
|
|||
Ball.prototype.move = function() { |
|||
this.x += this.vx |
|||
this.y += this.vy |
|||
// 回到中心 |
|||
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) > |
|||
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) { |
|||
// this.x = this.canvasWidth / 2 |
|||
// this.y = this.canvasHeight / 2 |
|||
// } |
|||
|
|||
// 边框反弹 |
|||
if (this.x < this.radius) { |
|||
this.vx = Math.abs(this.vx) |
|||
return |
|||
} |
|||
if (this.x > this.canvasWidth - this.radius) { |
|||
this.vx = -Math.abs(this.vx) |
|||
} |
|||
if (this.y < this.radius) { |
|||
this.vy = Math.abs(this.vy) |
|||
return |
|||
} |
|||
if (this.y > this.canvasWidth - this.radius) { |
|||
this.vy = -Math.abs(this.vy) |
|||
} |
|||
} |
|||
|
|||
function getDistance(x, y) { |
|||
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5) |
|||
} |
|||
|
|||
export default { |
|||
methods: { |
|||
start(newVal, oldVal, owner, ins) { |
|||
let canvasWidth = ins.getDataset().width, |
|||
canvasHeight = ins.getDataset().height, |
|||
canvasEle = document.querySelectorAll('.canvas>canvas')[0], |
|||
ctx = canvasEle.getContext('2d'), |
|||
speed = 3, |
|||
ballList = [], |
|||
layer = 3, |
|||
ballInlayer = 20 |
|||
for (let i = 0; i < layer; i++) { |
|||
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i |
|||
for (let j = 0; j < ballInlayer; j++) { |
|||
let deg = j * 2 * Math.PI / ballInlayer, |
|||
sin = Math.sin(deg), |
|||
cos = Math.cos(deg), |
|||
x = radius * cos + canvasWidth / 2, |
|||
y = radius * sin + canvasHeight / 2, |
|||
vx = speed * cos, |
|||
vy = speed * sin |
|||
ballList.push(new Ball({ |
|||
x, |
|||
y, |
|||
vx, |
|||
vy, |
|||
canvasWidth, |
|||
canvasHeight, |
|||
ctx, |
|||
radius: 5 |
|||
})) |
|||
} |
|||
} |
|||
|
|||
function animate(ballList) { |
|||
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height) |
|||
ballList.forEach(function(item) { |
|||
item.move() |
|||
item.draw() |
|||
}) |
|||
requestAnimationFrame(function() { |
|||
animate(ballList) |
|||
}) |
|||
} |
|||
animate(ballList) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<script> |
|||
// #ifndef APP-PLUS || H5 |
|||
|
|||
let ctx = null, |
|||
interval = null; |
|||
|
|||
function Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx) { |
|||
this.canvasWidth = canvasWidth |
|||
this.canvasHeight = canvasHeight |
|||
this.ctx = ctx |
|||
this.x = x |
|||
this.y = y |
|||
this.vx = vx |
|||
this.vy = vy |
|||
this.radius = 5 |
|||
} |
|||
|
|||
Ball.prototype.draw = function() { |
|||
this.ctx.setFillStyle('#007AFF') |
|||
this.ctx.beginPath() |
|||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI) |
|||
this.ctx.closePath() |
|||
this.ctx.fill() |
|||
} |
|||
|
|||
Ball.prototype.move = function() { |
|||
this.x += this.vx |
|||
this.y += this.vy |
|||
// 回到中心 |
|||
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) > |
|||
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) { |
|||
// this.x = this.canvasWidth / 2 |
|||
// this.y = this.canvasHeight / 2 |
|||
// } |
|||
|
|||
// 边框反弹 |
|||
if (this.x < this.radius) { |
|||
this.vx = Math.abs(this.vx) |
|||
return |
|||
} |
|||
if (this.x > this.canvasWidth - this.radius) { |
|||
this.vx = -Math.abs(this.vx) |
|||
} |
|||
if (this.y < this.radius) { |
|||
this.vy = Math.abs(this.vy) |
|||
return |
|||
} |
|||
if (this.y > this.canvasWidth - this.radius) { |
|||
this.vy = -Math.abs(this.vy) |
|||
} |
|||
} |
|||
|
|||
function getDistance(x, y) { |
|||
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5) |
|||
} |
|||
|
|||
// #endif |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'canvas', |
|||
canvasWidth: 0, |
|||
startStatus: false, |
|||
ballList: [] |
|||
} |
|||
}, |
|||
onReady: function() { |
|||
this.$nextTick(() => { |
|||
uni.createSelectorQuery().select(".canvas").boundingClientRect(data => { |
|||
this.canvasWidth = data.width |
|||
// #ifdef APP-PLUS || H5 |
|||
this.startStatus = true |
|||
// #endif |
|||
// #ifndef APP-PLUS || H5 |
|||
ctx = uni.createCanvasContext('canvas') |
|||
this.drawBall() |
|||
// #endif |
|||
}).exec() |
|||
}) |
|||
}, |
|||
// #ifndef APP-PLUS || H5 |
|||
onUnload: function() { |
|||
clearInterval(interval); |
|||
}, |
|||
methods: { |
|||
drawBall: function() { |
|||
let canvasWidth = this.canvasWidth, |
|||
canvasHeight = this.canvasWidth, |
|||
speed = 3, |
|||
ballList = [], |
|||
layer = 3, |
|||
ballInlayer = 20 |
|||
for (let i = 0; i < layer; i++) { |
|||
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i |
|||
for (let j = 0; j < ballInlayer; j++) { |
|||
let deg = j * 2 * Math.PI / ballInlayer, |
|||
sin = Math.sin(deg), |
|||
cos = Math.cos(deg), |
|||
x = radius * cos + canvasWidth / 2, |
|||
y = radius * sin + canvasHeight / 2, |
|||
vx = speed * cos, |
|||
vy = speed * sin |
|||
ballList.push(new Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx)) |
|||
} |
|||
} |
|||
|
|||
function animate(ballList) { |
|||
// ctx.clearRect(0, 0, canvasWidth, canvasHeight) |
|||
ballList.forEach(function(item) { |
|||
item.move() |
|||
item.draw() |
|||
}) |
|||
ctx.draw() |
|||
} |
|||
|
|||
interval = setInterval(function() { |
|||
animate(ballList) |
|||
}, 17) |
|||
} |
|||
} |
|||
// #endif |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.page-body-wrapper { |
|||
text-align: center; |
|||
} |
|||
|
|||
.canvas { |
|||
width: 610rpx; |
|||
height: 610rpx; |
|||
margin: auto; |
|||
background-color: #fff; |
|||
} |
|||
</style> |
|||
@ -1,101 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-title uni-common-mt">默认样式</view> |
|||
<view> |
|||
<checkbox-group> |
|||
<label> |
|||
<checkbox value="cb1" checked="true" />选中 |
|||
</label> |
|||
<label> |
|||
<checkbox value="cb" />未选中 |
|||
</label> |
|||
</checkbox-group> |
|||
</view> |
|||
<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view> |
|||
<view> |
|||
<checkbox-group> |
|||
<label> |
|||
<checkbox value="cb1" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中 |
|||
</label> |
|||
<label> |
|||
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中 |
|||
</label> |
|||
</checkbox-group> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-title uni-common-mt"> |
|||
推荐展示样式 |
|||
<text>\n使用 uni-list 布局</text> |
|||
</view> |
|||
</view> |
|||
<view class="uni-list"> |
|||
<checkbox-group @change="checkboxChange"> |
|||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value"> |
|||
<view> |
|||
<checkbox :value="item.value" :checked="item.checked" /> |
|||
</view> |
|||
<view>{{item.name}}</view> |
|||
</label> |
|||
</checkbox-group> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'checkbox 复选框', |
|||
items: [{ |
|||
value: 'USA', |
|||
name: '美国' |
|||
}, |
|||
{ |
|||
value: 'CHN', |
|||
name: '中国', |
|||
checked: 'true' |
|||
}, |
|||
{ |
|||
value: 'BRA', |
|||
name: '巴西' |
|||
}, |
|||
{ |
|||
value: 'JPN', |
|||
name: '日本' |
|||
}, |
|||
{ |
|||
value: 'ENG', |
|||
name: '英国' |
|||
}, |
|||
{ |
|||
value: 'FRA', |
|||
name: '法国' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
checkboxChange: function (e) { |
|||
var items = this.items, |
|||
values = e.detail.value; |
|||
for (var i = 0, lenI = items.length; i < lenI; ++i) { |
|||
const item = items[i] |
|||
if(values.indexOf(item.value) >= 0){ |
|||
this.$set(item,'checked',true) |
|||
}else{ |
|||
this.$set(item,'checked',false) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-list-cell { |
|||
justify-content: flex-start |
|||
} |
|||
</style> |
|||
@ -1,63 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<video ref="video" id="myVideo" class="video" :src="src" controls="true"> |
|||
<cover-view class="coverview" style="overflow-y: scroll;"> |
|||
<text class="text">{{ '\uEA06\uEA0E\uEA0C\uEA0A 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view' }}</text> |
|||
</cover-view> |
|||
</video> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'cover-view', |
|||
src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v" |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
text-align: center; |
|||
height: 400rpx; |
|||
} |
|||
|
|||
.logo { |
|||
height: 200rpx; |
|||
width: 200rpx; |
|||
margin-top: 200rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #8f8f94; |
|||
} |
|||
|
|||
.text { |
|||
color: #4CD964; |
|||
font-family: unincomponents; |
|||
} |
|||
|
|||
.video { |
|||
width: 750rpx; |
|||
height: 400rpx; |
|||
background-color: #808080; |
|||
} |
|||
|
|||
.coverview { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0rpx; |
|||
height: 150rpx; |
|||
border-width: 10rpx; |
|||
border-color: #4CD964; |
|||
} |
|||
</style> |
|||
@ -1,86 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head title="cover-view用于覆盖map、video等原生组件"></page-head> |
|||
<view class="cover-content" v-if="showMap"> |
|||
<!-- TODO暂时条件编译解决支付宝小程序不能正常显示 cover-x --> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<map> |
|||
<cover-view class="cover-view">简单的cover-view</cover-view> |
|||
<cover-image class="cover-image" src="/static/uni.png"></cover-image> |
|||
</map> |
|||
<!-- #endif --> |
|||
|
|||
<!-- #ifndef APP-PLUS --> |
|||
<!-- #ifndef MP-QQ --> |
|||
<map></map> |
|||
<!-- #endif --> |
|||
|
|||
<!-- TODO QQ暂不支持地图组件 --> |
|||
<!-- #ifdef MP-QQ --> |
|||
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"></video> |
|||
<!-- #endif --> |
|||
|
|||
<cover-view class="cover-view">简单的cover-view</cover-view> |
|||
<!-- #ifndef MP-QQ --> |
|||
<cover-image class="cover-image" src="/static/uni.png"></cover-image> |
|||
<!-- #endif --> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
showMap: false |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
// #ifdef APP-PLUS || MP-BAIDU |
|||
setTimeout(()=>{ |
|||
this.showMap = true |
|||
},350) |
|||
// #endif |
|||
// #ifndef APP-PLUS || MP-BAIDU |
|||
this.showMap = true |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
map { |
|||
width: 750rpx; |
|||
width: 100%; |
|||
height: 600px; |
|||
} |
|||
|
|||
.video { |
|||
width: 100%; |
|||
} |
|||
|
|||
.cover-content { |
|||
position: relative; |
|||
} |
|||
|
|||
.cover-view { |
|||
position: absolute; |
|||
left: 5px; |
|||
top: 5px; |
|||
width: 375rpx; |
|||
text-align: center; |
|||
background-color: #DDDDDD; |
|||
} |
|||
|
|||
.cover-image { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
width: 96px; |
|||
height: 96px; |
|||
} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
@ -1,203 +0,0 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="page-body"> |
|||
<view class='wrapper'> |
|||
<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;"> |
|||
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view> |
|||
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view> |
|||
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view> |
|||
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view> |
|||
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align" |
|||
data-value="left"></view> |
|||
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" |
|||
data-value="center"></view> |
|||
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align" |
|||
data-value="right"></view> |
|||
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align" |
|||
data-value="justify"></view> |
|||
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight" |
|||
data-value="2"></view> |
|||
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing" |
|||
data-value="2em"></view> |
|||
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop" |
|||
data-value="20px"></view> |
|||
<view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" |
|||
data-value="20px"></view> |
|||
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view> |
|||
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="Pacifico"></view> |
|||
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize" |
|||
data-value="24px"></view> |
|||
|
|||
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color" |
|||
data-value="#0000ff"></view> |
|||
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor" |
|||
data-name="backgroundColor" data-value="#00ff00"></view> |
|||
|
|||
<view class="iconfont icon-date" @tap="insertDate"></view> |
|||
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view> |
|||
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list" |
|||
data-value="ordered"></view> |
|||
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" |
|||
data-value="bullet"></view> |
|||
<view class="iconfont icon-undo" @tap="undo"></view> |
|||
<view class="iconfont icon-redo" @tap="redo"></view> |
|||
|
|||
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view> |
|||
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view> |
|||
<view class="iconfont icon-fengexian" @tap="insertDivider"></view> |
|||
<view class="iconfont icon-charutupian" @tap="insertImage"></view> |
|||
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" |
|||
:data-value="1"></view> |
|||
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" |
|||
data-value="sub"></view> |
|||
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" |
|||
data-value="super"></view> |
|||
<view class="iconfont icon-shanchu" @tap="clear"></view> |
|||
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction" |
|||
data-value="rtl"></view> |
|||
|
|||
</view> |
|||
|
|||
<view class="editor-wrapper"> |
|||
<editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize |
|||
@statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady"> |
|||
</editor> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
readOnly: false, |
|||
formats: {} |
|||
} |
|||
}, |
|||
methods: { |
|||
readOnlyChange() { |
|||
this.readOnly = !this.readOnly |
|||
}, |
|||
onEditorReady() { |
|||
uni.createSelectorQuery().select('#editor').context((res) => { |
|||
this.editorCtx = res.context |
|||
}).exec() |
|||
}, |
|||
undo() { |
|||
this.editorCtx.undo() |
|||
}, |
|||
redo() { |
|||
this.editorCtx.redo() |
|||
}, |
|||
format(e) { |
|||
let { |
|||
name, |
|||
value |
|||
} = e.target.dataset |
|||
if (!name) return |
|||
// console.log('format', name, value) |
|||
this.editorCtx.format(name, value) |
|||
|
|||
}, |
|||
onStatusChange(e) { |
|||
const formats = e.detail |
|||
this.formats = formats |
|||
}, |
|||
insertDivider() { |
|||
this.editorCtx.insertDivider({ |
|||
success: function() { |
|||
console.log('insert divider success') |
|||
} |
|||
}) |
|||
}, |
|||
clear() { |
|||
this.editorCtx.clear({ |
|||
success: function(res) { |
|||
console.log("clear success") |
|||
} |
|||
}) |
|||
}, |
|||
removeFormat() { |
|||
this.editorCtx.removeFormat() |
|||
}, |
|||
insertDate() { |
|||
const date = new Date() |
|||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}` |
|||
this.editorCtx.insertText({ |
|||
text: formatDate |
|||
}) |
|||
}, |
|||
insertImage() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
success: (res) => { |
|||
this.editorCtx.insertImage({ |
|||
src: res.tempFilePaths[0], |
|||
alt: '图像', |
|||
success: function() { |
|||
console.log('insert image success') |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
onLoad() { |
|||
uni.loadFontFace({ |
|||
family: 'Pacifico', |
|||
source: 'url("https://sungd.github.io/Pacifico.ttf")' |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@import "./editor-icon.css"; |
|||
|
|||
.page-body { |
|||
height: calc(100vh - var(--window-top) - var(--status-bar-height)); |
|||
} |
|||
|
|||
.wrapper { |
|||
height: 100%; |
|||
} |
|||
|
|||
.editor-wrapper { |
|||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px); |
|||
background: #fff; |
|||
} |
|||
|
|||
.iconfont { |
|||
display: inline-block; |
|||
padding: 8px 8px; |
|||
width: 24px; |
|||
height: 24px; |
|||
cursor: pointer; |
|||
font-size: 20px; |
|||
} |
|||
|
|||
.toolbar { |
|||
box-sizing: border-box; |
|||
border-bottom: 0; |
|||
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; |
|||
} |
|||
|
|||
|
|||
.ql-container { |
|||
box-sizing: border-box; |
|||
padding: 12px 15px; |
|||
width: 100%; |
|||
min-height: 30vh; |
|||
height: 100%; |
|||
margin-top: 20px; |
|||
font-size: 16px; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.ql-active { |
|||
color: #06c; |
|||
} |
|||
</style> |
|||
Binary file not shown.
@ -1,86 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head title="form"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<form @submit="formSubmit" @reset="formReset"> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title">姓名</view> |
|||
<input class="uni-input" name="nickname" placeholder="请输入姓名" /> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title">性别</view> |
|||
<radio-group name="gender"> |
|||
<label> |
|||
<radio value="男" /><text>男</text> |
|||
</label> |
|||
<label> |
|||
<radio value="女" /><text>女</text> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title">爱好</view> |
|||
<checkbox-group name="loves"> |
|||
<label> |
|||
<checkbox value="读书" /><text>读书</text> |
|||
</label> |
|||
<label> |
|||
<checkbox value="写字" /><text>写字</text> |
|||
</label> |
|||
</checkbox-group> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title">年龄</view> |
|||
<slider value="20" name="age" show-value></slider> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title">保留选项</view> |
|||
<view> |
|||
<switch name="switch" /> |
|||
</view> |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<button form-type="submit">Submit</button> |
|||
<button type="default" form-type="reset">Reset</button> |
|||
</view> |
|||
</form> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import graceChecker from "../../../common/graceChecker.js" |
|||
export default { |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
methods: { |
|||
formSubmit: function(e) { |
|||
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value)) |
|||
//定义表单规则 |
|||
var rule = [ |
|||
{name:"nickname", checkType : "string", checkRule:"1,3", errorMsg:"姓名应为1-3个字符"}, |
|||
{name:"gender", checkType : "in", checkRule:"男,女", errorMsg:"请选择性别"}, |
|||
{name:"loves", checkType : "notnull", checkRule:"", errorMsg:"请选择爱好"} |
|||
]; |
|||
//进行表单检查 |
|||
var formData = e.detail.value; |
|||
var checkRes = graceChecker.check(formData, rule); |
|||
if(checkRes){ |
|||
uni.showToast({title:"验证通过!", icon:"none"}); |
|||
}else{ |
|||
uni.showToast({ title: graceChecker.error, icon: "none" }); |
|||
} |
|||
}, |
|||
formReset: function(e) { |
|||
console.log('清空数据') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-form-item .title { |
|||
padding: 20rpx 0; |
|||
} |
|||
</style> |
|||
@ -1,34 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-title"> |
|||
示例1 <text>\n本地图片</text> |
|||
</view> |
|||
<view class="uni-center" style="background:#FFFFFF; font-size:0;"> |
|||
<image class="image" mode="widthFix" src="../../../static/uni.png" /> |
|||
</view> |
|||
<view class="uni-title uni-common-mt"> |
|||
示例2 <text>\n网络图片</text> |
|||
</view> |
|||
<view class="uni-center" style="background:#FFFFFF; font-size:0;"> |
|||
<image class="image" mode="widthFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/ceb770c0-5164-11eb-8a36-ebb87efcf8c0.png" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'image' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.image { |
|||
margin:40rpx 0; |
|||
width: 200rpx; |
|||
} |
|||
</style> |
|||
@ -1,245 +0,0 @@ |
|||
<template> |
|||
<view class="nvue-page-root"> |
|||
<view class="page-title"> |
|||
<view class="page-title__wrapper"> |
|||
<text class="page-title__text">{{title}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="uni-common-mt"> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">可自动聚焦的 input</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" focus placeholder="自动获得焦点" /> |
|||
</view> |
|||
</view> |
|||
<!-- #ifdef APP-PLUS --> |
|||
<view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">隐藏 iOS 软键盘上的导航条</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" placeholder="触摸其他地方收起键盘" @focus="onFocus" @blur="onBlur" /> |
|||
</view> |
|||
</view> |
|||
<!-- #endif --> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为搜索</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" /> |
|||
</view> |
|||
</view> |
|||
<!-- #ifndef H5 --> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为发送</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" confirm-type="send" placeholder="键盘右下角按钮显示为发送" /> |
|||
</view> |
|||
</view> |
|||
<!-- #endif --> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">控制最大输入长度的 input</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" maxlength="10" placeholder="最大输入长度为10" /> |
|||
</view> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">实时获取输入值：{{inputValue}}</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" /> |
|||
</view> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">控制输入的 input</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" /> |
|||
</view> |
|||
</view> |
|||
<!-- #ifndef MP-BAIDU --> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">控制键盘的 input</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" /> |
|||
</view> |
|||
</view> |
|||
<!-- #endif --> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">数字输入的 input</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" type="number" placeholder="这是一个数字输入框" /> |
|||
</view> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">密码输入的 input</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" password type="text" placeholder="这是一个密码输入框" /> |
|||
</view> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">带小数点的 input</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" /> </view> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">身份证输入的 input</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" type="idcard" placeholder="身份证输入键盘" /> </view> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">控制占位符颜色的 input</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" /> |
|||
</view> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" /> |
|||
<text class="uni-icon" v-if="showClearIcon" @click="clearIcon"></text> |
|||
</view> |
|||
</view> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view> |
|||
<view class="uni-input-wrapper"> |
|||
<input class="uni-input" placeholder="请输入密码" :password="showPassword" /> |
|||
<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'input', |
|||
focus: false, |
|||
inputValue: '', |
|||
showClearIcon: false, |
|||
inputClearValue: '', |
|||
changeValue: '', |
|||
showPassword: true, |
|||
src: '../../../static/eye-1.png', |
|||
platform: '', |
|||
isNvue: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
onKeyInput: function(event) { |
|||
this.inputValue = event.detail.value |
|||
}, |
|||
replaceInput: function(event) { |
|||
var value = event.detail.value; |
|||
if (value === '11') { |
|||
this.changeValue = '2'; |
|||
} |
|||
}, |
|||
hideKeyboard: function(event) { |
|||
if (event.detail.value === '123') { |
|||
uni.hideKeyboard(); |
|||
} |
|||
}, |
|||
clearInput: function(event) { |
|||
this.inputClearValue = event.detail.value; |
|||
if (event.detail.value.length > 0) { |
|||
this.showClearIcon = true; |
|||
} else { |
|||
this.showClearIcon = false; |
|||
} |
|||
}, |
|||
clearIcon: function() { |
|||
this.inputClearValue = ''; |
|||
this.showClearIcon = false; |
|||
}, |
|||
changePassword: function() { |
|||
this.showPassword = !this.showPassword; |
|||
}, |
|||
onFocus() { |
|||
this.$mp.page.$getAppWebview().setStyle({ |
|||
softinputNavBar: 'none' |
|||
}) |
|||
}, |
|||
onBlur() { |
|||
this.$mp.page.$getAppWebview().setStyle({ |
|||
softinputNavBar: 'auto' |
|||
}) |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.platform = uni.getSystemInfoSync().platform |
|||
// #ifdef APP-PLUS-NVUE |
|||
this.isNvue = true |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.nvue-page-root { |
|||
background-color: #F8F8F8; |
|||
padding-bottom: 20px; |
|||
} |
|||
|
|||
.page-title { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 35rpx; |
|||
} |
|||
|
|||
.page-title__wrapper { |
|||
padding: 0px 20px; |
|||
border-bottom-color: #D8D8D8; |
|||
border-bottom-width: 1px; |
|||
} |
|||
|
|||
.page-title__text { |
|||
font-size: 16px; |
|||
height: 48px; |
|||
line-height: 48px; |
|||
color: #BEBEBE; |
|||
} |
|||
|
|||
.title { |
|||
padding: 5px 13px; |
|||
} |
|||
|
|||
.uni-form-item__title { |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
} |
|||
|
|||
.uni-input-wrapper { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
padding: 8px 13px; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
background-color: #FFFFFF; |
|||
} |
|||
|
|||
.uni-input { |
|||
height: 28px; |
|||
line-height: 28px; |
|||
font-size: 15px; |
|||
padding: 0px; |
|||
flex: 1; |
|||
background-color: #FFFFFF; |
|||
} |
|||
|
|||
.uni-icon { |
|||
font-family: uniicons; |
|||
font-size: 24px; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
width: 24px; |
|||
height: 24px; |
|||
line-height: 24px; |
|||
color: #999999; |
|||
} |
|||
|
|||
.uni-eye-active { |
|||
color: #007AFF; |
|||
} |
|||
</style> |
|||
@ -1,103 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-common-mt"> |
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title">表单组件在label内</view> |
|||
<checkbox-group class="uni-list" @change="checkboxChange"> |
|||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name"> |
|||
<view> |
|||
<checkbox :value="item.name" :checked="item.checked"></checkbox> |
|||
</view> |
|||
<view>{{item.value}}</view> |
|||
</label> |
|||
</checkbox-group> |
|||
</view> |
|||
|
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title">label用for标识表单组件</view> |
|||
<radio-group class="uni-list" @change="radioChange"> |
|||
<view class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index"> |
|||
<view> |
|||
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio> |
|||
</view> |
|||
<label class="label-2-text" :for="item.name"> |
|||
<text>{{item.value}}</text> |
|||
</label> |
|||
</view> |
|||
</radio-group> |
|||
</view> |
|||
|
|||
<view class="uni-form-item uni-column"> |
|||
<view class="title">label内有多个时选中第一个</view> |
|||
<checkbox-group class="uni-list" @change="checkboxChange"> |
|||
<label class="label-3"> |
|||
<view class="uni-list-cell uni-list-cell-pd"> |
|||
<checkbox class="checkbox-3">选项一</checkbox> |
|||
</view> |
|||
<view class="uni-list-cell uni-list-cell-pd"> |
|||
<checkbox class="checkbox-3">选项二</checkbox> |
|||
</view> |
|||
<view class="uni-link uni-center" style="margin-top:20rpx;">点击该label下的文字默认选中第一个checkbox</view> |
|||
</label> |
|||
</checkbox-group> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'label', |
|||
checkboxItems: [{ |
|||
name: 'USA', |
|||
value: '美国' |
|||
}, |
|||
{ |
|||
name: 'CHN', |
|||
value: '中国', |
|||
checked: 'true' |
|||
} |
|||
], |
|||
radioItems: [{ |
|||
name: 'USA', |
|||
value: '美国' |
|||
}, |
|||
{ |
|||
name: 'CHN', |
|||
value: '中国', |
|||
checked: 'true' |
|||
} |
|||
], |
|||
hidden: false |
|||
} |
|||
}, |
|||
methods: { |
|||
checkboxChange: function(e) { |
|||
var checked = e.detail.value |
|||
console.log(checked) |
|||
|
|||
}, |
|||
radioChange: function(e) { |
|||
var checked = e.detail.value |
|||
console.log(checked) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-list-cell { |
|||
justify-content: flex-start |
|||
} |
|||
|
|||
.uni-list .label-3 { |
|||
padding: 0; |
|||
} |
|||
|
|||
.label-2-text { |
|||
flex: 1; |
|||
} |
|||
</style> |
|||
@ -1,295 +0,0 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<map class="map" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude" :latitude="location.latitude" |
|||
:show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew" :show-compass="showCompass" |
|||
:enable-overlooking="enableOverlooking" :enable-zoom="enableZoom" :enable-scroll="enableScroll" |
|||
:enable-rotate="enableRotate" :enable-satellite="enableSatellite" :enable-traffic="enableTraffic" :markers="markers" |
|||
:polyline="polyline" :circles="circles" :polygons="polygons" :include-points="includePoints"></map> |
|||
<view class="line"></view> |
|||
<uni-list class="scrollview"> |
|||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enable3D" title="显示3D楼块" @switchChange="enableThreeD" /> |
|||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="showCompass" title="显示指南针" @switchChange="changeShowCompass" /> |
|||
<!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableOverlooking" title="开启俯视" @switchChange="changeEnableOverlooking" /> --> |
|||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableZoom" title="是否支持缩放" @switchChange="changeEnableZoom" /> |
|||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableScroll" title="是否支持拖动" @switchChange="changeEnableScroll" /> |
|||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableRotate" title="是否支持旋转" @switchChange="changeEnableRotate" /> |
|||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableSatellite" title="是否开启卫星图" @switchChange="changeEnableSatellite" /> |
|||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableTraffic" title="是否开启实时路况" @switchChange="changeEnableTraffic" /> |
|||
</uni-list> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
const testMarkers = [{ |
|||
id: 0, |
|||
latitude: 39.989631, |
|||
longitude: 116.481018, |
|||
title: '方恒国际 阜通东大街6号', |
|||
zIndex: '1', |
|||
rotate: 0, |
|||
width: 20, |
|||
height: 20, |
|||
anchor: { |
|||
x: 0.5, |
|||
y: 1 |
|||
}, |
|||
callout: { |
|||
content: '方恒国际 阜通东大街6号', |
|||
color: '#00BFFF', |
|||
fontSize: 10, |
|||
borderRadius: 4, |
|||
borderWidth: 1, |
|||
borderColor: '#333300', |
|||
bgColor: '#CCFF99', |
|||
padding: '5', |
|||
display: 'ALWAYS' |
|||
} |
|||
}, |
|||
{ |
|||
id: 1, |
|||
latitude: 39.9086920000, |
|||
longitude: 116.3974770000, |
|||
title: '天安门', |
|||
zIndex: '1', |
|||
iconPath: '/static/location.png', |
|||
width: 40, |
|||
height: 40, |
|||
anchor: { |
|||
x: 0.5, |
|||
y: 1 |
|||
}, |
|||
callout: { |
|||
content: '首都北京\n天安门', |
|||
color: '#00BFFF', |
|||
fontSize: 12, |
|||
borderRadius: 2, |
|||
borderWidth: 0, |
|||
borderColor: '#333300', |
|||
bgColor: '#CCFF11', |
|||
padding: '1', |
|||
display: 'ALWAYS' |
|||
} |
|||
} |
|||
]; |
|||
const testPolyline = [{ |
|||
points: [{ |
|||
latitude: 39.925539, |
|||
longitude: 116.279037 |
|||
}, |
|||
{ |
|||
latitude: 39.925539, |
|||
longitude: 116.520285 |
|||
} |
|||
], |
|||
color: '#FFCCFF', |
|||
width: 7, |
|||
dottedLine: true, |
|||
arrowLine: true, |
|||
borderColor: '#000000', |
|||
borderWidth: 2 |
|||
}, |
|||
{ |
|||
points: [{ |
|||
latitude: 39.938698, |
|||
longitude: 116.275177 |
|||
}, |
|||
{ |
|||
latitude: 39.966069, |
|||
longitude: 116.289253 |
|||
}, |
|||
{ |
|||
latitude: 39.944226, |
|||
longitude: 116.306076 |
|||
}, |
|||
{ |
|||
latitude: 39.966069, |
|||
longitude: 116.322899 |
|||
}, |
|||
{ |
|||
latitude: 39.938698, |
|||
longitude: 116.336975 |
|||
} |
|||
], |
|||
color: '#CCFFFF', |
|||
width: 5, |
|||
dottedLine: true, |
|||
arrowLine: true, |
|||
borderColor: '#CC0000', |
|||
borderWidth: 3 |
|||
} |
|||
]; |
|||
const testPolygons = [{ |
|||
points: [{ |
|||
latitude: 39.781892, |
|||
longitude: 116.293413 |
|||
}, |
|||
{ |
|||
latitude: 39.787600, |
|||
longitude: 116.391842 |
|||
}, |
|||
{ |
|||
latitude: 39.733187, |
|||
longitude: 116.417932 |
|||
}, |
|||
{ |
|||
latitude: 39.704653, |
|||
longitude: 116.338255 |
|||
} |
|||
], |
|||
fillColor: '#FFCCFF', |
|||
strokeWidth: 3, |
|||
strokeColor: '#CC99CC', |
|||
zIndex: 11 |
|||
}, |
|||
{ |
|||
points: [{ |
|||
latitude: 39.887600, |
|||
longitude: 116.518932 |
|||
}, |
|||
{ |
|||
latitude: 39.781892, |
|||
longitude: 116.518932 |
|||
}, |
|||
{ |
|||
latitude: 39.781892, |
|||
longitude: 116.428932 |
|||
}, |
|||
{ |
|||
latitude: 39.887600, |
|||
longitude: 116.428932 |
|||
} |
|||
], |
|||
fillColor: '#CCFFFF', |
|||
strokeWidth: 5, |
|||
strokeColor: '#CC0000', |
|||
zIndex: 3 |
|||
} |
|||
]; |
|||
const testCircles = [{ |
|||
latitude: 39.996441, |
|||
longitude: 116.411146, |
|||
radius: 15000, |
|||
strokeWidth: 5, |
|||
color: '#CCFFFF', |
|||
fillColor: '#CC0000' |
|||
}, |
|||
{ |
|||
latitude: 40.096441, |
|||
longitude: 116.511146, |
|||
radius: 12000, |
|||
strokeWidth: 3, |
|||
color: '#CCFFFF', |
|||
fillColor: '#FFCCFF' |
|||
}, |
|||
{ |
|||
latitude: 39.896441, |
|||
longitude: 116.311146, |
|||
radius: 9000, |
|||
strokeWidth: 1, |
|||
color: '#CCFFFF', |
|||
fillColor: '#CC0000' |
|||
} |
|||
]; |
|||
const testIncludePoints = [{ |
|||
latitude: 39.989631, |
|||
longitude: 116.481018, |
|||
}, |
|||
{ |
|||
latitude: 39.9086920000, |
|||
longitude: 116.3974770000, |
|||
} |
|||
]; |
|||
export default { |
|||
data() { |
|||
return { |
|||
location: { |
|||
longitude: 116.3974770000, |
|||
latitude: 39.9086920000 |
|||
}, |
|||
controls: [{ |
|||
id: 1, |
|||
position: { |
|||
left: 5, |
|||
top: 180, |
|||
width: 30, |
|||
height: 30 |
|||
}, |
|||
iconPath: '/static/logo.png', |
|||
clickable: true |
|||
}], |
|||
showLocation: false, |
|||
scale: 13, |
|||
showCompass: true, |
|||
enable3D: true, |
|||
enableOverlooking: true, |
|||
enableZoom: true, |
|||
enableScroll: true, |
|||
enableRotate: true, |
|||
enableSatellite: false, |
|||
enableTraffic: false, |
|||
polyline: [], |
|||
markers: [], |
|||
polygons: [], |
|||
circles: [], |
|||
includePoints: [], |
|||
rotate: 0, |
|||
skew: 0 |
|||
} |
|||
}, |
|||
onLoad() {}, |
|||
methods: { |
|||
changeScale() { |
|||
this.scale = this.scale == 9 ? 15 : 9; |
|||
}, |
|||
changeRotate() { |
|||
this.rotate = this.rotate == 90 ? 0 : 90; |
|||
}, |
|||
changeSkew() { |
|||
this.skew = this.skew == 30 ? 0 : 30; |
|||
}, |
|||
enableThreeD(e) { |
|||
this.enable3D = e.value; |
|||
}, |
|||
changeShowCompass(e) { |
|||
this.showCompass = e.value; |
|||
}, |
|||
changeEnableOverlooking(e) { |
|||
this.enableOverlooking = e.value; |
|||
}, |
|||
changeEnableZoom(e) { |
|||
this.enableZoom = e.value; |
|||
}, |
|||
changeEnableScroll(e) { |
|||
this.enableScroll = e.value; |
|||
}, |
|||
changeEnableRotate(e) { |
|||
this.enableRotate = e.value; |
|||
}, |
|||
changeEnableSatellite(e) { |
|||
this.enableSatellite = e.value; |
|||
}, |
|||
changeEnableTraffic(e) { |
|||
this.enableTraffic = e.value; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
flex: 1; |
|||
} |
|||
|
|||
.map { |
|||
width: 750rpx; |
|||
height: 250px; |
|||
background-color: #f0f0f0; |
|||
} |
|||
|
|||
.line { |
|||
height: 4px; |
|||
} |
|||
|
|||
.scrollview { |
|||
flex: 1; |
|||
} |
|||
</style> |
|||
@ -1,50 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-common-mt"> |
|||
<view> |
|||
<map :latitude="latitude" :longitude="longitude" :markers="covers"> |
|||
</map> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'map', |
|||
latitude: 39.909, |
|||
longitude: 116.39742, |
|||
covers: [{ |
|||
latitude: 39.9085, |
|||
longitude: 116.39747, |
|||
// #ifdef APP-PLUS |
|||
iconPath: '../../../static/app-plus/location@3x.png', |
|||
// #endif |
|||
// #ifndef APP-PLUS |
|||
iconPath: '../../../static/location.png', |
|||
// #endif |
|||
}, { |
|||
latitude: 39.90, |
|||
longitude: 116.39, |
|||
// #ifdef APP-PLUS |
|||
iconPath: '../../../static/app-plus/location@3x.png', |
|||
// #endif |
|||
// #ifndef APP-PLUS |
|||
iconPath: '../../../static/location.png', |
|||
// #endif |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
map { |
|||
width: 100%; |
|||
height: 600rpx; |
|||
} |
|||
</style> |
|||
@ -1,129 +0,0 @@ |
|||
<template> |
|||
<view class="page-body"> |
|||
<page-head title="movable-view,可拖动视图"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-title uni-common-mt"> |
|||
示例 1 |
|||
<text>\nmovable-view 区域小于 movable-area</text> |
|||
</view> |
|||
<movable-area> |
|||
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view> |
|||
</movable-area> |
|||
<view @tap="tap" class="uni-link uni-center uni-common-mt"> |
|||
点击这里移动至 (30px, 30px) |
|||
</view> |
|||
<view class="uni-title uni-common-mt"> |
|||
示例 2 |
|||
<text>\nmovable-view区域大于movable-area</text> |
|||
</view> |
|||
<movable-area> |
|||
<movable-view class="max" direction="all">text</movable-view> |
|||
</movable-area> |
|||
<view class="uni-title uni-common-mt"> |
|||
示例 3 |
|||
<text>\n只可以横向移动</text> |
|||
</view> |
|||
<movable-area> |
|||
<movable-view direction="horizontal">text</movable-view> |
|||
</movable-area> |
|||
<view class="uni-title uni-common-mt"> |
|||
示例 4 |
|||
<text>\n只可以纵向移动</text> |
|||
</view> |
|||
<movable-area> |
|||
<movable-view direction="vertical">text</movable-view> |
|||
</movable-area> |
|||
<view class="uni-title uni-common-mt"> |
|||
示例 5 |
|||
<text>\n可超出边界</text> |
|||
</view> |
|||
<movable-area> |
|||
<movable-view direction="all" out-of-bounds>text</movable-view> |
|||
</movable-area> |
|||
<view class="uni-title uni-common-mt"> |
|||
示例 6 |
|||
<text>\n带有惯性</text> |
|||
</view> |
|||
<movable-area> |
|||
<movable-view direction="all" inertia>text</movable-view> |
|||
</movable-area> |
|||
<view class="uni-title uni-common-mt"> |
|||
示例 7 |
|||
<text>\n可放缩</text> |
|||
</view> |
|||
<movable-area scale-area> |
|||
<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view> |
|||
</movable-area> |
|||
<view @tap="tap2" class="uni-link uni-center uni-common-mt" style="padding-bottom:80rpx;"> |
|||
点击这里放大3倍 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
x: 0, |
|||
y: 0, |
|||
scale: 2, |
|||
old: { |
|||
x: 0, |
|||
y: 0, |
|||
scale: 2 |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
tap: function(e) { |
|||
// 解决view层不同步的问题 |
|||
this.x = this.old.x |
|||
this.y = this.old.y |
|||
this.$nextTick(function() { |
|||
this.x = 30 |
|||
this.y = 30 |
|||
}) |
|||
}, |
|||
tap2() { |
|||
// 解决view层不同步的问题 |
|||
this.scale = this.old.scale |
|||
this.scale = this.old.scale |
|||
this.$nextTick(function() { |
|||
this.scale = 3 |
|||
}) |
|||
}, |
|||
onChange: function(e) { |
|||
this.old.x = e.detail.x |
|||
this.old.y = e.detail.y |
|||
}, |
|||
onScale: function(e) { |
|||
this.old.scale = e.detail.scale |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
movable-view { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 150rpx; |
|||
width: 150rpx; |
|||
background-color: #007AFF; |
|||
color: #fff; |
|||
} |
|||
|
|||
movable-area { |
|||
height: 300rpx; |
|||
width: 100%; |
|||
background-color: #D8D8D8; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.max { |
|||
width:500rpx; |
|||
height: 500rpx; |
|||
} |
|||
</style> |
|||
@ -1,14 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '新建的页面' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,33 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-btn-v"> |
|||
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover"> |
|||
<button type="default">跳转到新页面</button> |
|||
</navigator> |
|||
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover"> |
|||
<button type="default">在当前页打开</button> |
|||
</navigator> |
|||
<navigator v-if="!hasLeftWin" url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover"> |
|||
<button type="default">跳转tab页面</button> |
|||
</navigator> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import { mapState } from 'vuex' |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'navigator' |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState({ |
|||
hasLeftWin: state => !state.noMatchLeftWindow |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
@ -1,14 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '当前页' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,91 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-title"> |
|||
日期：{{year}}年{{month}}月{{day}}日 |
|||
</view> |
|||
</view> |
|||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="value" @change="bindChange"> |
|||
<picker-view-column> |
|||
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view> |
|||
</picker-view-column> |
|||
<picker-view-column> |
|||
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view> |
|||
</picker-view-column> |
|||
<picker-view-column> |
|||
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data () { |
|||
const date = new Date() |
|||
const years = [] |
|||
const year = date.getFullYear() |
|||
const months = [] |
|||
const month = date.getMonth() + 1 |
|||
const days = [] |
|||
const day = date.getDate() |
|||
|
|||
for (let i = 1990; i <= date.getFullYear(); i++) { |
|||
years.push(i) |
|||
} |
|||
|
|||
for (let i = 1; i <= 12; i++) { |
|||
months.push(i) |
|||
} |
|||
|
|||
for (let i = 1; i <= 31; i++) { |
|||
days.push(i) |
|||
} |
|||
return { |
|||
title: 'picker-view', |
|||
years, |
|||
year, |
|||
months, |
|||
month, |
|||
days, |
|||
day, |
|||
value: [9999, month - 1, day - 1], |
|||
/** |
|||
* 解决动态设置indicator-style不生效的问题 |
|||
*/ |
|||
visible: true, |
|||
// indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;` |
|||
indicatorStyle: `height: 50px;`, |
|||
// #ifdef MP-KUAISHOU |
|||
maskStyle: "padding:10px 0" |
|||
// #endif |
|||
// #ifndef MP-KUAISHOU |
|||
maskStyle: "" |
|||
// #endif |
|||
} |
|||
}, |
|||
methods: { |
|||
bindChange (e) { |
|||
const val = e.detail.value |
|||
this.year = this.years[val[0]] |
|||
this.month = this.months[val[1]] |
|||
this.day = this.days[val[2]] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
picker-view { |
|||
width: 100%; |
|||
height: 600rpx; |
|||
margin-top:20rpx; |
|||
} |
|||
|
|||
.item { |
|||
line-height: 100rpx; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -1,178 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-title uni-common-pl">普通选择器</view> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
当前选择 |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<picker @change="bindPickerChange" :value="index" :range="array" range-key="name"> |
|||
<view class="uni-input">{{array[index].name}}</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- #ifndef MP-ALIPAY --> |
|||
<view class="uni-title uni-common-pl">多列选择器</view> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
当前选择 |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"> |
|||
<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- #endif --> |
|||
|
|||
<view class="uni-title uni-common-pl">时间选择器</view> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
当前选择 |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange"> |
|||
<view class="uni-input">{{time}}</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="uni-picker-tips"> |
|||
注：选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中 |
|||
</view> |
|||
|
|||
<view class="uni-title uni-common-pl">日期选择器</view> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell"> |
|||
<view class="uni-list-cell-left"> |
|||
当前选择 |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> |
|||
<view class="uni-input">{{date}}</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="uni-picker-tips"> |
|||
注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
function getDate(type) { |
|||
const date = new Date(); |
|||
|
|||
let year = date.getFullYear(); |
|||
let month = date.getMonth() + 1; |
|||
let day = date.getDate(); |
|||
|
|||
if (type === 'start') { |
|||
year = year - 10; |
|||
} else if (type === 'end') { |
|||
year = year + 10; |
|||
} |
|||
month = month > 9 ? month : '0' + month;; |
|||
day = day > 9 ? day : '0' + day; |
|||
|
|||
return `${year}-${month}-${day}`; |
|||
} |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'picker', |
|||
array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}], |
|||
index: 0, |
|||
multiArray: [ |
|||
['亚洲', '欧洲'], |
|||
['中国', '日本'], |
|||
['北京', '上海', '广州'] |
|||
], |
|||
multiIndex: [0, 0, 0], |
|||
date: getDate({ |
|||
format: true |
|||
}), |
|||
startDate:getDate('start'), |
|||
endDate:getDate('end'), |
|||
time: '12:01' |
|||
} |
|||
}, |
|||
methods: { |
|||
bindPickerChange: function(e) { |
|||
console.log('picker发送选择改变，携带值为：' + e.detail.value) |
|||
this.index = e.detail.value |
|||
}, |
|||
bindMultiPickerColumnChange: function(e) { |
|||
console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value) |
|||
this.multiIndex[e.detail.column] = e.detail.value |
|||
switch (e.detail.column) { |
|||
case 0: //拖动第1列 |
|||
switch (this.multiIndex[0]) { |
|||
case 0: |
|||
this.multiArray[1] = ['中国', '日本'] |
|||
this.multiArray[2] = ['北京', '上海', '广州'] |
|||
break |
|||
case 1: |
|||
this.multiArray[1] = ['英国', '法国'] |
|||
this.multiArray[2] = ['伦敦', '曼彻斯特'] |
|||
break |
|||
} |
|||
this.multiIndex.splice(1, 1, 0) |
|||
this.multiIndex.splice(2, 1, 0) |
|||
break |
|||
case 1: //拖动第2列 |
|||
switch (this.multiIndex[0]) { //判断第一列是什么 |
|||
case 0: |
|||
switch (this.multiIndex[1]) { |
|||
case 0: |
|||
this.multiArray[2] = ['北京', '上海', '广州'] |
|||
break |
|||
case 1: |
|||
this.multiArray[2] = ['东京','北海道'] |
|||
break |
|||
} |
|||
break |
|||
case 1: |
|||
switch (this.multiIndex[1]) { |
|||
case 0: |
|||
this.multiArray[2] = ['伦敦', '曼彻斯特'] |
|||
break |
|||
case 1: |
|||
this.multiArray[2] = ['巴黎', '马赛'] |
|||
break |
|||
} |
|||
break |
|||
} |
|||
this.multiIndex.splice(2, 1, 0) |
|||
break |
|||
} |
|||
this.$forceUpdate() |
|||
}, |
|||
bindDateChange: function(e) { |
|||
this.date = e.detail.value |
|||
}, |
|||
bindTimeChange: function(e) { |
|||
this.time = e.detail.value |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-picker-tips { |
|||
font-size: 12px; |
|||
color: #666; |
|||
margin-bottom: 15px; |
|||
padding: 0 15px; |
|||
/* text-align: right; */ |
|||
} |
|||
</style> |
|||
@ -1,62 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="progress-box"> |
|||
<progress :percent="pgList[0]" show-info stroke-width="3" /> |
|||
</view> |
|||
<view class="progress-box"> |
|||
<progress :percent="pgList[1]" stroke-width="3" /> |
|||
<uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons> |
|||
</view> |
|||
<view class="progress-box"> |
|||
<progress :percent="pgList[2]" stroke-width="3" /> |
|||
</view> |
|||
<view class="progress-box"> |
|||
<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" /> |
|||
</view> |
|||
<view class="progress-control"> |
|||
<button type="primary" @click="setProgress">设置进度</button> |
|||
<button type="warn" @click="clearProgress">清除进度</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'progress', |
|||
pgList: [0, 0, 0, 0] |
|||
} |
|||
}, |
|||
methods: { |
|||
setProgress() { |
|||
this.pgList = [20, 40, 60, 80] |
|||
}, |
|||
clearProgress() { |
|||
this.pgList = [0, 0, 0, 0] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.progress-box { |
|||
display: flex; |
|||
height: 50rpx; |
|||
margin-bottom: 60rpx; |
|||
} |
|||
|
|||
.uni-icon { |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.progress-cancel { |
|||
margin-left: 40rpx; |
|||
} |
|||
|
|||
.progress-control button{ |
|||
margin-top: 20rpx; |
|||
} |
|||
</style> |
|||
@ -1,90 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-title">默认样式</view> |
|||
<view> |
|||
<label class="radio" style="margin-right: 30rpx;"> |
|||
<radio value="r1" checked="true" />选中 |
|||
</label> |
|||
<label class="radio"> |
|||
<radio value="r2" />未选中 |
|||
</label> |
|||
</view> |
|||
</view> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-title">不同颜色和尺寸的radio</view> |
|||
<view> |
|||
<label class="radio" style="margin-right: 30rpx;"> |
|||
<radio value="r1" checked="true" color="#FFCC33" style="transform:scale(0.7)"/>选中 |
|||
</label> |
|||
<label class="radio"> |
|||
<radio value="r2" color="#FFCC33" style="transform:scale(0.7)"/>未选中 |
|||
</label> |
|||
</view> |
|||
</view> |
|||
<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view> |
|||
<view class="uni-list"> |
|||
<radio-group @change="radioChange"> |
|||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"> |
|||
<view> |
|||
<radio :value="item.value" :checked="index === current" /> |
|||
</view> |
|||
<view>{{item.name}}</view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'radio 单选框', |
|||
items: [{ |
|||
value: 'USA', |
|||
name: '美国' |
|||
}, |
|||
{ |
|||
value: 'CHN', |
|||
name: '中国', |
|||
checked: 'true' |
|||
}, |
|||
{ |
|||
value: 'BRA', |
|||
name: '巴西' |
|||
}, |
|||
{ |
|||
value: 'JPN', |
|||
name: '日本' |
|||
}, |
|||
{ |
|||
value: 'ENG', |
|||
name: '英国' |
|||
}, |
|||
{ |
|||
value: 'FRA', |
|||
name: '法国' |
|||
}, |
|||
], |
|||
current: 0 |
|||
} |
|||
}, |
|||
methods: { |
|||
radioChange(evt) { |
|||
for (let i = 0; i < this.items.length; i++) { |
|||
if (this.items[i].value === evt.detail.value) { |
|||
this.current = i; |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-list-cell { |
|||
justify-content: flex-start |
|||
} |
|||
</style> |
|||
@ -1,44 +0,0 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-title uni-common-mt"> |
|||
数组类型 |
|||
<text>\nnodes属性为Array</text> |
|||
</view> |
|||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;"> |
|||
<rich-text :nodes="nodes"></rich-text> |
|||
</view> |
|||
<!-- #ifndef MP-ALIPAY --> |
|||
<view class="uni-title uni-common-mt"> |
|||
字符串类型 |
|||
<text>\nnodes属性为String</text> |
|||
</view> |
|||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;"> |
|||
<rich-text :nodes="strings"></rich-text> |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'rich-text', |
|||
nodes: [{ |
|||
name: 'div', |
|||
attrs: { |
|||
class: 'div-class', |
|||
style: 'line-height: 60px; color: red; text-align:center;' |
|||
}, |
|||
children: [{ |
|||
type: 'text', |
|||
text: 'Hello uni-app!' |
|||
}] |
|||
}], |
|||
strings: '<div style="text-align:center;"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/ceb770c0-5164-11eb-8a36-ebb87efcf8c0.png"/></div>' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,97 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head title="scroll-view,区域滚动视图"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-title uni-common-mt"> |
|||
Vertical Scroll |
|||
<text>\n纵向滚动</text> |
|||
</view> |
|||
<view> |
|||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" |
|||
@scroll="scroll"> |
|||
<view id="demo1" class="scroll-view-item uni-bg-red">A</view> |
|||
<view id="demo2" class="scroll-view-item uni-bg-green">B</view> |
|||
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view @tap="goTop" class="uni-link uni-center uni-common-mt"> |
|||
点击这里返回顶部 |
|||
</view> |
|||
|
|||
<view class="uni-title uni-common-mt"> |
|||
Horizontal Scroll |
|||
<text>\n横向滚动</text> |
|||
</view> |
|||
<view> |
|||
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120"> |
|||
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view> |
|||
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view> |
|||
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view class="uni-common-pb"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
scrollTop: 0, |
|||
old: { |
|||
scrollTop: 0 |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
upper: function(e) { |
|||
console.log(e) |
|||
}, |
|||
lower: function(e) { |
|||
console.log(e) |
|||
}, |
|||
scroll: function(e) { |
|||
console.log(e) |
|||
this.old.scrollTop = e.detail.scrollTop |
|||
}, |
|||
goTop: function(e) { |
|||
// 解决view层不同步的问题 |
|||
this.scrollTop = this.old.scrollTop |
|||
this.$nextTick(function() { |
|||
this.scrollTop = 0 |
|||
}); |
|||
uni.showToast({ |
|||
icon:"none", |
|||
title:"纵向滚动 scrollTop 值已被修改为 0" |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.scroll-Y { |
|||
height: 300rpx; |
|||
} |
|||
|
|||
.scroll-view_H { |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
} |
|||
|
|||
.scroll-view-item { |
|||
height: 300rpx; |
|||
line-height: 300rpx; |
|||
text-align: center; |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
.scroll-view-item_H { |
|||
display: inline-block; |
|||
width: 100%; |
|||
height: 300rpx; |
|||
line-height: 300rpx; |
|||
text-align: center; |
|||
font-size: 36rpx; |
|||
} |
|||
</style> |
|||
@ -1,40 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-title">显示当前value</view> |
|||
<view> |
|||
<slider value="50" @change="sliderChange" show-value /> |
|||
</view> |
|||
|
|||
<view class="uni-title">设置步进step跳动</view> |
|||
<view> |
|||
<slider value="60" @change="sliderChange" step="5" /> |
|||
</view> |
|||
|
|||
<view class="uni-title">设置最小/最大值</view> |
|||
<view> |
|||
<slider value="100" @change="sliderChange" min="50" max="200" show-value /> |
|||
</view> |
|||
|
|||
<view class="uni-title">不同颜色和大小的滑块</view> |
|||
<view> |
|||
<slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'slider 滑块' |
|||
} |
|||
}, |
|||
methods: { |
|||
sliderChange(e) { |
|||
console.log('value 发生变化：' + e.detail.value) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,105 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head title="swiper,可滑动视图"></page-head> |
|||
<view class="uni-margin-wrap"> |
|||
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> |
|||
<swiper-item> |
|||
<view class="swiper-item uni-bg-red">A</view> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<view class="swiper-item uni-bg-green">B</view> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<view class="swiper-item uni-bg-blue">C</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
|
|||
<view class="swiper-list"> |
|||
<view class="uni-list-cell uni-list-cell-pd"> |
|||
<view class="uni-list-cell-db">指示点</view> |
|||
<switch :checked="indicatorDots" @change="changeIndicatorDots" /> |
|||
</view> |
|||
<view class="uni-list-cell uni-list-cell-pd"> |
|||
<view class="uni-list-cell-db">自动播放</view> |
|||
<switch :checked="autoplay" @change="changeAutoplay" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-common-mt"> |
|||
<text>幻灯片切换时长(ms)</text> |
|||
<text class="info">{{duration}}</text> |
|||
</view> |
|||
<slider @change="durationChange" :value="duration" min="500" max="2000" /> |
|||
<view class="uni-common-mt"> |
|||
<text>自动播放间隔时长(ms)</text> |
|||
<text class="info">{{interval}}</text> |
|||
</view> |
|||
<slider @change="intervalChange" :value="interval" min="2000" max="10000" /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
background: ['color1', 'color2', 'color3'], |
|||
indicatorDots: true, |
|||
autoplay: true, |
|||
interval: 2000, |
|||
duration: 500 |
|||
} |
|||
}, |
|||
methods: { |
|||
changeIndicatorDots(e) { |
|||
this.indicatorDots = !this.indicatorDots |
|||
}, |
|||
changeAutoplay(e) { |
|||
this.autoplay = !this.autoplay |
|||
}, |
|||
intervalChange(e) { |
|||
this.interval = e.detail.value |
|||
}, |
|||
durationChange(e) { |
|||
this.duration = e.detail.value |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.uni-margin-wrap { |
|||
width:690rpx; |
|||
width: 100%;; |
|||
} |
|||
.swiper { |
|||
height: 300rpx; |
|||
} |
|||
.swiper-item { |
|||
display: block; |
|||
height: 300rpx; |
|||
line-height: 300rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.swiper-list { |
|||
margin-top: 40rpx; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.uni-common-mt{ |
|||
margin-top:60rpx; |
|||
position:relative; |
|||
} |
|||
|
|||
.info { |
|||
position: absolute; |
|||
right:20rpx; |
|||
} |
|||
|
|||
.uni-padding-wrap { |
|||
width:550rpx; |
|||
padding:0 100rpx; |
|||
} |
|||
</style> |
|||
@ -1,47 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-title">默认样式</view> |
|||
<view> |
|||
<switch checked @change="switch1Change" /> |
|||
<switch @change="switch2Change" /> |
|||
</view> |
|||
<view class="uni-title">不同颜色和尺寸的switch</view> |
|||
<view> |
|||
<switch checked color="#FFCC33" style="transform:scale(0.7)"/> |
|||
<switch color="#FFCC33" style="transform:scale(0.7)"/> |
|||
</view> |
|||
|
|||
<view class="uni-title">推荐展示样式</view> |
|||
</view> |
|||
<view class="uni-list"> |
|||
<view class="uni-list-cell uni-list-cell-pd"> |
|||
<view class="uni-list-cell-db">开启中</view> |
|||
<switch checked /> |
|||
</view> |
|||
<view class="uni-list-cell uni-list-cell-pd"> |
|||
<view class="uni-list-cell-db">关闭</view> |
|||
<switch /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'switch 开关' |
|||
} |
|||
}, |
|||
methods: { |
|||
switch1Change: function (e) { |
|||
console.log('switch1 发生 change 事件，携带值为', e.detail.value) |
|||
}, |
|||
switch2Change: function (e) { |
|||
console.log('switch2 发生 change 事件，携带值为', e.detail.value) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
@ -1,74 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="text-box" scroll-y="true"> |
|||
<text>{{text}}</text> |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<button type="primary" :disabled="!canAdd" @click="add">add line</button> |
|||
<button type="warn" :disabled="!canRemove" @click="remove">remove line</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'text', |
|||
texts: [ |
|||
'HBuilder，400万开发者选择的IDE', |
|||
'MUI，轻巧、漂亮的前端开源框架', |
|||
'wap2app，M站快速转换原生体验的App', |
|||
'5+Runtime，为HTML5插上原生的翅膀', |
|||
'HBuilderX，轻巧、极速，极客编辑器', |
|||
'uni-app，终极跨平台方案', |
|||
'HBuilder，400万开发者选择的IDE', |
|||
'MUI，轻巧、漂亮的前端开源框架', |
|||
'wap2app，M站快速转换原生体验的App', |
|||
'5+Runtime，为HTML5插上原生的翅膀', |
|||
'HBuilderX，轻巧、极速，极客编辑器', |
|||
'uni-app，终极跨平台方案', |
|||
'......' |
|||
], |
|||
text: '', |
|||
canAdd: true, |
|||
canRemove: false, |
|||
extraLine: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
add: function(e) { |
|||
this.extraLine.push(this.texts[this.extraLine.length % 12]); |
|||
this.text = this.extraLine.join('\n'); |
|||
this.canAdd = this.extraLine.length < 12; |
|||
this.canRemove = this.extraLine.length > 0; |
|||
}, |
|||
remove: function(e) { |
|||
if (this.extraLine.length > 0) { |
|||
this.extraLine.pop(); |
|||
this.text = this.extraLine.join('\n'); |
|||
this.canAdd = this.extraLine.length < 12; |
|||
this.canRemove = this.extraLine.length > 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.text-box { |
|||
margin-bottom: 40rpx; |
|||
padding: 40rpx 0; |
|||
display: flex; |
|||
min-height: 300rpx; |
|||
background-color: #FFFFFF; |
|||
justify-content: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
font-size: 30rpx; |
|||
color: #353535; |
|||
line-height: 1.8; |
|||
} |
|||
</style> |
|||
@ -1,31 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view> |
|||
<view class="uni-textarea"> |
|||
<textarea @blur="bindTextAreaBlur" auto-height /> |
|||
</view> |
|||
<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view> |
|||
<view class="uni-textarea"> |
|||
<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'textarea', |
|||
focus: false |
|||
} |
|||
}, |
|||
methods: { |
|||
bindTextAreaBlur: function (e) { |
|||
console.log(e.detail.value) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,104 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<video id='video1' class="video" :src="src" autoplay="false" duration="" controls="true" :danmu-list="list" |
|||
danmu-btn="true" enable-danmu="true" :loop="true" muted="true" initial-time="" direction="-90" |
|||
show-mute-btn="true" @play="onstart" @pause="onpause" @ended="onfinish" @error="onfail" @waiting="waiting" |
|||
@timeupdate="timeupdate" @fullscreenchange="fullscreenchange"></video> |
|||
<button class="btn" @click="play">播放</button> |
|||
<button class="btn" @click="pause">暂停</button> |
|||
<button class="btn" @click="seek">跳转到指定位置</button> |
|||
<button class="btn" @click="stop">停止</button> |
|||
<button class="btn" @click="fullScreen">全屏</button> |
|||
<button class="btn" @click="exitFullScreen">退出全屏</button> |
|||
<button class="btn" @click="playbackRate">设置倍速</button> |
|||
<button class="btn" @click="sendDanmu">发送弹幕</button> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v", |
|||
fil: true, |
|||
list: [{ |
|||
text: '要显示的文本', |
|||
color: '#FF0000', |
|||
time: 9 |
|||
}] |
|||
} |
|||
}, |
|||
onReady() { |
|||
this.context = uni.createVideoContext("video1", this); |
|||
}, |
|||
methods: { |
|||
onstart(e) { |
|||
console.log("onstart:" + JSON.stringify(e)); |
|||
}, |
|||
onpause(e) { |
|||
console.log("onpause:" + JSON.stringify(e)); |
|||
}, |
|||
onfinish(e) { |
|||
console.log("onfinish:" + JSON.stringify(e)); |
|||
}, |
|||
onfail(e) { |
|||
console.log("onfail:" + JSON.stringify(e)); |
|||
}, |
|||
fullscreenchange(e) { |
|||
console.log("fullscreenchange:" + JSON.stringify(e)); |
|||
}, |
|||
waiting(e) { |
|||
console.log("waiting:" + JSON.stringify(e)); |
|||
}, |
|||
timeupdate(e) { |
|||
console.log("timeupdate:" + JSON.stringify(e)); |
|||
}, |
|||
|
|||
play() { |
|||
this.context.play(); |
|||
}, |
|||
pause() { |
|||
this.context.pause(); |
|||
}, |
|||
seek() { |
|||
this.context.seek(20); |
|||
}, |
|||
stop() { |
|||
this.context.stop(); |
|||
}, |
|||
fullScreen() { |
|||
this.context.requestFullScreen({ |
|||
direction: 90 |
|||
}); |
|||
}, |
|||
exitFullScreen() { |
|||
this.context.exitFullScreen(); |
|||
}, |
|||
sendDanmu() { |
|||
this.context.sendDanmu({ |
|||
text: '要显示的弹幕文本', |
|||
color: '#FF0000' |
|||
}); |
|||
}, |
|||
playbackRate() { |
|||
this.context.playbackRate(2); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.video { |
|||
width: 750rpx; |
|||
/* #ifdef H5 */ |
|||
width: 100%; |
|||
/* #endif */ |
|||
height: 400rpx; |
|||
background-color: #808080; |
|||
} |
|||
|
|||
.btn { |
|||
margin-top: 5px; |
|||
margin-bottom: 5px; |
|||
} |
|||
</style> |
|||
@ -1,94 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head :title="title"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt" v-if="showVideo"> |
|||
<view> |
|||
<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v" |
|||
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls poster="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b1476d40-4e5f-11eb-b997-9918a5dda011.png"></video> |
|||
</view> |
|||
<!-- #ifndef MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU || MP-LARK || MP-JD --> |
|||
<view class="uni-list uni-common-mt"> |
|||
<view class="uni-list-cell"> |
|||
<view> |
|||
<view class="uni-label">弹幕内容</view> |
|||
</view> |
|||
<view class="uni-list-cell-db"> |
|||
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="uni-btn-v"> |
|||
<button @click="sendDanmu" class="page-body-button">发送弹幕</button> |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'video', |
|||
src: '', |
|||
danmuList: [{ |
|||
text: '第 1s 出现的弹幕', |
|||
color: '#ff0000', |
|||
time: 1 |
|||
}, |
|||
{ |
|||
text: '第 3s 出现的弹幕', |
|||
color: '#ff00ff', |
|||
time: 3 |
|||
} |
|||
], |
|||
danmuValue: '', |
|||
showVideo: false |
|||
} |
|||
}, |
|||
onReady: function(res) { |
|||
// #ifndef MP-ALIPAY || MP-TOUTIAO |
|||
this.videoContext = uni.createVideoContext('myVideo') |
|||
// #endif |
|||
// #ifdef APP-PLUS || MP-BAIDU |
|||
setTimeout(()=>{ |
|||
this.showVideo = true |
|||
},350) |
|||
// #endif |
|||
// #ifndef APP-PLUS || MP-BAIDU |
|||
this.showVideo = true |
|||
// #endif |
|||
}, |
|||
methods: { |
|||
sendDanmu: function() { |
|||
this.videoContext.sendDanmu({ |
|||
text: this.danmuValue, |
|||
color: this.getRandomColor() |
|||
}); |
|||
this.danmuValue = ''; |
|||
}, |
|||
videoErrorCallback: function(e) { |
|||
uni.showModal({ |
|||
content: e.target.errMsg, |
|||
showCancel: false |
|||
}) |
|||
}, |
|||
getRandomColor: function() { |
|||
const rgb = [] |
|||
for (let i = 0; i < 3; ++i) { |
|||
let color = Math.floor(Math.random() * 256).toString(16) |
|||
color = color.length == 1 ? '0' + color : color |
|||
rgb.push(color) |
|||
} |
|||
return '#' + rgb.join('') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
video { |
|||
width: 690rpx; |
|||
width: 100%; |
|||
height: 400px; |
|||
} |
|||
</style> |
|||
@ -1,36 +0,0 @@ |
|||
describe('pages/component/view/view.vue', () => { |
|||
let page |
|||
beforeAll(async () => { |
|||
// 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
|
|||
page = await program.reLaunch('/pages/component/view/view') |
|||
await page.waitFor(1000) |
|||
}) |
|||
|
|||
/** |
|||
* 测试步骤 |
|||
* 1. 检测页面标题是否为 view |
|||
*/ |
|||
it('view 组件标题', async () => { |
|||
let view = await page.$('.common-page-head-title') |
|||
expect(await view.text()).toBe('view') |
|||
}) |
|||
/** |
|||
* 测试步骤 |
|||
* 1. uni-flex 的个数 |
|||
* 2. flex-item 的个数 |
|||
*/ |
|||
it('view 个数', async () => { |
|||
let viewLen = await page.$$('.uni-flex') |
|||
expect(viewLen.length).toBe(18) |
|||
let viewItemLen = await page.$$('.flex-item') |
|||
expect(viewItemLen.length).toBe(6) |
|||
}) |
|||
/** |
|||
* 测试步骤 |
|||
* 1. 第一个颜色块的色值是否为 rgb(247, 98, 96) |
|||
*/ |
|||
it('view 前三个元素颜色', async () => { |
|||
let viewRed = await page.$('.uni-bg-red') |
|||
expect(await viewRed.style('backgroundColor')).toBe('rgb(247, 98, 96)') |
|||
}) |
|||
}) |
|||
@ -1,146 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<page-head title="view"></page-head> |
|||
<view class="uni-padding-wrap uni-common-mt"> |
|||
<view class="uni-hello-text"> |
|||
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction: |
|||
row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。 |
|||
</view> |
|||
|
|||
<view class="uni-title uni-common-mt"> |
|||
flex-direction: row |
|||
<text>\n横向布局</text> |
|||
</view> |
|||
<view class="uni-flex uni-row"> |
|||
<view class="flex-item uni-bg-red">A</view> |
|||
<view class="flex-item uni-bg-green">B</view> |
|||
<view class="flex-item uni-bg-blue">C</view> |
|||
</view> |
|||
|
|||
<view class="uni-title uni-common-mt"> |
|||
flex-direction: column |
|||
<text>\n纵向布局</text> |
|||
</view> |
|||
<view class="uni-flex uni-column"> |
|||
<view class="flex-item flex-item-V uni-bg-red">A</view> |
|||
<view class="flex-item flex-item-V uni-bg-green">B</view> |
|||
<view class="flex-item flex-item-V uni-bg-blue">C</view> |
|||
</view> |
|||
|
|||
<view class="uni-title uni-common-mt"> |
|||
更多布局示例 |
|||
<text>\nflex布局演示</text> |
|||
</view> |
|||
<view> |
|||
<view class="text">纵向布局-自动宽度</view> |
|||
<view class="text" style="width: 300rpx;">纵向布局-固定宽度</view> |
|||
<view class="uni-flex uni-row"> |
|||
<view class="text">横向布局-自动宽度</view> |
|||
<view class="text">横向布局-自动宽度</view> |
|||
</view> |
|||
<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;"> |
|||
<view class="text">横向布局-居中</view> |
|||
<view class="text">横向布局-居中</view> |
|||
</view> |
|||
<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;"> |
|||
<view class="text">横向布局-居右</view> |
|||
<view class="text">横向布局-居右</view> |
|||
</view> |
|||
<view class="uni-flex uni-row"> |
|||
<view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view> |
|||
<view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view> |
|||
</view> |
|||
<view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;"> |
|||
<view class="text">横向布局-两端对齐</view> |
|||
<view class="text">横向布局-两端对齐</view> |
|||
</view> |
|||
<view class="uni-flex uni-row"> |
|||
<view class="text" style="width: 200rpx;">固定宽度</view> |
|||
<view class="text" style="-webkit-flex: 1;flex: 1;">自动占满余量</view> |
|||
</view> |
|||
<view class="uni-flex uni-row"> |
|||
<view class="text" style="width: 200rpx;">固定宽度</view> |
|||
<view class="text" style="-webkit-flex: 1;flex: 1;">自动占满</view> |
|||
<view class="text" style="width: 200rpx;">固定宽度</view> |
|||
</view> |
|||
<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;"> |
|||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view> |
|||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view> |
|||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view> |
|||
</view> |
|||
<view class="uni-flex uni-row"> |
|||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-start;align-items: flex-start;"> |
|||
<text>垂直居顶</text> |
|||
</view> |
|||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;"> |
|||
<text>垂直居中</text> |
|||
</view> |
|||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;"> |
|||
<text>垂直居底</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="uni-title uni-common-mt"> |
|||
组合示例 |
|||
<text>\nflex布局演示</text> |
|||
</view> |
|||
<view class="uni-flex uni-row"> |
|||
<view class="text uni-flex" style="width: 200rpx;height: 220rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;"> |
|||
<image src="../../../static/plus.png" style="width: 150rpx;height: 150rpx;"></image> |
|||
</view> |
|||
<view class="uni-flex uni-column" style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;"> |
|||
<view class="text" style="height: 120rpx;text-align: left;padding-left: 20rpx;padding-top: 10rpx;"> |
|||
文字居左，留出左间距 |
|||
</view> |
|||
<view class="uni-flex uni-row"> |
|||
<view class="text" style="-webkit-flex: 1;flex: 1;">剩余数量</view> |
|||
<view class="text" style="-webkit-flex: 1;flex: 1;">立即购买</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.flex-item { |
|||
width: 33.3%; |
|||
height: 200rpx; |
|||
text-align: center; |
|||
line-height: 200rpx; |
|||
} |
|||
|
|||
.flex-item-V { |
|||
width: 100%; |
|||
height: 150rpx; |
|||
text-align: center; |
|||
line-height: 150rpx; |
|||
} |
|||
|
|||
.text { |
|||
margin: 15rpx 10rpx; |
|||
padding: 0 20rpx; |
|||
background-color: #ebebeb; |
|||
height: 70rpx; |
|||
line-height: 70rpx; |
|||
text-align: center; |
|||
color: #777; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.desc { |
|||
/* text-indent: 40rpx; */ |
|||
} |
|||
.flex-pc { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
@ -1,22 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<web-view src="/hybrid/html/local.html" @message="getMessage"></web-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
methods: { |
|||
getMessage(e) { |
|||
uni.showModal({ |
|||
content: JSON.stringify(e.detail), |
|||
showCancel: false |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue