微信小程序学习笔记二：自定义组件和自定义分享功能

5. 自定义Component

• 使用Componet类编写一个Componet

• 配置Component json中的component为true - 表示开启了component模式

• 在需要引入页面的json文件中的usingComponent中注册(路径注意要指到.js文件)

• 在需要引入的页面中进行引入即可

6. 使用button实现分享功能

实现思路：

1. 使用share-btn的外部容器实现一个自己想要的效果
2. 使用button:not([size=“mini”])对button的默认样式进行重置
3. 使用绝对定位让该按钮充满整个容器，并用opacity保持透明。露出下面我们自定义的分享按钮

.share-btn {
     
    display: inline-block;
    float: right;
    margin: 0 30rpx;
    width: 100rpx!important;
    height: 100rpx!important;
    border-radius: 50%;
    position: relative;
}

.share-btn image {
     
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}

.share-btn button:not([size="mini"]) {
     
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.01;
}

<view class="share-btn" open-type="share">
    <image src="{
      { shareIcon }}">image>
    <button open-type="share">button>
view>