uni-app

123 阅读1分钟

01-认识uni-app

uni-app官方文档:uniapp.dcloud.net.cn/

  • 创建项目 image.png
  • 效果如下: image.png
  • 运行到小程序模拟器 第一次运行时需要先配置开发者工具的路径 image.png
  1. 运行 image.png
  2. 报错 image.png
  3. 把微信开发者工具中的服务端口打开即可 image.png
  4. 运行到微信开发者工具中,效果如下: image.png
  • 快捷运行 image.png

02-globalStyle全局外观配置

官方文档(全局文件中):uniapp.dcloud.net.cn/collocation…

page.json文件中

  • navigationBarBackgroundColor image.png
  • navigationBarTextStyle取值只能是black或white image.png
  • navigationBarTitleText 在globalStyle中设置不起作用,原因是被页面配置文件覆盖 image.png image.png
  • backgroundColor下拉显示出来的窗口背景色
  • enablePullDownRefresh开启全局下拉,即所有的页面都会开启下拉 image.png
  • backgroundTextStyle下拉loading的样式,仅支持dark和light image.png image.png

03-创建页面

  1. 新建文件夹 image.png
  2. 新建.vue文件 image.png
  3. 创建完成 image.png
  4. 写内容 image.png
  5. 在page.json中配置路径 image.png
  • 但还是显示不出来,因为需要把路径移到最前面 image.png image.png
  • 此页面有背景,也有下拉刷新,因为我们配置的是全局样式

01-配置页面独有样式

pages文档:uniapp.dcloud.net.cn/collocation…

  • 设置样式 image.png
  • 效果: image.png
  • 设置h5单独的样式 image.png
  • h5端下拉刷新时效果如下,小程序的样式不变 image.png