精华内容
下载资源
问答
  • 微信小程序引入组件

    2021-04-08 16:38:11
    一个自定义组件由 json wxml wxss js 4个文件组成。首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true) { "component": true } 使用自定义组件时,首先要在页面的 json 文件中进行引用声明...

    一个自定义组件由 json wxml wxss js 4个文件组成。首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true)

    {
      "component": true
    }
    

    使用自定义组件时,首先要在页面的 json 文件中进行引用声明。需要提供每个自定义组件的标签名和对应的自定义组件文件路径:

    {
      "usingComponents": {
        "small-home": "/components/smallhome/smallhome",
        "small-classify": "/components/smallclassify/smallclassify",
        "small-my":"/components/smallmy/smallmy"
      }
    }
    

    在你要使用组件页面的wxhm文件里写

        <small-home></small-home>
        <small-classify></small-classify>
        <small-my></small-my>
    

    这样就可以了,快去试试吧
    在这里插入图片描述
    注意:自定义组件的json文件和js文件里面必须有值不然会报错

    //js文件必须要写这个Component,不写会报错
    Component({
    })
    
    //json文件也一样
    {
      "component":true
    }
    
    展开全文
  • 微信小程序引入组件(useExtendedLib)

    千次阅读 2020-06-05 10:33:27
    引入组件 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小。 可以通过npm方式下载构建,npm包名为weui-miniprogram 1.useExtendedLib style 基础库 2.8.0 开始支持,低版本需做兼容...

    使用之前
    扩展组件库基于小程序自定义组件构建,在使用扩展组件库之前,建议先阅读熟悉小程序自定义组件

    引入组件
    通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小。
    可以通过npm方式下载构建,npm包名为weui-miniprogram

    1.useExtendedLib

    style
    基础库 2.8.0 开始支持,低版本需做兼容处理。

    微信客户端 7.0 开始,UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 “style”: "v2"可表明启用新版的组件样式。

    本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。

    useExtendedLib
    基础库 2.2.1 开始支持,低版本需做兼容处理。

    最新的 nightly 版开发者工具开始支持,同时基础库从支持 npm 的版本(2.2.1)起支持

    指定需要引用的扩展库。目前支持以下项目:

    kbone: 多端开发框架
    weui: WeUI 组件库
    指定后,相当于引入了对应扩展库相关的最新版本的 npm 包,同时也不占用小程序的包体积目前暂不支持在分包中引用。用法如下:

    1.1 在app.json配加粗样式

    "useExtendedLib": {
        "weui": true
      },
    

    1.2 如何使用
    首先在页面的 json 文件加入 usingComponents 配置字段,然后可以在页面中引入 dialog 弹窗组件(如果用其他的组件就引入其他的)

    {
      "usingComponents": {
        "mp-dialog": "weui-miniprogram/dialog/dialog"
      }
    }
    

    效果:
    在这里插入图片描述

    目前只写useExtendedLib 的方式,写的不是很好

    展开全文
  • 首先我们建一个跟pages同级的一个文件夹components,customer里面就是我们要写的组件,其目录结构如下: wxml代码如下: <view class='customer' catchtouchmove="setTouchMove" style="top:{{top}}rpx;left:{{...

    首先我们建一个跟pages同级的一个文件夹components,customer就是我们要写的组件,其目录结构如下:
    在这里插入图片描述

    wxml代码如下:

        <view class='customer' catchtouchmove="setTouchMove" style="top:{{top}}rpx;left:{{left}}rpx">
          <button open-type='contact' class="btn"></button>
          <button type="default" class="btn1" catchtap='phone'></button>
          <slot></slot>
        </view>
    

    wxss代码如下:

    .customer {
      position: fixed;
      z-index: 1000;
      width:200rpx;
      height: 200rpx;
    }
    .btn {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      padding: 0;
      opacity: 0.8;
      background-image: url(data:image/png;base64,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);
      background-repeat: no-repeat;
      background-size: cover;
    }
    .btn1 {
      margin-top: 20rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      padding: 0;
      opacity: 0.8;
      background-image: url(data:image/png;base64,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);
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .btn::after {
      border: none;
    }
    

    js代码如下:

    Component({
      /**
       * 组件的属性列表
       */
      properties: {
    
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        top: 800,
        left: 570,
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        //组件实现拖动效果
        setTouchMove: function (e) {
          var that = this
          if (e.touches[0].clientX < (wx.getSystemInfoSync().windowWidth - 80) && e.touches[0].clientX > 0 && e.touches[0].clientY < (wx.getSystemInfoSync().windowHeight - 120) && e.touches[0].clientY > 0) {
            wx.getSystemInfo({
              success: function (res) {
                let X = (e.touches[0].clientX * (750 / res.windowWidth)); 
                // 将高度乘以换算后的该设备的rpx与px的比例
                let Y = (e.touches[0].clientY * (750 / res.windowWidth)); 
                // 将高度乘以换算后的该设备的rpx与px的比例
                that.setData({
                  left: X,
                  top: Y
                })
              }
            })
    
          }
        },
        // 拨打电话组件
        phone() {
         
          wx.makePhoneCall({
            phoneNumber: this.properties.newPhone,
            success: function () {
              console.log("拨打电话成功!")
            },
            fail: function () {
              console.log("拨打电话失败!")
            }
          })
        }
      },
    
      lifetimes: {
        attached() {
          // 在组件实例进入页面节点树时执行
        },
        detached() {
          // 在组件实例被从页面节点树移除时执行
        },
        created() {
    
        }
      }
    })
    

    至此,组件我们已经写完了,接下来要做的就是在页面引入我们所写的组件。

    我们先在要引组件的页面json文件里添加一下组件路径:

    {
      "usingComponents": {
        "customer": "/components/customer/customer"
      }
    }
    

    然后在要引组件的页面wxml文件里加入这一行代码:

     <customer></customer>
    

    注意:这里的标签名要与json文件里定义的名字一致
    到了这一步,我们已经大功告成了。页面效果如下所示:
    实现效果
    组件可以实现自由拖动,涉及个人隐私,页面内容打了马赛克。

    展开全文
  • 主要介绍了微信小程序引入VANT组件的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序引入weui组件

    千次阅读 2017-05-08 15:07:21
    微信小程序引入weui 组件

    微信小程序组件官方的说明文档 https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

    通过参阅说明文档,我们可以看出,在微信小程序中引用微信组件非常方便,然而这些组件具体该如何在小程序中引用呐,下面我就详细地介绍一下:


    1.下载weui https://github.com/weui/weui-wxss


    2.在在文件中找到weui-wxss/dist/style/目录中的weui.wxss(也可以只下载weui.wxss),这里的文件目录很重要啊,一定是在dist文件下面。



    3.复制2中的文件到微信小程序根目录下,在根目录app.wxss中引入(@import 'weui.wxss';)



    4.然后就可以引用了,参考文章开头的文档就可以了。例如:开关组件



    展开全文
  • 微信小程序引入Vant组件库 https://www.jianshu.com/p/54ed83b6c81a
  • 2 在微信小程序目录中安装vant组件 npm i vant-weapp -S --production 3 在小程序的根目录执行npm init一路回车yes生成package.json文件 4 .构建npm:在微信开发者工具的菜单栏中找到工具栏的选项“构建npm”,...
  • 微信小程序 wepyjs 第三方toast组件 说明 官方toast组件只支持显示success,loading两种icon,因此需要一个更加个性化的toast组件。 此组件依赖于wepyjs v1.1.9 ,如果没有使用wepyjs,则可以使用原版toast组件。 ...
  • 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version...
  • 小程序如何引入第三方UI组件(通常也是基于npm) 1、打开cmd,在小程序根目录内,初始化npm npm init -y 2、执行命令安装 npm 包: 以微信官方WEUI组件库为示例 npm install --save weui-miniprogram 3、安装完成...
  • 扩展组件不能以引入样式的方式直接使用,官方提到了npm下载的方式,以下是详细步骤~ 参考链接:点此查看原文 1、根目录打开终端npm init,一路回车 ,生成 package.json 文件 2、终端按照官网输入命令,安装需要的...
  • 微信小程序引入echarts图表组件,折线图柱状图啥的 八月份微信小程序支持了npm,所以就可以直接用npm的方式引入图表组件。 参考的github链接为:https://github.com/F-loat/mpvue-echarts 第一步,初始化一个mpvue...
  • 主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下
  • 微信小程序引入vant Weapp组件 步骤: 1. 打开终端: 先初始化: npm init -y 然后进行安装 npm install --production npm i @vant/weapp -S --production 2. 需要在微信开发者工具,点击工具==>>构建npm 并...
  • 微信小程序引入扩展组件

    千次阅读 2020-10-22 11:04:43
    引入组件:npm i @miniprogram-component-plus/tabs--save; 微信开发者工具点击详情,勾选使用npm模块; 微信开发者工具点击工具–>构建npm; 在页面的页面 json 文件中加入 usingComponents 字段;{ ...
  • 1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/style/weui.wxss这个网址的内容全部复制到刚刚创建的weui.wxss文件中并保存 3. 在...
  • 第一步:查看是否可使用npm命令,没有则安装: 我这里已经安装了,如果没有则安装node.js ...第二步:微信开发工具,打开微信小程序项目,没有就新建一个: 这里我就新建一个 小程序项目:...
  • 微信小程序自定义组件:带未读数目的tab按钮 组件的使用 可以直接复制dist中的文件,到你的项目的pages页。如果放到其他的目录,需要相应修改下列引用中的路径( ./path/to/file/tabbar.subfix ) index.wxml (页面的 ...
  • 1.微信小程序内置的组件(view,from ,button等)不能满足我们的需要时,就可以自己定义 2.微信小程序自定义组件这个功能是从小程序基础库版本 1.6.3 开始支持的,低版本需做兼容处理。 3.微信小程序中的组件到底是...
  • 微信小程序icon组件的实现,具体如下 原生的icon组件的属性 WXML <icon wx:for={{typeList}} type={{item}} size=40></icon> JS Page({ data: { typeList: ['success', 'success_no_circle', 'info', 'warn...
  • 微信小程序中使用bigdecimal 要使用到npm 安装node.js就不细讲了 创建微信小程序项目完成后 在根目录下打开cmd 输入命令 npm初始化 npm init -f 之后执行命令安装 组件bigdecimal npm i bigdecimal -S --...
  • 微信小程序引入echarts图表

    万次阅读 2019-01-06 12:29:21
    微信小程序引入echarts图表 ECharts 和微信小程序官方团队合作,提供了 ECharts 的微信小程序版本,ECharts图表技术在国内应该是最好的了,能结合到小程序应用真的是极好。 准备:小程序开发环境,下载ECharts组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,108
精华内容 8,443
关键字:

微信小程序引入组件

微信小程序 订阅