微信小程序：a=b===c，自己项目经验的Q&A，点赞数界面和数据库同步更新【诗书画唱】

目录

例子1：实现电影组件

sentence

常常用上让内容等等沿主轴垂直水平居中的CSS样式

例子2：实现获取的点赞的数据是动态的，是实时更新，从数据库中拿的（实现数据库和界面的点赞同步更新)

models文件夹下的js文件一般是写ajax的封装的

例子3：实现期刊号组件epsoide

常常可以用display:flex ； flex-direction:column实现“竖向”的“列”的排列效果（其实我认为，很多布局的话，实在不行的时候，可以用上position定位，比如相对定位，绝对定位等等，也用上弹性盒子）

episode

例子4：例子1到例子3的代码

没有提到的代码要么就是自己可以生成的代码，要么就是以前的专栏中讲过的代码

index.json中的代码基本都是自己生成的，基本一样是

{

  "component": true,

  "usingComponents": {}

}

父组件就是在index.json中声明组件后在wxml文件中调用

 比如例子中的 pages/classic/index.json

{

  "usingComponents": {

    "cmp-like":"/components/like/index",

    "cmp-movie":"/components/classic/movie",

    "cmp-epsoide":"/components/epsoide"

  }

}

运行效果

例子5：注意事项（项目经验之遇到的问题和我是怎么解决问题的）

Q：解决TypeError: callback is not a function的报错

Q：没有触发同个组件文件夹下index.js中声明的onLike事件

Q：a=b==c怎么运算的

Q：点击点赞按钮时，数据库点赞数加2，取消点赞按钮时数据库点赞数减2是什么原因导致这种bug？

Q：status = status === 'like' ? 1 : 0;是不是写多余了，有没有别的写法？

A：目前我尝试了，status = status === 'like';和status == 'like' ? status =1 : status =0;和status = status === 'like' ? 1 : 0;的效果是一样的。暂时我认为是写多余了。status = status === 'like' ? 1 : 0;可以理解成status = （status === 'like' ? 1 : 0）;

C语言中a=b==c这个式子相当于先算b==c,若二者相等，则将1赋值给a,否则将0赋值给a，那么我个人推理js中a=b===c这个式子相当于先算b===c,若二者相等，则将1赋值给a,否则将0赋值给a

例子1：实现电影组件

sentence

注册组件

常常用上让内容等等沿主轴垂直水平居中的CSS样式

常常用rpx，display：flex的弹性布局相关的设置

例子2：实现获取的点赞的数据是动态的，是实时更新，从数据库中拿的（实现数据库和界面的点赞同步更新)

models文件夹下的js文件一般是写ajax的封装的

例子3：实现期刊号组件epsoide

常常可以用display:flex ； flex-direction:column实现“竖向”的“列”的排列效果（其实我认为，很多布局的话，实在不行的时候，可以用上position定位，比如相对定位，绝对定位等等，也用上弹性盒子）

episode

例子4：例子1到例子3的代码

// components/classic/movie/index.js

Component({

  /**

   * 组件的属性列表

   */

  properties: {

    content:String,

    img:String,

  },

  /**

   * 组件的初始数据

   */

  data: {

    icon: './images/movie@tag.png'

  },

  /**

   * 组件的方法列表

   */

  methods: {

  }

})

<!--components/classic/movie/index.wxml-->

<view class="container">

    <image src="{{img}}" class="img"/>

    <image src="{{icon}}" class="tag"/>

    <text class="content">{{content}}</text>

</view>

<!--components/classic/movie/index.wxml-->

<view class="container">

    <image src="{{img}}" class="img"/>

    <image src="{{icon}}" class="tag"/>

    <text class="content">{{content}}</text>

</view>

/* components/classic/movie/index.wxss */

