a simple and practical lazyui-miniprogram package
-
创建小程序项目
-
进入项目
-
打开命令行
-
初始化
package.json
文件
npm init
- 安装
lazyui-miniprogram
npm install lazyui-miniprogram -S --production
-
打开小程序编辑器
- 找到
工具
工具栏 - 找到
工具
工具栏下构建 npm
功能 - 点击
构建 npm
- 找到
-
看看小程序项目根目录下,生成的
miniprogram_npm
里面就是编译的小程序文件
对对对,你没有看出,就是阿里的iconfont
只需要下载好阿里云iconfont.cn
项目组中font class
字体样式文件
然后用下载文件字体.css
文件内容替换根目录下iconfont.wxss
文件
{
"usingComponents": {
"iconfont": "/miniprogram_npm/lazyui-miniprogram/iconfont/iconfont"
}
}
没错,只需要写字体图标的名字
<iconfont icon="iconname" color="#fff333"></iconfont>
前提条件是准备好
iconfont
的配置
默认格式类似于微信tabBar
配置
module.exports = {
selected: 0, # 选中list下标
color: "#7A7E83", # 默认颜色
size: "50rpx", # 字体大小
selectedColor: "#3cc51f", # 选中颜色
list: [{ # tabBar 列表
iconPath: "iconxingqiu", # iconfont 字体图标`font class`名称
pagePath: "/pages/index/index", # 跳转页面路径
text: "组件" # `tabBar` 名称
}, {
pagePath: "/pages/logs/logs",
iconPath: "iconredu",
selectedIconColor: "iconredu",
text: "接口"
}]
}
{
"usingComponents": {
"tabbar":"/miniprogram_npm/lazyui-miniprogram/tabbar/tabbar"
}
}
<tabbar></tabbar>