小扩展:
rpx(responsive pixel):可以根据屏幕宽度自适应。规定屏幕宽度为750rpx。如果iphon6上,屏幕宽度为375px,共有750个像素,则750rpx = 375培训= 750物理像素,1rpx =0.5px = 1物理像素。
页面跳转:1.基于组件navigator 2.编程api
(wx.navigateTo,底部导航栏跳转-wx.switchTab({}))
关于图片:有固定宽高,需要重新设置
一、新建uni-app项目
工程目录
二、安装ThorUI
因为我建的是vue3项目,目前稳定的uniapp版本 vue3的前端组件还没有发现特别稳定的,vant4组件偏少,uview-plus升级解决冲突太麻烦,uni样式也不咋好看呢,这次先试试这个吧,注意这个ThorUI自行开发没事,要是用于商业或者外包是要收费的。
快速上手 | ThorUI文档
npm安装
在现有项目中使用 ThorUI 时,可以通过npm进行安装: npm install thorui-uni/ yarn add thorui-uni
注:目前仅发布了uniapp非会员版本。
引入组件
#
开启easycom组件模式
试一试
OK,组件引入成功
三、底部导航栏
在page中添加以下内容
"tabBar": {// 底部导航栏字体颜色"color": "#bfbfbf", // 底部导航栏选中字体颜色"selectedColor": "#466de2","list": [{"pagePath": "pages/index/index","text": "首页",// 图标"iconPath": "static/icon/home.png",// 选中图标"selectedIconPath": "static/icon/home-fill.png"},{"pagePath": "pages/order/order","text": "订单","iconPath": "static/icon/order.png","selectedIconPath": "static/icon/order-success-fill.png"},{"pagePath": "pages/renew/renew","text": "续费","iconPath": "static/icon/money-tax-rebate.png","selectedIconPath": "static/icon/money-finance-seller-fill.png"},{"pagePath": "pages/received/received","text": "接收","iconPath": "static/icon/product.png","selectedIconPath": "static/icon/product-checked-fill.png"}]}