前言
生活中有的场合下有急事需要离场,这时候需要假装接电话称有急事,然后迅速离场,避免尴尬。因此开发使用小程序实现一个模拟来电通话的功能。
一、项目展示
可以选择来电名称、来电城市、来电铃声。
模拟等待接听,回显来电名称、来电城市、来电运营商。
模拟通话,通话计时器、通话内容为来电铃声。
二、来电信息选择
选择来电名称、来电城市、来电铃声进入接听功能。
点击拒绝返回首页,点击接听进入等待接听页面。
回显首页选择的来电名称、来电城市、来电手机号码,来电手机号码因为不能输入收集暂时写死。
也可以分享给朋友进行恶搞。
<add-tips name="模拟来电"></add-tips>
<swiper autoplay="true" circular="true" class="screen-swiper {{DotStyle?'square-dot':'round-dot'}}" duration="500" indicatorDots="true" interval="5000">
<swiper-item wx:for="{{swiperList}}" wx:key="index">
<image mode="aspectFill" src="{{item.url}}" wx:if="{{item.type=='image'}}"></image>
<video autoplay loop muted controls="{{false}}" objectFit="cover" showPlayBtn="{{false}}" src="{{item.url}}" wx:if="{{item.type=='video'}}"></video>
</swiper-item>
</swiper>
<view class="dian_view margin-top">
<view class="cu-form-group">
<view class="title">来电名称</view>
<picker bindchange="PickerChange" range="{{nameList}}" value="{{index}}">
<view class="picker">
{{index?nameList[index]:'请选择来电名称'}}
</view>
</picker>
</view>
<!--<view class="cu-form-group">
<view class="title">电话号码</view>
<view class="weui-cell weui-cell_input">
<input id="phone_no" type="number" bindblur="bindKeyInput" class="weui-input" maxlength="11" placeholder="输入来电显示的电话号码" />
</view>
</view>-->
<view class="cu-form-group">
<view class="title">来电城市</view>
<picker bindchange="RegionChange" customItem="{{customItem}}" mode="region" value="{{region}}">
<view class="picker">
{{region[0]}},{{region[1]}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">来电铃声</view>
<picker bindchange="PickerlSChange" range="{{ringList}}" value="{{lsIndex}}">
<view class="picker">
{{lsIndex?ringList[lsIndex]:'请选择来电铃声'}}
</view>
</picker>
</view>
<view class="solids-bottom padding-xs flex align-center">
<view class="flex-sub text-center">
<view class="padding">模拟一个来电,假装有急事,迅速离场,避免尴尬。</view>
</view>
</view>
<view class="flex flex-direction">
<button bindtap="preview" class="cu-btn bg-orange lg dian_btn" style="width: 95%; position: relative; left: 19rpx; top: 0rpx">
<text class="cuIcon-dianhua text-white margin-right-sm"></text>伪装来电
</button>
<!-- <ad unit-id="adunit-c33efb73da83b967"></ad>-->
<button class="cu-btn bg-green margin-tb-sm lg dian_btn" openType="share" style="width: 95%; position: relative; left: 19rpx; top: 0rpx" wx:if="{{isLogin}}">
<text class="cuIcon-share text-white margin-right-sm"></text>恶搞好友
</button>
<button bindtap="getUserProfile" class="cu-btn bg-green margin-tb-sm lg dian_btn" openType="getUserProfile" style="width: 95%; position: relative; left: 19rpx; top: 0rpx" wx:else>
<text class="cuIcon-share text-white margin-right-sm"></text>恶搞好友
</button>
</view>
</view>
wxml中本来是有手机号码输入选项的,在审核时不能通过,那么简单修改为获取不到时收集号码时就使用默认值。
var a = getApp();
Page({
data: {
isFromShare: !1,
name: "爸爸",
city: "中国",
ringIndex: 0,
StatusBar: a.globalData.StatusBar,
CustomBar: a.globalData.CustomBar,
index: null,
lsIndex: null,
isLogin: !1,
bgPic: "",
userName: "",
region: [ "广东省", "广州市" ],
ringList: [ "儿子我是你爸爸", "我就是你五百年后的老公", "蜡笔小新版脱掉", "哦你妈个头啊", "起床啦宝贝", "猪不会脑筋急转弯", "蚊子", "大姐姐你很无聊吗", "就不接电话", "让子弹飞葛优搞笑台词", "老公啊, 好想你啊", "老实交代", "海大富接电话", "我就静静的看着你装逼", "说你爱我吧", "诺基亚倾慕(变调)" ],
nameList: [ "爸爸", "老公", "小新", "妈", "宝贝", "表妹", "蚊子", "小姐姐", "接电话", "葛优", "老婆", "老实交代", "海公公", "静静", "小可爱", "诺基亚" ,"小情人","普京"],
cardCur: 0,
swiperList: [ {
id: 0,
type: "image",
url: "../../images/0.png"
} ,
{
id: 0,
type: "image",
url: "../../images/1.png"
} ],
phone:""
},
onLoad: function() {
var a = wx.getStorageSync("userInfo");
a ? this.setData({
isLogin: !0,
bgPic: a.avatarUrl.replace("/132", "/0"),
userName: a.nickName
}) : this.setData({
isLogin: !1
});
},
onShow: function() {},
bindKeyInput: function (e) {
var value = e.detail.value
this.setData({
phone: value
})
},
preview: function() {
wx.vibrateShort();
debugger;
var a = this.data.index, e = this.data.region[0] + " " + this.data.region[1], t = this.data.lsIndex, i = "" ,phone= this.data.phone;
i = a ? this.data.nameList[a] : "好友" + this.data.userName;
var phone_no = (phone && phone.length >= 11) ? this.data.phone: "13000008888";
var n = 0, s = "/pages/phone/phone?id=" + (n = t || 0) + "&userName=" + i + "&city=" + e+"&phone="+phone_no;
wx.redirectTo({
url: s
});
},
PickerChange: function(a) {
console.log(a), this.setData({
index: a.detail.value
});
},
PickerlSChange: function(a) {
console.log(a), this.setData({
lsIndex: a.detail.value
});
},
RegionChange: function(a) {
this.setData({
region: a.detail.value
});
},
getUserProfile: function(a) {
wx.vibrateShort();
var e = this;
e.data.isLogin ? wx.showToast({
title: "请点击下一步哦~",
icon: "none",
duration: 1e3
}) : wx.getUserProfile({
desc: "业务需要",
success: function(a) {
console.log(a), wx.setStorageSync("userInfo", a.userInfo), wx.showToast({
title: "登录成功!快去恶搞好友吧",
icon: "none",
duration: 1e3
}), e.setData({
isLogin: !0,
bgPic: a.userInfo.avatarUrl.replace("/132", "/0"),
userName: a.userInfo.nickName
});
}
});
},
onShareAppMessage: function() {
wx.vibrateShort();
debugger;
var a = this.data.index, e = this.data.region[0] + " " + this.data.region[1], t = this.data.lsIndex, i = "" ,phone= this.data.phone;
i = a ? this.data.nameList[a] : "好友" + this.data.userName;
var phone_no = (phone && phone.length >= 11) ? this.data.phone: "13000000000";
var n = 0, s = "pages/phone/phone?id=" + (n = t || 0) + "&userName=" + i + "&city=" + e+"&phone="+phone_no;
return console.log(s), {
title: "您有一个未接来电,请接听",
path: s,
imageUrl: "https://mmbiz.qpic.cn/mmbiz_png/xY2YYFRCupNvibDaPdUXicYFL7JiaiaUVDperd2wgoSllY2EJTQzLwc1EsiarIiceeOKu4YZHMUabzSG85gEfOjQ6qjg/0?wx_fmt=png"
};
},
onShareTimeline: function() {
return wx.vibrateShort(), {
title: "你有一个未接来电,点击查看~",
imageUrl: "../../images/shareImg.png"
};
}
});
三、模拟通话
回显首页选择的来电人名称。
增加时间计时功能。
通话内容为选择铃声内容。
点击挂断返回首页。
<view class="standby" wx:if="{{standby}}">
<image></image>
</view>
<view class="incoming" wx:if="{{incoming}}">
<view class="incoming-from">
<view class="caller">{{caller}}</view>
</view>
<view class="incoming-from">
<view class="phone">{{phone}}</view>
<view class="address">{{address}}</view>
</view>
<view class="yys" style="position: absolute; left: 322rpx; top: 181rpx">中国移动</view>
<view class="incoming-action">
<view class="remind-message">
<view>
<image src="../../images/icon-1.png"></image>
<text>提醒我</text>
</view>
<view>
<image src="../../images/icon-2.png"></image>
<text>信息</text>
</view>
</view>
<view class="reject-answer">
<view>
<image bindtap="jujuePhone" src="../../images/reject.png"></image>
<text>拒绝</text>
</view>
<view>
<image bindtap="answerPhone" src="../../images/answer.png" style="position: relative; left: 0rpx; top: 16rpx"></image>
<text>接听</text>
</view>
</view>
</view>
</view>
<view class="get-through {{getThrough?'show':' '}}">
<view class="get-through-information" wx:if="{{phonetype=='1'}}">
<view class="caller">{{caller}}</view>
<view class="time">{{minute}}:{{second}}</view>
</view>
<view class="get-through-action">
<view class="get-through-action-list" wx:if="{{phonetype=='1'}}">
<view class="row-list">
<view>
<image src="../../images/icon-3.png"></image>
<text>静音</text>
</view>
<view>
<image src="../../images/icon-4.png"></image>
<text>拨号键盘</text>
</view>
<view>
<image src="../../images/icon-5.png"></image>
<text>免提</text>
</view>
</view>
<view class="row-list">
<view>
<image src="../../images/icon-6.png"></image>
<text>添加通话</text>
</view>
<view>
<image src="../../images/icon-7.png"></image>
<text>FaceTime</text>
</view>
<view>
<image src="../../images/icon-8.png"></image>
<text>通讯录</text>
</view>
</view>
<cover-view class="hung-up">
<cover-image bindtap="rejectPhone" src="../../images/reject.png"></cover-image>
</cover-view>
</view>
<video bindended="rejectPhone" binderror="binderror" class="fullscreen" controls="{{false}}" direction="0" id="video" objectFit="fill" src="{{src}}" wx:else>
<cover-view class="hung-up">
<cover-image bindtap="rejectPhone" src="../../images/reject.png"></cover-image>
</cover-view>
</video>
</view>
</view>
<form reportSubmit bindsubmit="submitFormIds">
<button class="submit-template-message" formType="submit" style="position: absolute; left: 0rpx; top: 4rpx"></button>
</form>
require("../../C17AA740AD01E2BFA71CCF4713602B41.js"), getApp();
var n, t = null;
Page({
ringToneContext: null,
timer: null,
data: {
ringSrc: "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/%E8%8B%B9%E6%9E%9C%E6%9D%A5%E7%94%B5%E9%93%83%E5%A3%B0.mp3",
caller: "好友来电",
address: "中国 北京",
Lid: 0,
time: "00:00",
src: "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/0.m4a",
fromPage: "",
standby: !1,
incoming: !0,
getThrough: !1,
autoplay: 0,
phonetype: 0,
hour: "00",
minute: "00",
second: "00",
ringList: [ "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/0.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/1.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/2.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/3.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/4.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/5.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/6.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/8.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/9.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/10.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/11.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/12.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/13.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/14.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/15.m4a", "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/16.m4a" ],
audioSrc: "https://file-1258040671.cos.ap-nanjing.myqcloud.com/media/audit.m4a",
phone:"13000008888"
},
onLoad: function(n) {
debugger;
console.log(n), wx.createInterstitialAd, this.calling();
var t = this.data.caller,
e = this.data.city,
i = this.data.Lid,
phone = this.data.phone
n.userName && (t = n.userName),
n.city && (e = n.city),
n.id && (i = n.id),
n.phone && (phone = n.phone)
phone_no = phone.substr(0,3)+" "+phone.substr(3,4)+" "+phone.substr(7,4)+" ";
this.setData({
caller: t,
address: e,
Lid: i,
phone : phone_no
}), this.playLs();
},
playLs: function() {
var n = this;
n.ringToneContext = wx.createInnerAudioContext(), n.ringToneContext.src = n.data.ringSrc,
n.ringToneContext.play(), n.ringToneContext.onEnded(function() {
n.playLs();
});
},
onReady: function() {},
onShow: function() {},
onHide: function() {},
onUnload: function() {
console.log("销毁页面"), clearInterval(this.timer), this.ringToneContext.stop();
},
onPullDownRefresh: function() {},
onReachBottom: function() {},
calling: function() {
this.timer = setInterval(function() {
wx.vibrateLong();
}, 1600);
},
jujuePhone: function() {
console.log("拒绝"), clearInterval(this.timer), this.ringToneContext.stop(), wx.redirectTo({
url: "/pages/index/index"
});
},
answerPhone: function() {
console.log("接听"), t && t.show().catch(function(n) {
console.error(n);
});
var n = this;
n.setData({
getThrough: "show",
phonetype: 1,
incoming: !1
}), clearInterval(n.timer), n.timeJiShi(), n.mediaPlay();
},
mediaPlay: function() {
clearInterval(this.timer), this.ringToneContext.stop();
var n = this.data.ringList[this.data.Lid];
this.ringToneContext = wx.createInnerAudioContext(), this.ringToneContext.src = n,
this.ringToneContext.play();
},
stop: function() {
clearInterval(n);
},
reload: function() {
this.setData({
hour: "00",
minute: "00",
second: "00"
});
},
timeJiShi: function() {
var t = this, e = t.data.hour, i = t.data.minute, a = t.data.second;
n = setInterval(function() {
++a >= 60 ? (t.setData({
second: "00"
}), a = 0, ++i >= 60 ? (t.setData({
minute: "00"
}), i = 0, e++, t.setData({
hour: e < 10 ? "0" + e : e
})) : t.setData({
minute: i < 10 ? "0" + i : i
})) : t.setData({
second: a < 10 ? "0" + a : a
});
}, 1e3);
},
rejectPhone: function(n) {
clearInterval(this.timer), this.stop(), wx.redirectTo({
url: "/pages/index/index"
});
},
onShareAppMessage: function() {
wx.vibrateShort();
var n = "pages/phone/phone";
return console.log(n), {
title: "来自好友的电话,快来接吧~",
path: n,
imageUrl: "../../images/shareImg.png"
};
},
onShareTimeline: function() {
return wx.vibrateShort(), {
title: "你有一个未接来电,点击查看~",
imageUrl: "../../images/shareImg.png"
};
}
});