Detailed introduction to custom components in WeChat mini programs

This article mainly introduces the relevant information of WeChat applet custom components in detail, which has certain reference value. Interested friends can refer to it

Preface

I recently came into contact with WeChat mini programs. Once again, the front-end framework used by the company was vue. After comparison, I found that developing mini programs has various restrictions and is very unfriendly to developers. There are too many different points to complain about, so I won’t go into details here. I plan to write a special article next time to complain about them. This time I mainly share some ideas about custom components of mini programs. The official framework provided by mini programs is relatively simple, primitive, poorly reusable, and does not implement the functions of custom components. This makes many people who use Vue and react front-end development very uncomfortable. . There are various complaints on the Internet, and methods of implementing custom components are also shared, but they are either too complicated, or the WeChat applet is incompatible after the upgrade. Anyway, it is all kinds of traps that you can't discuss. Here I would like to share how I implemented it in the project. Corrections and criticisms are welcome and we can learn from each other.

Toast custom component implementation

• The simplest toast component is used as an example

• The official framework only provides page template functions: WXML provides templates (templates), and code snippets can be defined in the templates and then called in different places.

• But this function does not support js, style encapsulation, needs to be processed on the corresponding page, and the template also has its own scope, which needs to be passed in using data.

• Encapsulate the function into an independent component, which needs to be independent of the page. When using, mount the component to the corresponding page, so the component needs to pass in the page this (Page) object to implement The code is as follows
  

Directory structure

|------components
|------toast
|------toast.js
                                                                                      
##toast.wxml

<template name=&#39;toast&#39;>
  <view class="s-toast" wx:if="{{msg}}">
    <view class="s-toast-content">{{msg}}</view>
  </view>
</template>

/**
 * toastMsg 必传 提示内容
 * showTime 非必传 显示时间秒
*/
function toast(page, toastMsg, showTime) {
  let timer
  page.setData({ toastMsg })
  showTime = showTime || toastMsg.length / 4
  console.log(showTime)
  clearTimeout(timer)
  timer = setTimeout(() => {
    page.setData({ toastMsg: '' })
    clearTimeout(timer)
  }, showTime * 1000)
}

module.exports = {
  toast: toast,
}
toast.wxss
.s-toast-content {
  position: fixed;
  left: 50%;
  color: #fff;
  width: 500rpx;
  bottom: 120rpx;
  background: hsla(0,0%,7%,.7);
  padding: 15rpx;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 4rpx;
  z-index: 6999;
}

2. The js file references toast.js

import { toast } from '../../../project/component/toast/toast.js'

toast(this, '填写详细信息')

toast(this,'填写详细信息'')

toast('填写详细信息'')