小程序实现模拟来电话

下面我们举个栗子说明一下

已于 2022-09-17 23:39:56 修改

阅读量2.2k

点赞数

分类专栏：小程序文章标签： javascript 前端开发语言小程序

于 2022-08-24 23:45:28 首次发布

本文链接：https://blog.csdn.net/baijielove1013/article/details/126514639

版权

小程序专栏收录该内容

7 篇文章 2 订阅

订阅专栏

前言

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

一、项目展示

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

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

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

二、来电信息选择

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

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

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

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

<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"
        };
    }
});