微信小程序ui组件库使用及引用外部文件方法
小程序ui组件我发现几个还是不错的1.iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。GitHub地址:https://github.com/TalkingData/iview-weapp2.Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库,组件比较丰富,值得使用。GitHub地址:https://...
小程序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 你可以看看需求
更多推荐
所有评论(0)