uni-app优秀插件

最新推荐文章于 2024-05-29 22:37:19 发布
最新推荐文章于 2024-05-29 22:37:19 发布
阅读量5.7k 收藏 67
点赞数 2
分类专栏： 前端 文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liuyilllin/article/details/118944198
版权

组件库

ThorUI

ColorUI

uViewUI

框架

uniCloud admin 基础框架

基于 uni-app，uniCloud 的 admin 管理项目模板

image-20210722193633018

vue-admin-beautiful通用型跨平台集成框架

企业级中后台解决方案，可免费商用，同时支持PC、平板、手机，vue3.0版本已开源见github分支

image-20210722194812965

UI界面和组件

轮播图系列

高级轮播图

精致的图片展示组件，自定义面板指示点，可配置性强

image-20210716204831080

大小图轮播，类似手机相册

图片轮播，商品详情图

image-20210716205114534

QSwiper组件

切换动画很强大

一款由自定义元素组成的有过渡动画及背景渐变的swiper、引导页，切分为元素解决了小程序占内存大问题

image-20210716205234119

画廊(ynGallery)组件

类似轮播但不是

通用画廊(ynGallery)组件 流畅的滑动感 类似于猫眼影廊 体验感不错

image-20210716205412378

带缩放的轮播

轮播不能用于H5 uni.createAnimation不支持H5

image-20210716205449277

一个3D的炫酷的图片轮播展示组件

3D图片轮播组件，支持点击/手势切换、自动轮播、点击事件、标题，新增背景幕布设置。推荐一次5-9张图

image-20210716205530363

富文本系列

富文本组件加强 js 工具

加强、优化富文本（rich-text）组件，调用方便，可配置，大幅度优化富文本组件；

image-20210716205829535

指定内容高亮

可指定高亮内容，是否加粗字体设置，颜色设置

image-20210716205936342

Parser富文本插件（很强大）

全端支持，可编辑

高效轻量，功能丰富

image-20210716210301452

image-20210716210309561

瀑布流

MzShop-商城模板 代码清晰易懂

对华为快应用开源商城项目的改写，借鉴了其代码组件化的特征，但是却更胜一筹，代码更加规范

image-20210719193959957

Simple-store电商模板

淘客模版

image-20210719194145070

商城模板

商城首页，个人中心，登录注册，购物车，商品详情，商品分类页，客服聊天页，地址管理等

image-20210719194302810

品牌商城模板整套

可以根据不同的市场，不同的档期，不同的分类分别展示相关的商品信息，支持微信，支付宝支付

image-20210719194346562

mix-mall 电商项目模版

电商主要页面模板

image-20210719194418483

商城手机端后台管理+多商户商家端+分销

image-20210719194446893

多平台管理系统模板uniapp-admin

image-20210719194541760

新闻模板

vue + nvue 修复新版闪退问题

简单易懂，注释详尽的nvue新手向使用示例

image-20210719194621136

数字货币交易系统模板

image-20210719194650180

QQ音乐模板

用uni app 框架兼容三端[H5端、小程序端、app端]仿照QQ音乐界面

image-20210719194727816

仿「ONE · 一个」App模板

image-20210719194809896

登陆注册忘记密码模板

极简登录注册模板

极简的登陆模板，包含登陆，注册，找回密码，提供APP项目学习示例

image-20210719194913872

登陆注册忘记密码模版

通用登录注册模版，纯页面代码模版。目前兼容H5、微信小程序

image-20210719194958761

登录注册忘记密码模板

一套登录注册页

image-20210719195110264

首页单页面

仿新闻仿头条首页

仿新闻客户端首页和今日头条客户端首页，可以左右滑动

image-20210719195201005

教育APP首页

image-20210719195239717

商城首页单页模板

image-20210719195259615

个人中心单页面

仿京东个人中心模板

仿京东的个人中心页面，只有列表，没有内页

image-20210719195345780

cmd-person个人中心模板

作为项目模板基础，对于初学vue新手入uni-app友好，代码操作注释明确

