坎坷的微信小程序【笔记】

1.封装wx.request

1. 项目根目录新建config.js文件，写入请求的主域名，export给http.js进行封装

const config = {
  api_base_url: 'https://easy-mock.com/mock/5d0b8dd9943d8c4e93c180bd/'
}
export {config}

2. 新建utils包，新建http.js，编写request详细信息，包括处理状态码，export给models下的classic.js进行封装

import {config} from '../config.js'
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'
      },
      success: (res)=> {
        let code = res.statusCode.toString()
        if(code.startsWith('2')){
          params.success(res)
        }else{
        }
      },
      fail: (err) => {
      },
    })
  }
}
export {HTTP}

3. models/classic.js封装HTTP，export给需要的page

   import { HTTP } from '../utils/http.js'
   class ClassicModel extends HTTP {
     getLatest(sCallback){
       this.request({
         url: 'classic/latest',
         success: (res) => {
           sCallback(res)
         }
       })
     }
   }
   export {ClassicModel}
   

2.component的编写

以like组件为例

like包下新建images存放该组件需要使用的图片，以及like根目录下新建名为index的component

目录如图所示：

1. wxml骨架：view-image-text-view，其中view需开启bind:tap（此为点击事件）并命名为onLike，定义class为container便于管理整个组件（图片+数字）的样式，src和text处都使用数据绑定

   <view bind:tap='onLike' class='container'>
     <image src="{{like?yesSrc:noSrc}}" />
     <text>{{count}}</text>
   </view>
   

2. wxss样式：和css风格一致。.container{}中使用flex布局，注意display: inline-flex;的使用

   .container{
     display: inline-flex;
     flex-direction: row;
     padding: 10rpx;
   }
   
   .container image{
     width: 32rpx;
     height: 28rpx;
   }
   
   .container text{
     font-size: 24rpx;
     line-height: 24rpx;
     color: #bbbbbb;
     position: relative;
     bottom: 10rpx;
     left: 6rpx;
   }
   

3. js逻辑：js文件中主要有三个部分：组件的属性列表（properties）、初始化数据（data）和方法列表（methods）。

   Component({
     /**
      * 组件的属性列表
      */
     properties: {
       like:{
         type: Boolean,
       },
       count:{
         type: Number
       }
     },
   
     /**
      * 组件的初始数据
      */
     data: {
       yesSrc: 'images/like.png',
       noSrc: 'images/[email protected]'
     },
   
     /**
      * 组件的方法列表
      */
     methods: {
       onLike:function(event){
         var like = this.properties.like
         var count = this.properties.count
   
         count = like?count-1:count+1
         this.setData({
           count:count,
           like:!like
         })
       }
     }
   })
   

4. json配置：设置component为true

   {
     "component": true,
     "usingComponents": {}
   }
   

3.引用组件

以classic页面引用like组件为例

1. 首先在classic.json中配置使用组件

{
  "usingComponents": {
    "like-cmp":"/components/like/index",
  }
}

2. classic.wxml中编写组件需要绑定的数据

   <like-cmp like="{{classic.like_status}}" count="{{classic.fav_nums}}"/>
   

3. classic.js实例化封装了http请求的ClassModel，在onLoad编写。

   import {ClassicModel} from '../../models/classic.js'
   let classic = new ClassicModel()
   Page({
     /**
      * 页面的初始数据
      */
     data: {
       classic: null
     },
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
       classic.getLatest((res)=>{
         console.log(res)
         this.setData({
           classic:res
         })
       })
     },
   

   ​