小程序实现模拟来电话

小程序实现模拟来电话

前言

         生活中有的场合下有急事需要离场，这时候需要假装接电话称有急事，然后迅速离场，避免尴尬。因此开发使用小程序实现一个模拟来电通话的功能。

一、项目展示

         可以选择来电名称、来电城市、来电铃声。

         模拟等待接听，回显来电名称、来电城市、来电运营商。

         模拟通话，通话计时器、通话内容为来电铃声。

二、来电信息选择

        选择来电名称、来电城市、来电铃声进入接听功能。

        点击拒绝返回首页，点击接听进入等待接听页面。

        回显首页选择的来电名称、来电城市、来电手机号码，来电手机号码因为不能输入收集暂时写死。

        也可以分享给朋友进行恶搞。

<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="{{pe=='image'}}"></image><video autoplay loop muted controls="{{false}}" objectFit="cover" showPlayBtn="{{false}}" src="{{item.url}}" wx:if="{{pe=='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: place("/132", "/0"),userName: a.nickName}) : this.setData({isLogin: !1});},onShow: function() {},bindKeyInput: function (e) {var value = e.detail.valuethis.setData({phone: value})},preview: function() {wx.vibrateShort();debugger;var a = this.data.index, e = ion[0] + " " + ion[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_directTo({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.place("/132", "/0"),userName: a.userInfo.nickName});}});},onShareAppMessage: function() {wx.vibrateShort();debugger;var a = this.data.index, e = ion[0] + " " + ion[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: "=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: "/%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: ".m4a",fromPage: "",standby: !1,incoming: !0,getThrough: !1,autoplay: 0,phonetype: 0,hour: "00",minute: "00",second: "00",ringList: [ ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a", ".m4a" ],audioSrc: ".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.phonen.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(), Ended(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) {(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"};}
});