image-20210719195506278

个人中心页面模板

image-20210719195525428

商城个人中心

image-20210719195542740

个人中心

image-20210719195636542

其他单页面

审批模板，支持小程序和APP

image-20210719195710520

基于uni-app的搜索页面，带历史搜索记录

历史搜索记录存于本地存储，可一键删除，图标未上传，自行添加即可

image-20210719195738246

分享推广页面，分享第三方、保存二维码、复制推广地址

image-20210719195800470

发布评价模板

封装的发布评价模板

image-20210719195829232

列表到详情页面模板

展示新闻的列表页和详情页

image-20210719195935299

问题反馈页面模板

问题反馈页面模板，方便开发者快速搭建问题反馈界面

image-20210719195956161

导航栏

uni-popup 弹出层

Popup 组件，提供常用的弹层

image-20210722194143764

【wxs+renderjs实现】高性能的下拉刷新上拉加载组件

支持uni-app的下拉刷新和上拉加载的组件,支持原生页面和局部区域滚动,支持国际化

image-20210722194022728

顶部导航栏+list上下拉刷新（很强）

列表左右切换上拉加载下拉刷新点击反馈

image-20210721194722756

tab+list+pull刷新+触底加载+左右滑动 模板

封装的列表模板，包括tab，下拉刷新，触底加载，左右滑动触发tab等，适配h5，微信小程序，app。

image-20210721194915352

图表

uCharts高性能跨全端图表

支持nvue！全新官方图表组件，支持H5及APP用ECharts渲染图表，uniapp可视化首选组件

image-20210721194958858

ucharts图表二次封装

此插件为ucharts的二次封装，旨在简化ucharts的使用过程！

image-20210721195037931

地图

原生地图路线规划实现模版

通过nvue实现原生地图的路线规划，使用bindingx实现地图层级的上拉抽屉。

image-20210721195119357

ms-openMap 打开第三方地图

该方法支持多端（APP、H5、微信小程序）跳转第三方地图并定位指定坐标。

image-20210721195148512

动画

w-loading加载动画

30多款css loading加载动画

image-20210721195425802

数字增长动画

一款可以让数字跑起来的组件件

image-20210721195454892

数字增长动画

实现文字的自增长(可用于web项目,uniapp项目,不要看截图丑,百分百实现你要的效果)

image-20210721195536434

长按录音交互

长按录音，通过配置控制录音时长及动画效果。模拟调用讯飞的语音识别效果

image-20210721195607707

loading动画,简单易修改

image-20210721195642709

css进度条

image-20210721195709913

canvas

海报名片

功能丰富的海报绘制，圆角，边框，单行多行，图片，下载等需要用到的功能全部都有，借鉴和学习的好材料

image-20210721195814043

一款基于canvas的商品海报生成组件

一款基于canvas的商品海报生成组件，可以根据图片比例生成商品海报图

image-20210721195858046

选择器

