微信小程序ui组件库使用及引用外部文件方法

小程序ui组件我发现几个还是不错的
1.iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。
GitHub地址:https://github.com/TalkingData/iview-weapp
2.Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库,组件比较丰富,值得使用。
GitHub地址:https://github.com/wux-weapp/wux-weapp
3.ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!
其组件在美观性方面比较突出。
GitHub地址:https://github.com/weilanwl/ColorUI
我这个比较喜欢
还有
MinUI
MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具。
GitHub地址:https://github.com/meili/minui

ZanUI WeApp
ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序实现版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。
现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、tooltips 等组件或元素。
GitHub地址:https://github.com/youzan/zanui-weapp
npm下载:npm i zanui-weapp
另外,ZanUI也使用mpvue重写了zanui-weapp,实现了其中所有组件,为使用mpvue的开发者提供了方便。
GitHub地址:https://github.com/samwang1027/mpvue-zanui
npm下载:npm i mpvue-zanui

都有写怎么调用这些组件,下载上文件,把需要的组件放到你的项目中引用可以了
方便很多,可以减少很多开发时间

如果你引用自己的公共文件,例如comm.js

const comm=[name:'张三',age:18]
funtion age(){
	return num= 1
}
module.exports={
  comm: comm,
  age:age
}

上面的 comm变量 引用以及 方法age() 调用,
在最后必须写上
module.exports={
comm: comm,
age:age
}
如果不写的话其他文件调用是拿不到的。

公共页面comm.js这个文件放到 utils文件中

const comm=[name:'张三',age:18]
funtion age(){
	return num= 1
}
module.exports={
  commFunt: comm,
  ageNum:age
}

index.js文件调用

const comm = require('../../utils/comm.js)
//这里引用路径要注意你的文件地址
Page({
	data:{
		age:'',
		num:''
	},
	onLoad(){
		let age = comm.ageNum
		let num = comm.commFunt
		this.setData({
			age:age,
			num:num
		})
	}
})

引用组件你要在json文件中声明引用的文件
在这里插入图片描述
在这里插入图片描述
navigationBarTitleText 是设置的标题文字
usingComponents是你引用组件写的地方
i-icon 名字是自己起 不要有大写。后面跟着你引用组件的地方
在这里插入图片描述
我的dist就是放的组件的文件
引用后再wxml文件方标签的时候 要用你起的名字

<i-icon></i-icon>
//里面传什么参数就根据你引用组件的需求了,一边你引用的组件都有自己的api  你可以看看需求
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值