.container {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.tag{

  width: 46rpx;

  height: 142rpx;

  position: relative;

  right: 310rpx;

  bottom: 58rpx;

}

.img {

  width: 750rpx;

  height: 500rpx;

}

.content {

  font-size: 36rpx;

  max-width: 550rpx;

}

index.json中的代码基本都是自己生成的，基本一样是

{

  "component": true,

  "usingComponents": {}

}

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

<view class="container">

  <view class="index-container">

    <text class="plain">No.</text>

    <text class="index">08</text>

    <view class="line"></view>

  </view>

  <view class="date-container">

    <text class="month">六月</text>

    <text class="year">2021</text>

  </view>

</view>

/* components/epsoide/index.wxss */

.container {

  display: inline-flex;

  height: 60rpx;

  flex-direction: row;

}

.plain {

  font-size: 32rpx;

}

.index {

  font-size: 60rpx;

  line-height: 60rpx;

  font-weight: 800;

  margin-right: 14rpx;

}

.index-container {

  display: flex;

  flex-direction: row;

  align-items: baseline;

}

.date-container {

  display: flex;

  flex-direction: column;

  margin-top: 6rpx;

}

.month {

  font-size: 24rpx;

  line-height: 24rpx;

}

.year {

  font-size: 20rpx;

}

.line {

  height: 44rpx;

  border-left: 1px solid black;

  margin-right: 14rpx;

}

// components/like/index.js

Component({

  /**

   * 组件的属性列表

   */

  properties: {

    //如果不声明变量数据类型，那么数据的内容可能无法在别的文件中调用

    count: Number,

    like: Boolean,

    //自己写的代码 START

    // bookImage:String

    //自己写的代码 END

  },

  /**

   * 组件的初始数据

   */

  data: {

    yesSrc: '/components/like/images/like.png',

    noSrc: '/components/like/images/like@dis.png',

  },

  /**

   * 组件的方法列表

   */

  methods: {

    onLike(){

      let count = this.properties.count

      let like = this.properties.like

//自己写的代码 START

// let bookImage= this.properties.image

//自己写的代码 END

      count = like ? count - 1 : count + 1

      //更新组件的状态

      this.setData({

        count,

        like: !like,

        //自己写的代码 START

        // bookImage:bookImage

        //自己写的代码 END

      })

//关于数据库和页面的点赞数同步更新的部分 START

 //触发绑定在like组件上的自定义事件

      //1、需要触发的自定义事件的名字

      //2、自定义事件需要传递的数据对象

      //3、配置事件的属性

      this.triggerEvent('myLike',{

        state: this.properties.like ? 'like' : 'cancel',

        nums: this.properties.count

      },{})

//关于数据库和页面的点赞数同步更新的部分 END

    }

  }

})

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

<view class="container" bind:tap="onLike">

    <image src="{{like == '1' ? yesSrc : noSrc}}" />

    <text>{{count}}</text>

    

    

</view>

<!-- <image src="{{bookImage}}" />

<text>{{yesSrc}}1</text>

<text>{{bookImage}}1</text> -->

/*  自己写的代码 START*/

.container{

float:right;

}

/*  自己写的代码 END*/

// pages/classic/index.js

import ClassicModel from '../../models/classic.js'

  //关于数据库和页面的点赞数同步更新的部分 START

import config from '../../config.js'

  //关于数据库和页面的点赞数同步更新的部分 END

const classicModel = new ClassicModel()

Page({

  /**

   * 页面的初始数据

   */

  data: {

    classicData: null

    

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    classicModel.getLatest(data => {

      console.log("pages/classic/index.js中打印的数据：",data)

      //关于数据库和页面的点赞数同步更新的部分 START

      // console.log(data)

      //修改image属性的内容：

      data.image = config.img_url + data.image

      //关于数据库和页面的点赞数同步更新的部分 END

      //更新数据

      this.setData({

        classicData: data

      })

    })

  },

//关于数据库和页面的点赞数同步更新的部分 START

  onLike(e){

    //更新点赞的状态

    classicModel.like({

      status: e.detail.state,

      index: this.data.classicData.index,

      nums: e.detail.nums

    })

  },

//关于数据库和页面的点赞数同步更新的部分 END

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

  }

})

{

  "usingComponents": {

    "cmp-like":"/components/like/index",

    "cmp-movie":"/components/classic/movie",

    "cmp-epsoide":"/components/epsoide"

  }

}

<!--pages/classic/index.wxml-->

<cmp-epsoide></cmp-epsoide>

<!-- 下面的话就是调用了点赞的组件 -->

<!-- <div> -->

<cmp-like count="{{classicData.fav_nums}}" 

    like="{{classicData.like_status}}" ></cmp-like>

    <!-- bookImage="{{classicData.image}}" -->

    <!-- <text>{{classicData.image}}</text> -->

    <!-- <image src="{{classicData.image}}"/>

</div> -->

<cmp-movie content="{{classicData.content}}" 

    img="{{classicData.image}}"></cmp-movie>

//utils/http.js

export default class Http {

  ajax({url,data = {},method = 'get',callback}){

    wx.request({

      url,

      data,

      method,

      success: res => {

        //获取请求的状态码：200,404,500

        let code = res.statusCode.toString()

        //判断code是否是以2开头的，如果以2开头的才可以调用回调函数

        if(code.startsWith('2')) {

          callback(res.data)

        } else {

          //弹出一个警告框

          this._showErr(code)

        }       

      },

      fail: err => {

        this._showErr(err.errMsg)

      }

    })

  }

  //私有的方法

  _showErr(msg){

    wx.showToast({

      title: `错误代码:${msg}`,

      icon: 'none',

      duration: 2000

    })

  }

}

//config.js

//用来存放常量的文件

export default {

  base_url: 'http://127.0.0.1:9001/',

  img_url: 'http://127.0.0.1:9001/public/images/'

}

运行效果

例子5：注意事项（项目经验之遇到的问题和我是怎么解决问题的）

Q：解决TypeError: callback is not a function的报错

A：//解决TypeError: callback is not a function的报错 START

          callback && callback(res.data)

  //解决TypeError: callback is not a function的报错 END

Q：没有触发同个组件文件夹下index.js中声明的onLike事件

A：在同个组件文件夹下index.wxml中，没用bind:myLike="onLike"绑定onLike事件

Q：a=b==c怎么运算的

Q：点击点赞按钮时，数据库点赞数加2，取消点赞按钮时数据库点赞数减2是什么原因导致这种bug？

A：检查后台和前台代码，是不是传访问路径后，重复处理了点赞数的加减，如果前台代码处理过了点赞数的加减，那么后台处理点赞数的加减的部分就要注释掉

Q：status = status === 'like' ? 1 : 0;是不是写多余了，有没有别的写法？

A：目前我尝试了，status = status === 'like';和status == 'like' ? status =1 : status =0;和status = status === 'like' ? 1 : 0;的效果是一样的。暂时我认为是写多余了。status = status === 'like' ? 1 : 0;可以理解成status = （status === 'like' ? 1 : 0）;

C语言中a=b==c这个式子相当于先算b==c,若二者相等，则将1赋值给a,否则将0赋值给a，那么我个人推理js中a=b===c这个式子相当于先算b===c,若二者相等，则将1赋值给a,否则将0赋值给a