微信小程序开发笔记--07

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.jsPage({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 ，未被注册返回0method: "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 = thisif (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 = thisvar 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.idthis.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.jsphoto: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('获取权限失败，给出不给权限就无法正常使用的提示')}}})}}}) }})} }) },

微信小程序开发笔记--07相关推荐

微信小程序开发笔记，你收藏了吗？
** 微信小程序开发笔记,你收藏了吗? ** 最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看. 开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果 ...
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
微信小程序开发笔记——wsdchong
微信小程序开发笔记一.小程序简介小程序起源于微信的webview:此类API最初是提供给腾讯内部一些业务使用,很多外部开发者发现后,照葫芦画瓢,逐渐成为微信中网页的事实标准.2015年初,微信发布 ...
微信小程序开发笔记进阶篇③——onfire.js事件订阅和发布在微信小程序中的使用
文章目录一.前言二.onfire.js介绍三.API介绍四.实例应用五.onfire源码六.实例源码一.前言微信小程序开发笔记--导读二.onfire.js介绍一个简单实用的事件订 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记支付篇②——微信小程序通过小程序云实现微信支付功能
文章目录一.前言二.开通微信支付 2.1 关联商户号 2.2 添加商户号 2.3 管理员授权三.云函数开发 3.1 新建云函数 3.2 云函数代码 3.3 云函数上传并部署四.小程序调用 4. ...
微信小程序开发笔记（1.1）滚动选择器picker的使用
微信小程序开发笔记(1.1)滚动选择器picker的使用前言滚动选择器picker 普通选择器多列选择器时间选择器日期选择器省市区选择器前言最近被拉来做小程序,因为时间比较赶,其他方面 ...

微信小程序开发笔记--07

微信小程序开发笔记--07相关推荐

最新文章

热门文章