小程序使用npm引入Weui组件库

1、创建小程序项目

2、在小程序根输入npm init,进行初始化，然后一路可以默认（enter）之后可看到packagejson

3、开始安装Weui组件库 npm install --save weui-miniprogram --production

4、工具>构建npm

5、点击小程序开发工具右上角详情-本地设置，勾选上使用npm模块

[上传中(image-b7a8e2-1624982995933-0)]

6、在小程序appwxss中引入样式文件

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weuiwxss';

7、index页面使用

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

//indexwxss <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}"> <view>test content</view> </mp-dialog>

```

<!-- 滚动图 -->

<view class="swiper" style="position:relative">

<swiper autoplay="{{true}}" circular="{{true}}" onChange="currentHandle">

        <block a:for="{{swiperList}}">

          <swiper-item class="swiper-box">

            <view class="swiper-item" style="width:100%;height:300rpx">

                <!-- lazy-load根据需要 onTap可以点击跳转 data-url绑定到跳转的链接-->

              <image lazy-load="{{true}}" mode="scaleToFill" src="{{itemimage}}" style="display:flex;width:100%;height:300rpx"

                onTap="swiper" data-url="{{itemurl}}" data-index='{{index}}' />

            </view>

          </swiper-item>

        </block>

      </swiper>

    <!-- 圆点 -->

      <view class="swiper_dot">

        <view class="trans MR10 {{current === index 'active': ''}}" a:for="{{swiperList}}" a:key="{{index}}"></view>

      </view>

</view>

```

```

data(){

    swiperList:[

        {

            image:'',//的路径

            url:""//要跳转的路径

        },

                {

            image:'',

            url:""

        }

    ],

    current: 0,//初始化dot

},

//监听current

currentHandle(e) {

consolelog(e)

    //改变current的值

    let { current } = edetail

    thissetData({

      current

    })

},

```

```

swiper-box {

  padding: 0 30rpx;

}

swiper-item {

  border-radius: 10rpx;

  overflow: hidden;

}

swiper_dot {

  display: flex;

  flex: 1;

  justify-content: center;

  position: absolute;

  bottom: 16rpx;

  left: 42%;//通过绝对定位 在滚动图的正下方 具体看自己

}

MR10 {

  margin-right: 10rpx;

}

trans {

  width: 23rpx;

  height: 8rpx;

  background-color: #ffffff70;

  border-radius: 35rpx;

  transition: width 05s linear;

}

active {

  background-color: #ffffffd7;

  width: 67rpx;

  transition: width 05s linear;

}

```

---转自我的自个的

支付宝小程序Swiper 滚动图 带圆点和跳转方式_多甘范科夫斯基的博客-CSDN博客

通过改变数组长度动态增删组件

<block wx:for="{{数组}}">

组件

</block>

1

2

3

1

2

3

2、点击添加按钮，增加数组的成员，组件相应增加

点击删除按钮，减少数组的成员，组件相应删除

二、示例

wxml:

<view>

<button bindtap='onTapAdd'>添加input组件</button>

<button bindtap='onTapDel'>删除Input组件</button>

<block wx:for="{{obj}}" wx:key>

<input value="{{item}}"></input>

</block>

</view>

1

2

3

4

5

6

7

1

2

3

4

5

6

7

js:

data: {

obj:[]

},

/增加组件 /

onTapAdd:function(e){

var temp=thisdataobj;

temppush(thisdataobjlength);

thissetData({

obj:temp

})

},

/ 删除最后一个组件，也可以修改删除指定组件/

onTapDel:function(e){

var temp = thisdataobj;

temppop(thisdataobjlength);

thissetData({

obj: temp

})

},

你问的是关于小程序论文的关键字有哪些吗？这种软件关键字如下：

1、小程序开发：包括小程序的基本概念和原理、小程序架构和设计、小程序的生命周期和运行机制等方面的内容。

2、小程序功能：包括小程序的功能特点、用户界面和交互设计、数据管理和存储、主要功能模块等方面的内容。

3、小程序应用：包括小程序在各个领域中的应用情况、小程序在企业中的应用、金融等领域的应用以及小程序的市场前景和发展趋势等方面的内容。

以上就是关于小程序使用npm引入Weui组件库全部的内容，包括:小程序使用npm引入Weui组件库、支付宝小程序Swiper 滚动图 带圆点和跳转方式、微信小程序动态删除uploader控件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！