微信小程序实战二：iView-Weapp组件引入及源码bug修复

最新推荐文章于 2022-07-28 16:24:03 发布
置顶 最新推荐文章于 2022-07-28 16:24:03 发布
阅读量638 收藏
点赞数
分类专栏： 微信小程序 文章标签： javascript 微信小程序 iView
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16497617/article/details/109110719
版权

文章目录

1.小程序插件中集成iView

从github下载iView的dist文件夹拷贝到项目中或者是用npm更新
npm install iview --save 后将文件夹dist拷贝到项目中
iView github地址：https://github.com/TalkingData/iview-weapp
iView 开发文档地址：
https://weapp.iviewui.com/docs/guide/start

2.在需要引入组件的页面配置

如图所示我是在.json文件中配置了列表、卡片、按钮
在这里插入图片描述

列表的使用

<i-cell-group wx
了解本专栏 订阅专栏 解锁全文 超级会员免费看
博主逸尘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
mpvue-iview-weapp:使用mpvue导入iview-weapp
04-24
mpvue-iview-weapp 使用mpvue通过usingComponents导入 预览 1. git clone git clone https://github.com/wkl007/mpvue-iview-weapp.git 2. 安装依赖 cd mpvue-iview-weapp && npm install 3. 启动程序 npm run dev 4. 预览 打开微信开发者工具，新建项目，将目录指向 /dist/wx 即可 问题 若原生组件通过click事件，即this.triggerEvent('click', { index })来进行父子组件通信，mpvue无法从event.mp中读取到正确的detail，原因是因为mpvue将click事件编译为tap导致this.triggerEvent('click', { index })无法找到click句柄 暂时解决方案
微信小程序-使用TypeScript开发微信小程序
08-06
使用TypeScript开发小程序 运行 使用微信web开发者工具新建一个小程序项目，项目目录选择dist目录，该目录是ts源文件编译后存放的目录。 开发 $ git clone [email protected]:linguofeng/wxapp-typescript.git $ cd wxapp-typescript $ npm install -g gulp typescript $ yarn $ code . $ gulp watch 主要原理 通过Gulp工具调用tsc编译ts源文件，其它文件通过gulp的watch进行拷贝。 第三库是通过package.json文件描述，拷贝相关文件到dist/libs，并修改require引用的路径实现。 TODOS: [x] 加入第三方库支持 [x] 支持Redux [x] 支持rxjs [x] 支持moment [x] 支持bluebird [x] 支持redux-observable
新手快速入门微信小程序组件库 iView Weapp
10-16
主要介绍了新手快速入门微信小程序组件库 iView Weapp，iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库,需要的朋友可以参考下
微信小程序 wepy框架与iview-weapp的用法详解
10-17
主要介绍了微信小程序 wepy框架与iview-weapp的用法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
12-09
导入执行后 VM292:1 thirdScriptError  sdk uncaught third Error  module “miniprogram_npm/vant-weapp/mixins/transition” is not defined  Error: module “miniprogram_npm/vant-weapp/mixins/transition” is not defined     at require (http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26700)     at http
微信小程序引入iview weapp
js_push的博客
07-11 2001
微信小程序引入iview weapp 1. 下载iview 方式1：前往github下载 iview下载地址 方式2：在项目中通过npm引入 2. 引入下载好的文件 解压文件，目录如下 将其中的dist文件夹放到项目中 3. 按照iview官网的引入方式，需要引入哪一个组件，就在想引入组件的页面json文件中加入相应的引用 例如引入i-icon，路径按照自己的文件路径 "using...
微信小程序系列（1）关于iview weapp简单使用及 i-button 使用无效问题
kotoriyou的博客
06-09 5579
微信小程序系列（1）关于iview weapp简单使用及 i-button 使用无效问题 首先先介绍一下iview weapp 这个微信小程序组件库吧，这个看官方文档能学到非常明白，简单易用。虽然东西少了点，但应付微信小程序开发还是可以用一用的。 首页是这个样子： 到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 Bu...
微信小程序：使用iView Weapp 循环创建自定义的tabbar（图文并茂）
但行好事，莫问前程
03-14 1577
使用iView Weapp 循环自定义创建tabbar注意：下载iView Weapp组件库创建微信小程序并将文件放在根目录引入所需组件全局配置文件中设置tabbar 注意： 官网内容中并没有循环创建tabbar的方法，以下内容为博主自己网上查资料，摸索出来的，可能方法并不是最优的，但可以保证按照此方法一定可以循环创建tabbar 下载iView Weapp组件库 iView Weapp官方地址：官方网站 从官网进入 GitHub地址下载组件库的zip文件 解压后文件夹目录如下： 我们使用此组件库
原生小程序使用iview-weapp自定义tabBar
LY__lyxka的博客
07-28 520
原生小程序使用iview-weapp自定义tabBar
iview-weapp
05-21
一套高质量的微信小程序 UI 组件库
iview-weapp使用流程
xiaoququ的博客
01-24 2529
下载 https://github.com/TalkingData/iview-weapp 打开示例 # 从 GitHub 下载后，安装依赖 npm i 将 examples 目录在微信开发者工具中打开即可 使用 1、将 dist 目录拷贝到自己的项目中 2、查看文档 https://weapp.iviewui.com ①在使用组件的页面的 json 文件中配置（路径根据自己项目位置配置）：...
微信小程序组件库 iView Weapp使用教程
前端视听
09-09 2800
微信UI组件库 iView Weapp 介绍：iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。 https://weapp.iviewui.com/ 使用步骤 1：首先在github上面下载组件库代码 https://github.com/TalkingData/iview-weapp 2：下载之后解压，可以看到解压的组件文件内容，选择 dist文件 将 dist 目录拷贝到自己的小程序项目中
微信小程序使用iView Weapp自定义TabBar并解决切换闪烁问题
CodeXu-cyber的博客
10-19 2529
文章目录 前言 一、iView Weapp是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、iView Weapp是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 ...
如何修改iview源码
haya的博客
09-04 4373
前情提要 做的一个需求是想要鼠标进入弹框便不消失，移出鼠标弹框消失（即iview的 notice），仔细查看了iview/notice模块发现并不支持此功能 因此 只能自己尝试修改iview源代码（以下修改流程以修改notice为例） 首先将iview的官方源码库clone下来 cd iview git clone https://github.com/iview/iview.git npm i...
创建Vue项目 以及引入Iview
热门推荐
晚灯看街的博客
10-29 3万+
创建Vue项目 以及引入Iview官方文档# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev以上是vue官方文档中Vue.js 提供一个 官方命令
五分钟上手-微信小程序组件库 iView Weapp
祈澈菇凉
06-19 822
微信UI组件库 iView Weapp 介绍：iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。 https://weapp.iviewui.com/ image 使用步骤 1：首先在github上面下载组件库代码 https://githu...
微信小程序wepy框架里集成iview Weapp组件
ZZZhangbingyi的博客
08-11 3452
首先看了iview Weapp官网和GitHub上的源码，发现源码给的例子都是基于微信小程序原生开发，不太适用于wepy框架，所以这里主要记录了在wepy框架里使用iview Weapp组件的步骤： 1.下载iview Weapp组件源码，地址：GitHub - TalkingData/iview-weapp: 一套高质量的微信小程序 UI 组件库； 2.将源码中dist文件夹下所有文件拷贝到...
vue 微信小程序 日历
最新发布
10-30
Vue 微信小程序中的日历可以通过使用第三方组件实现，如iview-weapp、vant-weapp等。 在Vue中使用微信小程序的日历组件，需要先将组件引入到项目中，并且注册为全局组件，然后在页面中使用该组件即可。 首先，将第三方组件下载并引入到项目中，然后在main.js中进行全局注册： ```js import Vue from 'vue' import Calendar from 'path/to/calendar' Vue.component('calendar', Calendar) ``` 然后在需要使用日历的页面中，通过标签的形式使用日历组件： ```html <template> <view class="container"> <calendar @choose="onChoose"></calendar> </view> </template> <script> export default { methods: { onChoose(date) { console.log(date) } } } </script> ``` 上述代码中，通过在template中使用`<calendar>`标签来调用日历组件，并通过`@choose`事件监听用户选择日期的操作。当用户选择日期后，会触发`onChoose`方法，将选择的日期传递给该方法。 通过上述步骤，就可以在Vue微信小程序中使用日历组件了。当然，具体的日历组件的功能和样式可以根据实际需求进行定制，以上代码只是简单示例。 总结：Vue 微信小程序中使用日历组件的步骤大致如上所述，请根据自己的项目需求来选择合适的第三方日历组件，并进行相应的引入、注册和使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

博主逸尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值