Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6005
Star 91
Fork 164
H
hello uni-app x
提交 abd8348b 编写于 作者: Anne_LXM's avatar Anne_LXM
浏览文件
操作

同步uni1 web端api示例

上级 de40580c
隐藏空白更改
内联 并排
Showing with 675 addition and 13 deletion
pages.json
浏览文件 @ abd8348b
......@@ -1280,6 +1280,27 @@
"navigationBarTitleText" : "editor"
}
},
{
"path" : "pages/API/map/map",
"style" :
{
"navigationBarTitleText" : "map"
}
},
{
"path" : "pages/API/make-phone-call/make-phone-call",
"style" :
{
"navigationBarTitleText" : "make-phone-call"
}
},
{
"path" : "pages/API/inner-audio/inner-audio",
"style" :
{
"navigationBarTitleText" : "inner-audio"
}
},
// #endif
// #ifdef APP
{
......
pages/API/inner-audio/inner-audio.uvue 0 → 100644
浏览文件 @ abd8348b
<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 lang="uts">
const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
export default {
data() {
return {
title: "innerAudioContext",
isPlaying: false,
isPlayEnd: false,
currentTime: 0,
duration: 100,
_isChanging:false,
_audioContext: null as InnerAudioContext | null
}
},
computed: {
position() {
return this.isPlayEnd ? 0 : this.currentTime;
},
playImage() {
return this.isPlaying ? "/static/pause.png" : "/static/play.png"
}
},
onLoad() {
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>
pages/API/make-phone-call/make-phone-call.uvue 0 → 100644
浏览文件 @ abd8348b
<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 lang="uts">
export default {
data() {
return {
title: 'makePhoneCall',
disabled: true,
inputValue:''
}
},
methods: {
bindInput: function (e : UniInputEvent) {
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>
pages/API/map/map.uvue 0 → 100644
浏览文件 @ abd8348b
<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">
<button class="button" @click="changeScale">changeScale</button>
<button class="button" @click="addMarkers">addMarkers</button>
<button class="button" @click="addPolyline">addPolyline</button>
<button class="button" @click="addPolygons">addPolygons</button>
<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>
<button class="button" @click="handleTranslateMarker">translateMarker</button>
</scroll-view>
</view>
</template>
<script lang="uts">
type Anchor = {
x : number,
y : number
}
type Callout = {
content : string,
color : string,
fontSize : number,
borderRadius : number,
borderWidth : number,
borderColor : string,
bgColor : string,
padding : string,
display : string
}
type Markers = {
id : string | number,
latitude : number,
longitude : number,
title : string
zIndex : string,
iconPath : string,
rotate ?: number,
width : number,
height : number,
anchor : Anchor,
callout : Callout
}
type Points = {
latitude : number,
longitude : number
}
type Polyline = {
points : Points[],
color : string,
width : number,
dottedLine : boolean,
arrowLine : boolean,
borderColor : string,
borderWidth : number
}
type Polygons = {
points : Points[];
fillColor : string;
strokeWidth : number;
strokeColor : string;
zIndex : number;
}
type Circles = {
latitude : number;
longitude : number;
radius : number;
strokeWidth : number;
color : string;
fillColor : string;
}
const testMarkers = [{
id: 0,
latitude: 39.989631,
longitude: 116.481018,
title: '方恒国际 阜通东大街6号',
zIndex: '1',
iconPath: '../../../static/location.png',
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/uni.png',
clickable: true
}],
showLocation: false,
scale: 13,
showCompass: true,
enable3D: true,
enableOverlooking: true,
enableZoom: true,
enableScroll: true,
enableRotate: true,
enableSatellite: false,
enableTraffic: false,
polyline: [] as Polyline[],
markers: [] as Markers[],
polygons: [] as Polygons[],
circles: [] as Circles[],
includePoints: [] as Points[],
rotate: 0,
skew: 0,
map: null as MapContext | null
}
},
onReady() {
this.map = uni.createMapContext("map1", this);
},
methods: {
changeScale() {
this.scale = this.scale == 9 ? 15 : 9;
},
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;
},
addPolygons() {
this.polygons = testPolygons;
},
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)
})
}
})
},
handleTranslateMarker() {
this.map!.translateMarker({
markerId: 1,
destination: {
latitude: 39.989631,
longitude: 116.481018
},
duration: 2000,
success: ret => {
console.log(JSON.stringify(ret));
}
});
},
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: 100%;
height: 250px;
background-color: #f0f0f0;
}
.scrollview {
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>
pages/tabBar/API.uvue
浏览文件 @ abd8348b
......@@ -280,11 +280,14 @@
name: '安装Apk',
url: 'install-apk'
},
// #endif
// #ifdef WEB
{
name: "打电话",
url: "make-phone-call",
},
// #endif
/* {
name: "打电话",
url: "make-phone-call",
},
/*
{
name: "震动",
url: "vibrate",
......@@ -387,11 +390,14 @@
name: "压缩视频",
url: 'compress-video'
},
// #endif
// #ifdef WEB
{
name: "音频",
url: "inner-audio",
},
// #endif
/* {
name: "音频",
url: "inner-audio",
},
/*
{
name: "背景音频",
url: "background-audio",
......@@ -414,7 +420,13 @@
{
name: '获取当前位置',
url: 'get-location',
},
},
// #ifdef WEB
{
name: "地图控制",
url: "map",
},
// #endif
/* {
name: "使用地图查看位置",
url: "open-location",
......@@ -423,10 +435,6 @@
name: "使用地图选择位置",
url: "choose-location",
},
{
name: "地图控制",
url: "map",
},
{
name: "地图搜索",
url: "map-search",
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或