小程序实例 | 自定义喜欢组件剖析

目录结构图 目录解析

1. /components 自定义组件目录,,like为喜欢组件,,,新建时选择components,不能选择page
2. /model 类 定义classic栏目的类
3. /util 定义共用的类
4. config.js 定义基本的配置信息

以下为详细的代码

• 编写like组件

js
---
// components/like/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    like:{
      type:Boolean//默认false
    },
    count:{
      type:Number//默认0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // like:false,
    // count:9,
    yesSrc:'images/like.png',
    noSrc:'images/like_no.png'

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onLike:function(event){
      // console.log(event)
      let like=this.properties.like
      let count=this.properties.count
      count = like?count-1:count+1
      this.setData({
        count:count,
        like:!like
      })
      //设置事件激活事件//////////*****
      let behavior=this.properties.like?'like':'cancel'
      this.triggerEvent('like',{
        behavior:behavior
      },{})

    }

  }
})



wxml
---

 //////////*****
  
  {{count}}


wxss
----
/* components/like/index.wxss */
.mc_like{
  display: flex;
  flex-direction: row;
  padding: 10rpx;

}
.mc_like image{
  width: 33rpx;
  height: 32rpx;
}
.mc_like text{
  font-size: 25rpx;
  line-height: 25rpx;
  color: #bbb;
  /* font-family: "PingFangSC-Thin"; */
  position: relative;
  bottom: 3rpx;
  left: 8rpx;

}

• 先设置小程序的基本配置config.js

const config={
  api_base_url:"http://bl.7yue.pro/v1/",
  appkey:"TixS4uiLBIXd9qP0"
}
export {config}//导出

• 配置基本的类http.js请求类

import {config} from '../config.js'
const tips={
  1:'默认错误',
  1005:'appkey错误',
  1007: '网址错误',  
  3000:'该期内容不存在'
}
class HTTP{
  request(params){
    if (!params.method){
      params.method='GET'
    }
    wx.request({
      url: config.api_base_url+params.url,
      method:params.method,
      data:params.data,
      header:{
        'content-type':'application/json',
        'appkey':config.appkey
      },
      success:(res)=>{
        let code = res.statusCode.toString()
        // console.log(code)
        //es6 新  startsWith 以什么开头   endWith  以什么结尾
        if(code.startsWith('2')){
           params.success && params.success(res.data);//////////*****

        }else{
          // wx.showToast({
          //   title: '错误',
          //   icon:'none',
          //   duration:1500
          // })
          let error_code = res.data.error_code
          this._show_error(error_code)
        }
      },
      fail:(err)=>{
        // wx.showToast({
        //   title: '错误',
        //   icon: 'none',
        //   duration: 1500
        // })
        this._show_error(1)
      }
    })
  }
  _show_error(error_code){
    if(!error_code){
      error_code=1
    }
    console.log(error_code)
    wx.showToast({
      title:tips[error_code],
      icon: 'none',
      duration: 1500,
    })

  }
}
export {HTTP};

• 编写该页面的类classicModel.js

import {HTTP} from '../util/http.js';

class classicModel extends HTTP{
  getLatest(sCallback){
    this.request({
      url: 'classic/latest',
      success: (res) => {
        // console.log(res)
        sCallback(res)//回调返回值
      }
    })
  }

}
export{classicModel}

• like类

import {HTTP}  from '../util/http.js'

class likeModel extends HTTP{
  like(behavior,artID,category){
    let url = behavior=='like'?'like':'like/cancel'
    this.request({
      url:url,
      method:'POST',
      data:{
        art_id:artID,
        type:category
      }
    })
  }

}
export {likeModel}

• 该页面js使用

import { classicModel } from '../../model/classicModel.js';
import { likeModel } from '../../model/likeModel.js';

let classic = new classicModel()
let likeModels = new likeModel()

// pages/classic/classic.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ss:'11'
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(this.data.ss)
    classic.getLatest((res)=>{
      console.log(res)
      this.setData({
        classicData:res
      })
    })
    

  },
  onLike:function(event){
    console.log(event)
    let behavior = event.detail.behavior
    console.log(this.data)
    likeModels.like(behavior, this.data.classicData.id, this.data.classicData.type)//喜欢的传值
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

页面调用like组件