日期、时间、多级联动picker(下载示例为最新代码）

日期、时间、多级联动picker，目前兼容APP、H5、微信、支付宝、百度等小程序，其它暂未测试

image-20210722194426165

时间日期选择器

可禁用超过当前的时间，可设置时间选项，时间可灵活自定义,可选时间段

image-20210721200012609

DatePicker 多粒度时间选择器

该组件实现的功能是将原生picker组件的mode值为date和time结合。时间粒度有年、月、日等

image-20210721200045913

日期时间选择器（强推）

全新版本，一款高颜值、多场景的日期时间选择器，提供自定义颜色/格式/文案等。

image-20210721200257864

支付

验证码 密码 微信支付宝支付 支付密码样式

image-20210721200548930

表格

t-table 表格组件

image-20210721200639122

其他

气泡菜单，类似微信右上角

image-20210721200808666

全屏客服按钮可拖动，自动吸边

1.可全屏滑动 2.自动吸边 3.H5、APP、QQ小程序跳转加好友，微信小程序调用客服功能

image-20210721200840303

仿微信列表长按弹窗菜单

仿微信列表长按弹窗菜单，优雅扩展列表功能。

image-20210721200912778

顶部信息提示组件

一款高度封装的顶部信息提示组件

image-20210721201127281

一键回到顶部，非常精简

image-20210721201206427

下拉式筛选菜单

商城，团购常用的下拉式筛选菜单，最多支持3级子菜单，支持多选/单选筛选

image-20210721201242657

工具

网络请求

luch-request

基于Promise开发的跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力

image-20210721201558184

安装
使用npm
 npm i luch-request -S
Example
创建实例
 import Request from '@/utils/luch-request/index.js' // 下载的插件
 // import Request from 'luch-request' // 使用npm
 ​
 const http = new Request();
执行GET请求
 http.get('/user/login', {params: {userName: 'name', password: '123456'}}).then(res => {
 ​
 }).catch(err => {
 ​
 })
 // 局部修改配置，局部配置优先级高于全局配置
 http.get('/user/login', {
     params: {userName: 'name', password: '123456'}, /* 会加在url上 */
     header: {}, /* 会与全局header合并，如有同名属性，局部覆盖全局 */
     dataType: 'json',
     // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
     custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
     // #ifndef MP-ALIPAY
     responseType: 'text',
     // #endif
     // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
     timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
     // #endif
     // #ifdef APP-PLUS
     sslVerify: true, // 验证 ssl 证书 仅5+App安卓端支持（HBuilderX 2.3.3+）
     // #endif
     // #ifdef H5
     withCredentials: false, // 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
     // #endif
     // 返回当前请求的task, options。请勿在此处修改options。非必填
     getTask: (task, options) => {
          // setTimeout(() => {
          //   task.abort()
          // }, 500)
     },
     // 自定义验证器。statusCode必存在。非必填
     validateStatus: function validateStatus(statusCode) {
        return statusCode >= 200 && statusCode < 300
     }
 }).then(res => {
 ​
 }).catch(err => {
 ​
 })
执行POST请求
 http.post('/user/login', {userName: 'name', password: '123456'} ).then(res => {
 ​
 }).catch(err => {
 ​
 })
 // 局部修改配置，局部配置优先级高于全局配置
 http.post('/user/login', {userName: 'name', password: '123456'}, {
     params: {}, /* 会加在url上 */
     header: {}, /* 会与全局header合并，如有同名属性，局部覆盖全局 */
     dataType: 'json',
     // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
     custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
     // #ifndef MP-ALIPAY
     responseType: 'text',
     // #endif
     // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
     timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
     // #endif
     // #ifdef APP-PLUS
     sslVerify: true, // 验证 ssl 证书 仅5+App安卓端支持（HBuilderX 2.3.3+）
     // #endif
     // #ifdef H5
     withCredentials: false, // 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
     // #endif
     // 返回当前请求的task, options。请勿在此处修改options。非必填
     getTask: (task, options) => {
          // setTimeout(() => {
          //   task.abort()
          // }, 500)
     },
      // 自定义验证器。statusCode必存在。非必填
      validateStatus: function validateStatus(statusCode) {
         return statusCode >= 200 && statusCode < 300
      }
 }).then(res => {
 ​
 }).catch(err => {
 ​
 })
执行upload请求
   http.upload('api/upload/img', {
     params: {}, /* 会加在url上 */
     // #ifdef APP-PLUS || H5
     files: [], // 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
     // #endif
     // #ifdef MP-ALIPAY
     fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
     // #endif
     filePath: '', // 要上传文件资源的路径。
     // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
     custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
     name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
     // #ifdef H5 || APP-PLUS
     timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
     // #endif
     header: {},  /* 会与全局header合并，如有同名属性，局部覆盖全局 */
     formData: {}, // HTTP 请求中其他额外的 form data
     // 返回当前请求的task, options。请勿在此处修改options。非必填
     getTask: (task, options) => {
       // task.Update((res) => {
       //   console.log('上传进度' + res.progress);
       //   console.log('已经上传的数据长度' + res.totalBytesSent);
       //   console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
       //
       //   // 测试条件，取消上传任务。
       //   if (res.progress > 50) {
       //     uploadTask.abort();
       //   }
       // });
     }
   }).then(res => {
     // 返回的res.data 已经进行JSON.parse
   }).catch(err => {
 ​
   })
封装的request网络请求

基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截

插件使用说明
  • 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截
  • 下载后把 vmeitime-http 文件夹 copy 到项目 common/ 目录下
配置
全局配置修改（修改vmeitime-http/interface.js中config和interceptor）
     config: {
         baseUrl: "https://api.com/api/",
         header: {
             'Content-Type':'application/json;charset=UTF-8',
             'Content-Type':'application/x-www-form-urlencoded'
         },    
         dataType: "json",  
         responseType: "text"
     },
     interceptor: {
         request: null,
         response: null
     }
具体接口调用时修改（在vmeitime-http/index.js文件中具体业务接口中配置)
 //设置baseUrl
 http.config.baseUrl = "http://localhost:8080/api/"
 //设置请求前拦截器
 http.interceptor.request = (config) => {
     //添加通用参数
     config.header = {
         "token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
     }
 }
 //设置请求结束后拦截器
 http.interceptor.response = (response) => {
     //判断返回状态 执行相应操作
     return response;
 }
