Skip to content

mizuki1412/uniapp-sample

Repository files navigation

uniapp-sample

uniapp的示例工程。

注意:此工程用HBuilderX编译运行。

工程目录

  • lib: 通用的一些服务或库
  • static: 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
  • pages.json: 配置页面路由、导航条、选项卡等页面类信息

集成

tailwindcss

采用外部监听文件,然后生成目标css的方式。

输入文件是index.css,输出文件是tailwind.css,在App.vue中引入tailwind.uniapp.css.

注意:

  • App的css语法受限制。
  • 建议使用rpx
  • 不能用 -[],如h-[100rpx]
yarn add -D tailwindcss
# yarn tailwind
# 同时根据tailwind.config.js监听文件 
npx tailwindcss -i ./index.css -o ./tailwind.css --watch
# 去除其中的 *,兼容小程序
node ./tailwind.help.js

iconfont

https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html#%E8%8E%B7%E5%8F%96%E5%9B%BE%E6%A0%87 下载,采用其中的css、ttf文件,放入static/iconfont。

修改iconfont.css中:

@font-face {
    font-family: "iconfont"; /* Project id 4103773 */
    src: url('/static/iconfont/iconfont.ttf') format('truetype');
}

App.vue中引入 @import "static/iconfont/iconfont.css";

注:tabbar中的iconfont,不支持小程序。所以tabbar中用png。

TODO

  • request: download 按需求(需要按h5/wx划分开)
  • router
  • toast/modal test
  • 测试页列表
  • 应用popup实现通用错误提醒

About

vue3+tailwind+hbuilderx

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published