微信小程序--低仿珍爱网

哈哈star
685 阅读7分钟

前一段时间进行了微信小程序的学习，也算是为了掌握自己所学的知识，或者是加强自己的基础，巩固对小程序的知识的理解。就觉得好玩吧，哈哈哈哈哈，此处露出姨母般的笑容，就自己利用上课老师讲的，课余同学们的帮助，就仿写了珍爱网小程序。学起来挺容易，能听懂，但是当自己手撸的时候呢？那么，问题来了......很遗憾仿的并不是很好，但是，你努力学习的样子真的很美呀！

话不多说：

开发环境（IDE，Integrated Development Environment ）

  • 微信小程序
  • VSCode

撸小程序肯定得用到微信开发者工具，主要是小程序提供得云开发为我们的后台带来了极大的方便，我用的是vscode编辑器，个人习惯吧。

整体结构

  • 先逛逛
  • 注册信息
  • 登陆后

在撸之前，像我这样水平的小白最容易的犯的一个错误就是从局部到整体，看到了就想要动手，而往往一个好的项目都是从整体到局部，慢慢细化的。这时，我脑海中想起了蜗牛老师所说的“在写项目之前有必要先抖一小时腿”的深刻含义...

先逛逛

tabbar

那会儿正好在学习组件，所以就自己手撸了一个tabbar的组件，为什么要用组件呢？组件的复用性高，定义好一个组件，你可用，他可用，我也可以用。而且，每个组件都有自己的特性，好比如每个人的性格都不一样！

首先我们先写好一个想要的组件，我这里就是一个tabbar：

先写好tabbar的wxml

<!--components/tabbar/index.wxml-->

<view class='lookAround-tabbar'>
  <view class='item-left {{status == 1 ? "active" : "" }}' bindtap='goTuijian' data-status='1'>
    <icon type='tuijian' data-status="1"></icon>
    <text>推荐</text>
  </view>

  <view class='item-center {{status == 2 ? "active" : "" }}' bindtap='goMessage' data-status='2'>
    <icon type='xinxi'></icon>
    <text class=' {{status == 2 ? "active" : "" }}'>消息</text>
  </view>

  <view class='item-right {{status == 3 ? "active" : "" }}' bindtap='goMine' data-status='3'>
    <icon type='wode'></icon>
    <text>我的</text>
  </view>
</view>

这里的icon图标，引入阿里巴巴矢量图标库，下载我们需要的图标和图标代码(主要是样式)后解压然后找到.html文件查看使用方法。

定义好一个tabbar的组件之后，我们到我们要用这个组件的.json文件中引入该组件。

{
  "usingComponents": {
    "tabbar":"../../components/tabbar/index",
    // "定义组件的名字": "组件的路径"
  },
}

推荐页面

这里的数据是我在easy-mock上写的一些假数据。在js中，使用微信官方文档提供的api--request获取到的数据。

  onLoad: function(options) {
    let self = this
    wx.request({
      url: 'https://www.easy-mock.com/mock/5ca457efc4e9a575b66b625c/example/cherishNet',
      success(res) {
        console.log(res.data.data.person[0].url);
        self.setData({
          person: res.data.data.person
        })
      }
    })
  },

再通过wx:for循环渲染到页面中:

<view class="person" wx:for="{{person}}" wx:key="{{item.id}}">
<view class='person-list' bindtap="show">
  <view class='list' >
    <image src='{{item.url}}' class='pic'></image>
    <view class='title'>
      <text class='nickName'>{{item.nickname}}</text>
      <view >
        <text class='age'>{{item.age}}</text>
        <text class='pro'>{{item.professional}}</text>
      </view>
    </view>
  </view>
</view> 
</view>

注册信息

注册信息的页面：

  1. 通过给图片定义 data-id 来设置id，然后给它添加上一个class(添加上边框)以示选中
  2. 这里是一个省份的三级联动:这里
  3. 生日页面也是一个联动，和省份大同小异吧。这里就不多赘述了
  4. 官方组件不够，WeUI来凑，这里使用的就是WeUI基础组件中的Grid组件。
  5. 这个页面简单，和第一个页面一样的，我们选中哪个就给哪个添加样式然后跳转到下一个页面。
  6. 手机号注册。要做当然就要做的像样点啦，注册肯定不能注册110之类的吧，哈哈哈。所以我这里就使用了一个正则表达式：var myPhone = /^1[3-9][0-9]{9}$/;。 检测是否输入的是一个合法的手机号:
    var myPhone = /^1[3-9][0-9]{9}$/;
    if (this.data.phone === '') {
      wx.showToast({
        title: '手机号不能为空！',
        icon: 'none',
        duration: 1000
      })
      return false
    } else if (!myPhone.test(this.data.phone)) {
      wx.showModal({
        title: '手机号非法',
        content: '请输入正确的手机号码！',
        showCancel: false
      })
    } else {
      wx.showToast({
        title: '注册成功！！！',
        icon: 'none',
        duration: 1000
      })
      setTimeout(() => {

        wx.navigateTo({
          url: '/pages/login/login',
        })
      }, 2000)
    }

