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

1、用户登录/注册功能的实现
该小程序提供登录/注册功能，输入用户名和密码点击登录，注册时系统首先判断输入手机号码是否正确，如果不正确则提示“输入号码不能为空”，“手机号格式不正确”或者“手机号已被注册”，若输入信息正确，则连接发送验证码的接口。注册后登录成功则显示个人信息界面，否则提示用户名或密码错误。该功能位于“设置”版块中的“切换账号”模块内。
图1 用户登录/注册

该模块主要包括两个部分：
(1)登录界面是使用发送ajax请求到服务器，设置点击登陆的时候触发的事件和弹出提示。
(2)注册界面先获取到的手机栏中的值，后端判断是否已被注册，已被注册返回1，未被注册返回0，设置发送验证码接口，当手机号正确的时候提示用户短信验证码已经发送，设置一分钟的倒计时，如果当秒数小于等于0时，停止计时器且按钮文字变成重新发送，按钮变成可用状态，倒计时的秒数也要恢复成默认秒数，即让获取验证码的按钮恢复到初始化状态。判断手机号输入有问题时提示用户错误信息。
注册功能关键代码

	 <view wx:if="{{!success}}">
	 <view class='row'>
	        <view class='info'>
	               
	         view>
	          <button class='button' bindtap='doGetCode' disabled='{{disabled}}' 
	          style="background-color:{{color}}" >{{text}}button>
	 view>
	 <view class='row'>
	        <view class='info'>
	               
	         view> 
	 view>
	  <view class='row'>
	        <view class='info'>
	               
	         view> 
	 view>
	  <view class='row'>
	        <view class='info'>
	               
	         view> 
	 view>
	 <view class='uploadimg'>
	 <button type="primary" bindtap='submit'>提交button>view>
	 view>
	 
	 <view class='cheer'><icon type="success" size="24"/> 恭喜您注册成功!view>
	 
	 返回首页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
	          }) }
	      })} }

登录功能关键代码

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

	
	<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>

音频功能主要代码

	
	<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('获取权限失败，
	                        给出不给权限就无法正常使用的提示')
	                        }
	                    }})}
	              }}) }
	        })
	      } }) },