使用
全局使用(在main.js注册)
   import api from '@/common/vmeitime-http/'
 ​
     // 全局挂载后使用
     Vue.prototype.$api = api

 <template>
     <view class="content">
 ​
         <view class="uni-padding-wrap uni-common-mt">
             <view class="uni-textarea uni-common-mt">
                 <textarea :value="res"></textarea>
             </view>
             <view class="uni-btn-v uni-common-mt">
                 <button type="primary" @click="sendRequest" :loading="loading">发起请求</button>
                 <button type="default" @click="sendRequest1" :loading="loading">发起请求(async/await)</button>
             </view>
         </view>
 ​
     </view>
 </template>
 ​
 <script>
     export default {
         data() {
             return {
                 loading: false,
                 res: ''
             }
         },
         onLoad(option) {
             //this.sendRequest();
             //this.sendRequest1();
         },
         methods: {
             // 方式一
             sendRequest: function() {
                 this.loading = true
                 this.$api.test({noncestr: Date.now()}).then((res)=>{
                     this.loading = false;
                     console.log('request success', res)
                     uni.showToast({
                         title: '请求成功',
                         icon: 'success',
                         mask: true
                     });
                     this.res = '请求结果 : ' + JSON.stringify(res);
                 }).catch((err)=>{
                     this.loading = false;
                     console.log('request fail', err);
                 })
             },
 ​
             //方式二  https://segmentfault.com/a/1190000013292562?utm_source=channel-newest
             async sendRequest1() {
                 this.loading = true
                 let res = await this.$api.test({noncestr: Date.now()});
                 this.loading = false;
                 this.res = '请求结果 : ' + JSON.stringify(res);
             }
         }
     }
 </script>
局部使用(局部使用，不需要在 main.js 中注册)
 <template>
     <view class="content">
 ​
         <view class="uni-padding-wrap uni-common-mt">
             <view class="uni-textarea uni-common-mt">
                 <textarea :value="res"></textarea>
             </view>
             <view class="uni-btn-v uni-common-mt">
                 <button type="primary" @click="sendRequest" :loading="loading">发起请求</button>
                 <button type="default" @click="sendRequest1" :loading="loading">发起请求(async/await)</button>
             </view>
         </view>
 ​
     </view>
 </template>
 ​
 <script>
     import api from '@/common/vmeitime-http/'
 ​
     export default {
         data() {
             return {
                 loading: false,
                 res: ''
             }
         },
         onLoad(option) {
             //this.sendRequest();
             //this.sendRequest1();
         },
         methods: {
             // 方式一
             sendRequest: function() {
                 this.loading = true
                 api.test({noncestr: Date.now()}).then((res)=>{
                     this.loading = false;
                     console.log('request success', res)
                     uni.showToast({
                         title: '请求成功',
                         icon: 'success',
                         mask: true
                     });
                     this.res = '请求结果 : ' + JSON.stringify(res);
                 }).catch((err)=>{
                     this.loading = false;
                     console.log('request fail', err);
                 })
             },
 ​
             //方式二
             async sendRequest1() {
                 this.loading = true
                 let res = await this.api.test({noncestr: Date.now()});
                 this.loading = false;
                 this.res = '请求结果 : ' + JSON.stringify(res);
             }
         }
     }
 </script>
