版权声明：这是博主的原创文章，喜欢请支持一下。 https://blog.csdn.net/qq_39925376/article/details/89248901
1、用户登录/注册功能的实现
该小程序提供登录/注册功能，输入用户名和密码点击登录，注册时系统首先判断输入手机号码是否正确，如果不正确则提示“输入号码不能为空”，“手机号格式不正确”或者“手机号已被注册”，若输入信息正确，则连接发送验证码的接口。注册后登录成功则显示个人信息界面，否则提示用户名或密码错误。该功能位于“设置”版块中的“切换账号”模块内。
图1 用户登录/注册
该模块主要包括两个部分：
(1)登录界面是使用发送ajax请求到服务器，设置点击登陆的时候触发的事件和弹出提示。
(2)注册界面先获取到的手机栏中的值，后端判断是否已被注册，已被注册返回1，未被注册返回0，设置发送验证码接口，当手机号正确的时候提示用户短信验证码已经发送，设置一分钟的倒计时，如果当秒数小于等于0时，停止计时器且按钮文字变成重新发送，按钮变成可用状态，倒计时的秒数也要恢复成默认秒数，即让获取验证码的按钮恢复到初始化状态。判断手机号输入有问题时提示用户错误信息。
注册功能关键代码
<!--pages/register.wxml-->
<view wx:if="{{!success}}">
<view class='row'>
<view class='info'>
<input class= 'info-input1'
bindinput="handleInputPhone" placeholder="请输入手机号" />
</view>
<button class='button' bindtap='doGetCode' disabled='{{disabled}}'
style="background-color:{{color}}" >{{text}}</button>
</view>
<view class='row'>
<view class='info'>
<input class= 'info-input'
bindinput="handleVerificationCode" placeholder="请输入验证码" />
</view>
</view>
<view class='row'>
<view class='info'>
<input type='password' class= 'info-input'
bindinput="handleNewChanges" placeholder="请输入密码" />
</view>
</view>
<view class='row'>
<view class='info'>
<input type='password' class= 'info-input'
bindinput="handleNewChangesAgain" placeholder="请重新输入密码" />
</view>
</view>
<view class='uploadimg'>
<button type="primary" bindtap='submit'>提交</button></view>
</view>
<view class = 'success' wx:if="{{success}}">
<view class='cheer'><icon type="success" size="24"/> 恭喜您注册成功!</view>
<button type = "default" class = 'return' bindtap='return_home'>
返回首页</button>
</view>
// pages/register/index.js
Page({
data: {
text: '获取验证码', //按钮文字
currentTime: 61, //倒计时
disabled: false, //按钮是否禁用
phone: '', //获取到的手机栏中的值
VerificationCode: '',
Code: '',
NewChanges: '',
NewChangesAgain: '',
success: false,
state: ''
},
return_home: function (e) {
wx.navigateTo({
url: 'pages/login/login',
}) },
handleInputPhone: function (e) {
this.setData({
phone: e.detail.value
})},
handleVerificationCode: function (e) {
console.log(e);
this.setData({
Code: e.detail.value
})
},
handleNewChanges: function (e) {
console.log(e);
this.setData({
NewChanges: e.detail.value
})
},
handleNewChangesAgain: function (e) {
console.log(e);
this.setData({
NewChangesAgain: e.detail.value
})
},
onLoad: function () {
wx.setNavigationBarTitle({
title: '注册'
})
},
doGetCode: function () {
var that = this;
that.setData({
disabled: true,
color: '#ccc',
})
var phone = that.data.phone;
var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值
var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空
var phone = that.data.phone;
var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值
var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空
wx.request({
url: '', //后端判断是否已被注册， 已被注册返回1 ，未被注册返回0
method: "GET",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
that.setData({
state: res.data
})
if (phone == '') {
warn = "号码不能为空";
} else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
warn = "手机号格式不正确";
} //手机号已被注册提示信息
else if (that.data.state == 1) { //判断是否被注册
warn = "手机号已被注册";
}
else {
wx.request({
url: '', //填写发送验证码接口
method: "POST",
data: {
coachid: that.data.phone
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res.data)
that.setData({
VerificationCode: res.data.verifycode
})
wx.showToast({
title: '短信验证码已发送',
icon: 'none',
duration: 2000
});
//设置一分钟的倒计时
var interval = setInterval(function () {
currentTime--; //每执行一次让倒计时秒数减一
that.setData({
text: currentTime + 's', //按钮文字变成倒计时对应秒数
})
if (currentTime <= 0) {
clearInterval(interval)
that.setData({
text: '重新发送',
currentTime: 61,
disabled: false,
color: '#33FF99'
})
}}, 100);
}})
};
if (warn != null) {
wx.showModal({
title: '提示',
content: warn
})
that.setData({
disabled: false,
color: '#33FF99'
})
return;
} }})
},
submit: function (e) {
var that = this
if (this.data.Code == '') {
wx.showToast({
title: '请输入验证码',
image: '../images/1.jpg',
duration: 2000
})
return
} else if (this.data.Code != this.data.VerificationCode) {
wx.showToast({
title: '验证码错误',
image: '../images/2.jpg',
duration: 2000
})
return
}
else if (this.data.NewChanges == '') {
wx.showToast({
title: '请输入密码',
image: '../images/3.jpg',
duration: 2000
})
return
} else if (this.data.NewChangesAgain != this.data.NewChanges) {
wx.showToast({
title: '两次密码不一致',
image: '../images/4.jpg',
duration: 2000
})
return
} else {
var that = this
var phone = that.data.phone;
wx.request({
url: getApp().globalData.baseUrl + '/Coachs/insert',
method: "POST",
data: {
coachid: phone,
coachpassword: that.data.NewChanges
},
header: {
"content-type": "application/x-www-form-urlencoded"
},
success: function (res) {
wx.showToast({
title: '提交成功~',
icon: 'loading',
duration: 2000
})
console.log(res)
that.setData({
success: true
}) }
})} }
登录功能关键代码
<!--pages/login.wxml-->
<view class="login">
<image class="avatar" src="../images/3.jpg" ></image>
<view class="doc-title zan-hairline--bottom"></view>
<view class="username">
<text class='word'>用户名</text>
<input placeholder="请输入你的用户名" type="text"
bindinput="usernameinput" class='name'/>
</view>
<view class="password">
<text class='word'>密码</text>
<input placeholder="请输入你的密码" type="password"
bindinput="passwordinput" class='name'/>
</view>
<view>
<button type="submit" catchtap="signin" class='signin'>登录</button>
<button type="submit" catchtap="register"
bindtap='register' class='signin'>注册</button>
</view>
</view>
/* pages/login.wxss */
.avatar{
width: 100px;
height: 100px;
display: block;
margin-left: 140px;
}
.username{
width: 100%;
height: 50px;
}
.signin{
margin-left: 20px;
margin-right: 20px;
background: rgb(20, 223, 71);
color: #FFFFFF;
}
.name{
text-indent: 2em;
}
.word{
text-align: 5em;
}
2、在线阅读功能的实现
用户进入在线阅读主界面，点击进入文章页面，将看到该文章的发布时间、文章简介、主要内容以及返回按钮等，此外用户在该页面还添加了对文章进行打赏的功能，实现了通过按钮直接进入到与读者的聊天页面中，且在文章页面上方设置了搜索栏，方便用户通过关键字搜索文章。为了防止一次性出现过多文章，设置每次只出现一篇，如果文章超过更新数量，显示“无更多文章”，小程序自动检查设备所处网络状态，如果是非wifi网络如4G、3G时，提示“您当前不在wifi网络下，会产生流量费用”。
图2 在线阅读文章的界面
图3 文章具体内容界面
在线推送功能的代码实现主要包括以下几个部分：
(1) 文章列表模块的实现部分，主要分为搜索框，文章列表模板以及循环输出列表模块。
(2) 文章内容模块包括连接weiphp系统，聊天界面，打赏功能。
3、音视频浏览功能的实现
用户除了可以阅读文章，还能浏览音频和视频，页面底部是关于微信小程序的介绍及导航功能。
图4 视频和音频界面
视频功能主要代码
data:{
videoPlay: null,
dataList: [],
},
onLoad: function () {
this.getData();
wx.hideShareMenu();
},
videoPlay: function (e) {
var _index = e.currentTarget.dataset.id
this.setData({
_index: _index
})
//停止正在播放的视频
var videoContextPrev = wx.createVideoContext(_index + "")
videoContextPrev.stop();
setTimeout(function () {
//将点击视频进行播放
var videoContext = wx.createVideoContext(_index + "")
videoContext.play();
}, 500)
},
// 模拟数据加载
getData: function () {
this.setData({
dataList: [{ "id": 1, "title": "MV-香蜜沉沉烬如霜(毛不易)", "content": "videos/1.mp4", "cover": "imgs/2.jpg" }, { "id": 2, "title": "MV-四时令(慕寒)", "content": "videos/2.mp4", "cover": "imgs/1.jpg" }]
});
}
<!--ame.wxml-->
<view class='course'>我的视频</view>
<view class='blank'></view>
<view>
<!--首页-->
<scroll-view class='nav-page'>
<view class="item-box " wx:for="{{dataList}}" wx:key="item">
<!-- 标题层 -->
<view class="video-title-box" >
<view class='video-title'>{{item.title}}</view>
</view>
<!-- 视频图片层 -->
<view data-id="{{index}}" class="video-image-box" style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="videoPlay">
<view class="video-cover-box">
<image class="video-image" src="{{item.cover}}" mode="aspectFit">
</image>
</view>
<image class="video-image-play" mode="scaleToFill"></image>
</view>
<video src="{{item.content}}" data-id="{{index}}" class='video' wx:if="{{_index == index}}" objectFit='contain' autoplay='true' controls></video>
</view>
</scroll-view>
</view>
音频功能主要代码
<!--ame.wxml-->
<view class='blank'></view>
<view class='course'>我的音乐</view>
<view class='blank'></view>
<audio poster="{{poster}}" name="{{name}}" author="{{author}}"
src="{{src}}"
id="myAudio" controls loop bindplay="funplay" bindpause="funpause"
bindtimeupdate="funtimeupdate" bindended="funended"
binderror="funerror"></audio>
<view class='uploadimg'>
<button bindtap="audioPlay">播放</button>
<button bindtap="audioPause">暂停</button>
<button bindtap='pay'>购买此单曲</button>
</view>
4、 转入博客界面功能的实现
用户可以通过小程序访问外部网站时，如直接浏览博客，并在上面进行阅读博文，登录评论等操作。
图5 csdn博客界面
转入博客界面的关键代码
<web-view src="https://blog.csdn.net/qq_39925376"></web-view>
5、 用户个人信息管理版块
该模块又细分为联系客服、隐私设置、个人喜好管理、基本信息界面、登录注册等模块，登录注册模块前面已经讲到，此处不再赘述。联系客服可以选择直接呼叫或者将电话存为常用联系人，隐私设置主要设置加好友时是否需要验证、是否推荐通讯录朋友等，个人喜好管理包括爱好、性别、喜欢这首歌的的理由，以便更好的推荐歌曲给用户。基本信息界面包括账单明细，订单管理，收藏和地址管理等。
图6 拨打电话和号码保存界面
图7 设置界面
设置功能主要代码
<form bindsubmit="formSubmit" bindreset="formReset">
<view class='ys'>账号与安全</view>
<view class='back-a'></view>
<view class='ys'>新消息通知</view>
<view class='back-b'></view>
<view bindtap='ys' class='ys'>隐私</view>
<view class='back-b'></view>
<view class='ys'>通用</view>
<view class='back-a'></view>
<view bindtap='dc' class='ys'>个人信息</view>
<view class='back-b'></view>
<view class='ys'>帮助与反馈</view>
<view class='back-b'></view>
<view class='ys'>关于微信</view>
<view class='back-a'></view>
<view class='ys'>插件</view>
<view class='back-a'></view>
<button bindtap='login'>切换账号</button>
<view class='back-a'></view>
<button >退出登录</button>
<view class='back-c'></view>
</form>
与读者交流区代码
<view style="overflow-x:hidden;overflow-y:auto">
<view class="messageList">
<block wx:for="{{messages}}">
<navigator url="">
<view class="item">
<!--头像部分-->
<view class="item-left">
<image class="image" src="{{item.url}}"></image>
<view class="mark" wx:if="{{item.num>0}}"><text class="text">
{{item.num}}</text></view>
</view>
<!--中间消息-->
<view class="item-middle">
<view ><text class="title">{{item.title}}</text></view>
<view><text class="message">{{item.message}}</text></view>
</view>
<!--右边部分-->
<view class="item-right">
<view class="message"><text class="time">
{{item.time}}</text></view>
<view wx:if="{{!item.remove}}" class="item-right2">
<image src="{{item.flag}}" class="img_flag"></image></view>
</view>
</view>
<view class="line"></view>
</navigator>
</block>
</view>
</view>
var app = getApp()
Page({
data: {
messages: [
{
url: "../images/31.jpg",
title: "小鱼",
message: '没问题',
num: 2,
time: '11:15',
remove: false,
flag: '../images/14.jpg'
}]
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
wx.getUserInfo(function (userInfo) {
//更新数据
that.setData({
userInfo: userInfo
})
})}
})
6、 其他功能版块8
该模块主要包括查看地图，获取位置以及拍照保存功能。
图8 拍照保存界面
照片保存界面主要代码
//photo.js
photo:function(){
wx.chooseImage({
success: function (res) {
var tempFilePath = res.tempFilePaths[0]
wx.getImageInfo({
src: tempFilePath,
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.path,
success(res) {
console.log("保存图片成功")
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
fail(err) {
console.log('失败')
console.log(err)
if (err.errMsg == "saveImageToPhotosAlbum:fail cancel") {
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting["scope.writePhotosAlbum"])
{
console.log('获取权限成功，
给出再次点击图片保存到相册的提示。')
} else {
console.log('获取权限失败，
给出不给权限就无法正常使用的提示')
}
}})}
}}) }
})
} }) },