然后登录的验证码，请恕我没有那么正式了，我仅仅是简单地随机生成一个四位数，然后讲button的disabled的属性设置为false。

说到正则，之前看到过一篇文章正则表达式不要背,分享给此刻在读文章的您，也感谢大佬的文章！

从一个页面将参数传到另一个页面，我的第一个页面到第二个页面：

wx.navigateTo({
        url: '/pages/where/where?userId=' + self.data.userId + "&gender=" + self.data.gender,
      })

在where页面接收：

onLoad:function(options){
    console.log(options)
}

剩下的一个问题就是：注册页面每次注册的都是一个人的这些信息，那么我们该怎么存入到数据库中去呢？一个人一条记录，这里我使用比较笨的做法是：**将所有的信息一个页面一个页面传，传到最后一个页面然后一次性地存入到数据库中，这样才保证了一个人一条记录。**再通过云函数存入到数据库中。

信息如下：

还记得第一次的思路是： 第一个页面通过wx.cloud.callFunction存到一个数据库，接下来的页面通过update根据id去找到那条记录进行更新。最后发现，update会把所有的记录里相同的字段都更新为一样的，也就是说不同的用户除了第一个页面的资料是不同的，其余的都会相同，这才使用了上面的那种笨办法。感谢看到这里的您，还望大佬能够不吝赐教，是否有更好的方法！

登陆后

这里要注意的一点就是登录后跳转到一个tabbar页面，所以wx.navigateTo不再有效，跳转到tabbar可以使用wx.switchTab。

tuijian.js:

  onShow: function () {
    const self = this
    const db = wx.cloud.database()
    db.collection('message').get({
    // 'message' 为上面数据库的名称
      success(res){
        // console.log(res.data)
        self.setData({
          message: res.data
        })
      }
    }) 
    
  },

获取到数据之后，再wx：for={{ message }}渲染到页面上,推荐页大致就做好了。

信息页面，这里我本在官方文档API：WebSocket去实现一个 实时通信的功能，但是最后还是没能做好，很是惭愧。希望还在看文章的您，能给点思路，谢谢大佬。

最后一个我的页面，我用了vant组件中的cell单元格加快页面的设计。功能都大同小异，这里我就说下上传图片。官方文档提供API：wx.chooseImage。

chooseImage() {

    var self = this
    wx.chooseImage({
      sizeType: ['original', 'compressed'], //所选图片的尺寸大小
      sourceType: ['album', 'camera'], //所选图片的来源
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        console.log(res)
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        //将图片地址放到我们的数据files数组中
        self.setData({
          files: self.data.files.concat(tempFilePaths)
        })
        console.log(self.data.files)
        //将图片上传到云数据库 我们上传图片不能一样，所以已图片名称来命名
        for (let i = 0; i < res.tempFilePaths.length; i++) {
          const filePath = res.tempFilePaths[i];
          // 获取图片的名称
          // let a = filePath.lastIndexOf('.') //获取到最后一个点的坐标
          // let b = filePath.lastIndexOf('.', filePath.length - 6);
          // let c = filePath.substring(b + 1, a)
          let d = Math.floor(Math.random() * 1000000).toString();
          console.log(d)
          const cloudPath = d + filePath.match(/\.[^.]+?$/);
          console.log(cloudPath)
          wx.cloud.uploadFile({
            cloudPath, //文件的名称
            filePath, // 文件路径(文件的地址 res.temFilePaths)
            success: res => {
              // get resource ID
              console.log('上传成功')
              console.log(res.fileID)
              const db = wx.cloud.database();
              db.collection('img').add({
                data: {
                  img: res.fileID,
                  imgURL: filePath
                },
                success() {
                  wx.showToast({
                    title: '存储成功',
                  })
                },
                fail() {
                  wx.showToast({
                    title: '存储失败',
                  })
                }
              })
            },
            fail: err => {
              // handle error
            }
          })
        }
      }

    })
  },

注释的那种方法发现有个bug，就是在手机上上传时，不会存到数据库中，所有使用了另一种方法，随机产生来命名。

点击查看:

  previewImage(e) {
    var self = this
    console.log(e)
    wx.previewImage({
      current: e.currentTarget.dataset.id, // 当前显示图片的http链接
      urls: self.data.files // 需要预览的图片http链接列表
    })
  },

结束语

学习最怕的就是，上课以为自己听懂了，自己看书理解了，从而不动手去落实。就像是coding，听懂了老师所讲的知识点，当自己撸的时候...写文章好像也是这样的。看过好多大佬们的文章，将自己踩过的坑，遇到过的问题，描述清楚，讲述清楚。第一次写文章，自认为亮点不多，但是对于当时小白的我遇到这么些简单的问题，也是花了些时间去解决。如果文章符合您的胃口，帮你跳过了一些简单的坑，那就动动发财的手给个star吧！(原谅我不厚道的笑了)。也请大佬们多多给给建议哈！源码在此，谢谢！！！

avatar
文章
阅读
粉丝