微信小程序开发实践： vant组件库、组件传值、请求封装与自定义组件-优快云博客

本文链接：https://blog.youkuaiyun.com/Web_chicken/article/details/116005509

一、微信小程序常用方法

1.使用vant组件库

地址：https://youzan.github.io/vant/#/zh-CN/quickstart

建议在安装时间使用npm init -y创建package.json文件

使用npm安装 npm i @vant/weapp -S --production
将 app.json 中的 "style": "v2" 去除

修改project.config.json

"setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

如果报路径错误建议重新执行npm i @vant/weapp -S --production命令覆盖

2.组件传值

test.wxml:

<block>
  <view bindtap="getText">点我传值</view>
</block>

test.js

// e就是当前事件对象
getText(e){
  console.log(e)
},

当我们点击之后控制台会输出

在这里插入图片描述

如果我们给事件设置一个自定义属性

<view bindtap="getText" data-text="我是文本">点我传值</view>

当我们再次看控制台：

在这里插入图片描述

currentTarget和target中都有我们传过去的值

但是，由于target有时候可能会拿不到值

所以我们一般在js中使用

e.currentTarget.dataset.text 	//	text指的是在wxml中设置的data-text的属性名

这样我们就可以利用组件传值了

3.封装请求

因为每次都需要使用wx.request请求的回调函数，显得代码非常臃肿
所以我们需要封装代码
但是封装之后一但代码改变，所有请求将全部不能使用
所以我们需要根据组件化要求封装

在根目录下新建utails文件夹

新建http.js

let baseUrl = 'https://www.fastmock.site/mock/553417b978737e91d9112446e179feec/shifuji/api/'
export default function request(params){
  return new Promise((resolve,reject) =>{
    wx.request({
      url: baseUrl+params.url,
      method:params.method?params.method:'GET',
      data:params.data?params.data:null,
      success:(res) =>{
        resolve(res)
      },
      fail(err){
        reject(err)
      }
    })
  })
}

如使用文章组件

我们根目录下新建service文件夹，新建posts.js文件

// 因为不是同一js文件 我们需要导入http.js

import request from '../utils/http'
// 因为http.js已经封装过 我们只需要调用request方法传参即可
// 在此导出是因为我们的js文件中需要使用方法来发送请求
export function getPosts(){
  return request({
    url:'posts'
  })
}

post页面文件夹下边的post.js

// 这里需要按需引入 否则报错
import {getPosts} from '../../service/post'
async loadPost() {
    // 因为返回的是一个promise 所以我们需要使用async同步代码
  let {data:{data:{posts}}} = await getPosts()
    this.setData({
      readList: [...this.data.readList, ...posts],
   })
},

4.自定义组件

在根目录下新建components文件夹

之后新建post组件

post.wxml

<view class="post-container" bindtap="onPostTap" data-id="{{item.postId}}">
  <!-- 头像和发表日期 -->
  <view class="post-author-date">
    <image catchtap="preImage" data-img="{{item.avatar}}" class="post-author" src="{{item.avatar}}"></image>
    <text class="post-date">{{item.dateTime}}</text>
  </view>
  <!-- 标题 -->
  <text class="post-title">{{item.title}}</text>
  <image class="post-image" src="{{item.imgSrc}}"></image>
  <text class="post-content">
    {{item.desc}}
  </text>
  <view class="post-like">
    <image class="post-like-image" src="https://img-blog.csdnimg.cn/20210406150554572.png">
    </image>
    <text class="post-like-font">{{item.collection}}</text>
    <image class="post-like-image" src="https://img-blog.csdnimg.cn/20210406150554540.png"></image>
    <text class="post-like-font">{{item.reading}}</text>
  </view>
</view>

post.wxss

@import '/app.wxss';
.post-container {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  padding-bottom: 10rpx;
}

.post-author-date {
  /* margin-top:10rpx;
  margin-bottom: 20rpx
  margin-left: 10rpx; */
  margin: 10rpx 0 20rpx 10rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.post-author {
  width: 60rpx;
  height: 60rpx;
  /* vertical-align: middle; */
}

.post-date {
  margin-left: 20rpx;
  font-size: 26rpx;
  /* vertical-align: middle; */
}

.post-title {
  font-size: 34rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  color: #333;
}

.post-image {
  width: 100%;
  height: 420rpx;
  margin-bottom: 30rpx;
}

.post-content {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  line-height: 40rpx;
  letter-spacing: 2rpx;
}

.post-like {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20rpx;
}

.post-like-image {
  height: 32rpx;
  width: 32rpx;
  margin-right: 16rpx;
}

/* html */
.post-like-font {
  margin-right: 40rpx;
  font-size: 26rpx;
}

组件内的样式默认不会污染组件外样式同理组件外样式也不会影响组件内样式

如果父组件想使用自定义组件

只需要在子组件中的json文件中配置一下即可

{
  "usingComponents": {
    //组件名可以随便起 后边跟路径
    "post":"../../components/post/post",
  }
}

我们看下父组件如何使用

// 定义的什么名 就直接用即可
<post></post>

但是我们在子组件中可以看到，我们使用了{{item}}这个变量

我们该如何传过去呢？

4.1 不同组件传值

我们需要在子组件中配置父组件传过来的值，否则会报错

// 组件的属性列表 相当于props 用于接收父组件传过来的值
properties: {
    item:{
        type:Object
      }
  },

然后父组件中传值即可

<post item={{item}}></post>

5.子组件触发父组件的事件

已知，当我们封装了组件之后，我们在父组件中使用时，绑定的事件处理函数会失效

所以我们需要子组件调用父组件中的方法来实现

子组件

<view class="post-container" bindtap="onPostTap" data-id="{{item.postId}}"></view>

 methods: {
    onPostTap(){
      //子组件调父组件方法
      this.triggerEvent('ontap')
    },
  }

当子组件绑定事件之后会触发一个函数，我们需要这个函数来调用父组件中的方法

父组件

<block  wx:for="{{readList}}" wx:key="id">
    // 把子组件传过来的ontap时间绑定 然后给它一个事件处理函数
  <post bindontap="gotoDeatil" item="{{item}}"></post>
</block>

然后只需要在js中设置gotoDeatil()方法就可以完成

gotoDeatil(event) {
    let id = event.currentTarget.dataset.id
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`,
    })
  },