Liuyilllin
关注
  • 2
    点赞
  • 踩
  • 67
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
模仿今日头条(微信小程序源代码)
06-09
模仿今日头条(微信小程序源代码)
uniapp 常用原生插件大全（2024年最新）
三杯五岳
04-23 9775
uniapp 常用原生插件大全，包括扫码、图片选择、文件选择、图片编辑、应用通知、应用未读角标、开机自启、sqlite数据库、保活、快捷方式、图片水印、视频压缩、动态修改应用图标等等
手摸手教你uniapp原生插件开发
最新发布
六道对穿肠的学习之旅
05-29 1962
公共证书, 自由证书,云端证书都行 随意 我用的公共证书打包好后就可以运行自定义基座了end大家结合看参考资料其他参考资料。
Uniapp 原生插件的详细使用步骤（本地插件、云端插件、自制原生插件）
卡尔特斯
01-10 1万+
uniapp 基座、标准基座、自定义基座；传统打包、快速安心打包的区别。原生插件文档本地插件、云端插件。本地插件、云端插件都只能只能使用自定义基座来看效果，每次增删插件都必须要重新打包基座，其实就是将第三方包解析嵌入到包内，然后本地修改的内容跟包内的内容结合达到热更新效果，也能实时看到最新效果。插件增删都需要重新打包自定义基座，通过标准基座运行是无法生效的，会报错找不到哦。基座的打包方式顶部有文章介绍，另外，配置打包信息时，如果没有广告配置，可以将下面的广告配置关掉，默认是勾选的。这里是通过云打包。
扩展应用功能的无限可能——UniApp生态系统中的插件探索(一·)
Why_does_it_work的博客
06-29 2480
在UniApp中，插件是指可扩展的功能模块，它们可以用于增强应用的功能或提供特定的功能集合。插件可以由开发者自行定义和实现，然后通过引入和使用来扩展UniApp应用。插件可以根据其功能和用途进行分类。以下是一些常见的UniApp插件分类：基础功能插件：这些插件提供了一些基本的功能，例如网络请求、本地存储、事件处理等。它们通常被广泛使用，并且对于大多数UniApp应用都是必需的。UI组件插件：这些插件提供了各种用户界面组件，例如按钮、列表、表单、弹窗等。它们可以帮助开发者快速构建漂亮和交互性强的界面。
uniapp 常用原生插件大全
三杯五岳
10-05 7658
uniapp 常用原生插件大全，包括扫码、图片选择、文件选择、图片编辑、应用通知、应用未读角标、开机自启、sqlite数据库、保活、快捷方式、图片水印、视频压缩、动态修改应用图标等等
uni-app图片上传插件.rar
11-06
【uni-app图片上传插件】是一款专为uni-app框架设计的组件，用于实现多图片的上传功能，并且具备小图预览以及生成图片URL的能力。uni-app是一个基于Vue.js开发的多端统一的框架，它允许开发者编写一次代码，就可以在...
uni-app开发的社交软件
01-20
- 通过引入插件市场，uni-app支持丰富的第三方组件和API，满足各种功能需求。 2. 社交软件功能模块： - 聊天功能：实现用户之间的即时通讯，包括文本、语音、图片、表情等消息类型，还可以包含位置分享、文件传输...
uni-app闪电日历源码.zip
06-24
uni-app的灵活性使得开发者可以高效地进行多端开发，而源码的开放性则为我们提供了一个学习和借鉴的优秀示例。无论是对于uni-app的初学者还是经验丰富的开发者，这份源码都是一个宝贵的参考资料，有助于理解uni-app...
uni-app-master：uni-app是使用Vue语法开发小程序，H5，App的统一框架
11-25
官网地址： : Vue.js开发者使用Vue语法编写代码， uni-app框架将其编译到小程序（微信/支付宝/百度/字节跳动/ QQ /钉钉），App（iOS / Android），H5等多个平台，保证其正确运行并达到优秀体验。uni-app的特点开发者...
uni-app-ui：uni-app-ui
02-18
7. **插件与扩展**：uni-app-ui的开放性允许开发者编写自定义插件，通过JavaScript实现特定功能或扩展已有组件，增强框架的功能和灵活性。 在实际开发过程中，uni-app-ui不仅提供了丰富的组件库，还有一套完善的...
uni-app 基于vmeitime-http 请求封装使用
xm2395939的博客
04-08 1639
vmeitime-http 封装链接https://ext.dcloud.net.cn/plugin?id=159 基于 vmeitime-http插件 request 使用方式，支持请求和响应拦截 vmeitime-http 作者SnoopyChen 作用： 避免繁琐配置api 使用方法 1. 将整个vmeitime-http放入项目根目录的common中 2.修改全局...
盘点那些神级uniapp插件，总有一款让你事半功倍
wongvio的博客
12-28 5736
自从有了uniapp，各位做小程序，app是不是感觉快起飞了，如果你想快速推出自己的移动端（各平台小程序，安卓、苹果），那么uniapp还是很不错的，至少时间和研发成本可以帮你降低很多很多。所谓天下技术是一家，各位flutter或者react native心态不要急躁，更不要鄙视uniapp下面就给大家推荐几款，我用过的uniapp插件，让你事半功倍，即使你是不会设计，不懂前端的后端同学，也能通过简单的上手，成为一名全栈！！！！
uni-app之android原生插件开发
qq_29848853的博客
09-03 1万+
uni-app之android原生插件开发
Uniapp接入插件的三种方式
qq_23257451的博客
03-11 1万+
我这里的学习例子使用uni-badge这个插件，其他的插件也是类似的引入方式，大多数插件文档中也包含使用方法。
uniapp原生插件开发调用第三方SDK
matchaa__的博客
04-07 1万+
uniapp原生插件开发调用第三方SDK过程分享
分享uniapp中好用的插件，你值得拥有！
zmx781284440的博客
05-16 396
支持APP、H5、微信小程序。支持APP、H5、微信小程序。
uniapp原生Android插件开发入门教程 （最新版）
qq_56892518的博客
11-30 3303
uniapp原生Android插件开发
uni-app框架看这五款组件库就够了
热门推荐
lonlie的博客
12-30 2万+
FirstUI(https://www.firstui.cn/)是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序版本，兼顾高效率与高性能，让您的app、小程序开发获得百倍提质提速！ 120+款组件领跑业界，性能和设计感都很棒，真正的移动端宝藏组件库！ 现在有微信小程序版、uniapp版两个版本，近期更新到了1.7.0，完美支持vue3。
uni-popup 弹出层 uni_modules 安装
06-08
要在 uni-popup 中使用 uni_modules，需要先进行安装。以下是安装步骤： 1. 打开 HBuilderX，在项目根目录的 manifest.json 文件中添加以下代码： ```json { "uni_modules": { "path": "uni_modules" } } ``` 2. 在命令行中进入项目根目录，执行以下命令进行安装： ```bash npm install ``` 3. 在需要使用 uni-popup 的页面中，引入 uni-popup 组件： ```html <template> <view> <uni-popup></uni-popup> </view> </template> <script> import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue' export default { components: { UniPopup } } </script> ``` 这样就可以在页面中使用 uni-popup 弹出层组件，并且可以使用 uni_modules 中的其他组件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值