colorui是UI框架:   超好用的一款 小程序二维码体验: :  引入方式: 1.先去下载colorui     https://github.com/weilanwl/ColorUI 把colorui文件夹 复制进去就行  2.  在app.wxss中全局引入: /**app.wxss**/ @import 'colorui/main.wxss'; @import 'colorui/icon.wxss'; @import 'colorui/animation.wxss'; 三.就可以用了

uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponents wxcomponents下新建vant目录 创建完成后的目录结构 2. 项目中引入vant-weapp组件 在vant-weapp的GitHub Releases版块下载最新的zip包 解压下载文件,将dist目录拷贝到刚才创建vant目录中 3. 页面中使用引入的UI组件 在App.Vue文

小程序引入e-charts图表 这里是狗尾草第一次发表掘金文章,日后望各位大佬多多支持~ 前言:运营助手,见名知意,没有图表数据的展示,看上去是有多空白.因此,俺们UI做了很好的交互,一个页面来了4个e-charts图表,且基本都不一样.身为一个职业前端,怎么能猥琐呢? 干就完了~ 实现思路 因为一个页面要引入多个图表,所以需要对e-charts图表进行封装.然鹅问题来了,怎么引入呢? 为了兼容小程序 Canvas,ECharts提供了一个小程序的组件,用这种方式可以方便地使用 ECharts.

先看下最终的效果(默认可以获得未来三天数据): 第一:首先准备条件(必须): 1.小程序已认证,有appID 2.必须把https://api.map.baidu.com 添加到小程序的合法域名列表中 上面两个条件缺一不可,满足后 继续往下看 第二:在百度开放平台上创建一个应用,拿到Ak(前提有百度账号).申请地址:http://lbsyun.baidu.com/apiconsole/key 应用创建成果: 第三:万事俱备,只欠东风,引入官方提供的JS文件(下载地址:http://lbsyun.

微信小程序编写新闻阅读列表 不忘初心,方得始终:初心易得,始终难守. 本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期 数据绑定(核心知识) 数据绑定的运算与逻辑 AppDate 区域介绍 事件与事件对象 缓存 列表渲染(核心知识) Template 模板的使用(核心知识) Swiper 组件(轮播图) Swiper官方API文档:https://developers.weixin.qq.com/miniprogr

ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI  小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大

今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also

首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts 里面有微信小程序引入ECharts组件的教程,下载了官方的项目后,拷贝ec-canvas到我微信小程序的目录下,然后在我的微信小程序文件夹中创建line文件夹,并新建四个文件index.js inde

1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 https://vant-contrib.gitee.io/vant-weapp/#/quickstart#an-zhuang 1.购建 package.json 文件(在项目下cmd进入编辑器输入  npm init -y ) 2.在项目根目录上通过 npm 安装 npm i @vant/wea

教程请查看小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 自定义组件:自定义组件可以将不同页面具有共同样式的布局独立开来,减少代码的重复冗余,也能更好的维护组件. 例:自定义弹框,自定义加载,自定义列表等等,自定义弹框网上教程很多,此处就讲讲自定义列表,原理大同小异,细节需要多加注意. 最终效果: 1.建立component文件夹,专门存放自定义组件  如:goodsList

1.移动端UI库 ①.Vant UI 官方地址:https://youzan.github.io/vant/#/zh-CN/intro github地址:https://github.com/youzan/vant 优点:用来做移动端商城很不错,支持定制主题,社区还算活跃 ②.Mint UI 官方地址:http://mint-ui.github.io/#!/zh-cn github地址:https://github.com/ElemeFE/mint-ui/ 优点:饿了么团队制作,组件比较丰富 缺

在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思路:给点击的view增加类,依靠点击的index对state进行赋值.如果相同时,给该view增加类. 实现代码: .wxml文件 <view> <view class='appointent-date'> <view class="appointent-date-di

想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI 小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大开发人员的欢迎. 2:美团小程序框架mpvue Github:https://github

1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标,wx.navigateTo为小程序提供的界面路由跳转的方法,参数url为要跳转页面的连接(?后面为连接携带的参数) 2.data-index="{{index}}"为标记列表的下脚标,index的来源与wx:for="{{synctable}}"的列表渲染有关   默认

前言 之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了! 框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出. 在这里我有个问题,为什么微信小程序不支持css里面直接导入本地图片作为背景图呢? 内联式 <view class="img" style="background-image: url(/static/images/draw.png)"></view> 外部引入 如果css是

微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: ? 1 2 3 4 5 6 7 8 <view class="taga">  <view class="tag-title">标签</view>  <view class="tag-box">  <vie

转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-14/ 列表的渲染,不管是任何语言都有列表这个概念.源码:https://github.com/limingios/wxProgram.git 中的No.8 小程序的列表的渲染 for 循环 官方的阐述 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html 在组件上使用 wx:for 控制属性绑

如果大家是按照官网的引入方法,是否报错如图 不着急,大家就试试我的方法吧!两步走完美搞定! 第一步: 在小程序顶部点击设置->项目设置,会弹出下面的窗口.大家把使用npm模块勾上对勾. 第二步: 在小程序的项目根目录下面进行npm init的初始化后进行安装vant 1.npm init 2.npm install --production vant-weapp 总结:以上是我本人的解决办法,如果大家谁还遇到了其他问题也可以评论,我们共同解决,欢迎评论!

iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址:https://github.com/TalkingData/iview-weapp 2. 将组件库复制到工程的static目录下 下载完成后,到它的目录中寻找名为dist的目录并复制到你的工程目录下,然后给这个dist目录改个名字,比如叫iview. 3.  为需要使用自定义组件的Page进行配

通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.checkbox多项选择器组件.switch开关选择组件.navigator页面连接组件等. Ⅰ.登录设计 登录表单中,需输入账号.密码进行登录,在账号.密码输入框中都有友好的提示信息:登录按钮默认是灰色不可用状态,只有输入内容后,才会变为可用状态:在登录按钮下面提供手机快速注册.企业用户注册.找回密码链

微信小程序大热,在小程序过程中,我们很多时候都会用到地图.不管是企业的地址,还是商家的配送都会用到地图: 我在刚写地图这一块时,在网上也参考了很多网友的方法,始终有Bug(类似于地图拖拽是画面抖动,无法点击跳转到导航页面等等) 下面的代码是后台动态添加坐标(经度纬度的方法) 我这里有这么一个方法,希望对你有用:wxml: <map bindtap="toMap" showLocation id="map" latitude="{{latitude}}