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>

toast.js

/**
 * 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;
}

Usage method

1. wxml reference page template

2. The js file references toast.js

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

3. Calls

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

Improvements and more extensions

will be used in actual projects There are many common components such as toast confirm loading... and a large number of business components. We can introduce js into a js file, and then register this (page) in the page loading (onLoad method), so You only need to register once to use all components, such as

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

becomes

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

With the same idea, we can implement functions similar to the mixin in vue, in projects with complex business , greatly improving the reusability and maintainability of the code.

I am the only one who develops the company's small programs. There is no situation where multiple people collaborate to develop small programs. I don't put much effort in this aspect.

The above is the detailed content of Detailed introduction to custom components in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!