uni-app(二)

  • 运行项目
1.在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行;

2.在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 

运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app;

3.在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功;

           微信开发者工具在设置中安全设置,服务端口开启。

 

  • 介绍项目目录和文件的作用
pages.json文件用来对uni-app进行全局配置,决定页面的路径、窗口样式、原生的导航栏、底部的原生tabbar等;

manifest.json文件是应用的配置文件,用于指定应用的名称、图标、权限等;

App.vue是我们的根组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数;

main.js是我们的项目入口文件,主要作用是初始化Vue实例并使用需要的插件;

uni.scss文件是方便控制整体页面的风格样式。比如按钮颜色、边框风格;

unpackage打包目录,里面有各个平台的打包文件;

pages所有页面的存放目录;

static静态资源目录,比如图片等;

components组件存放目录

为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app约定了如下规范:

页面遵循Vue单文件组件规范:https://vue-loader.vuejs.org/zh/spec.html;

组件标签靠近小程序规范,uni-app组件规范:https://uniapp.dcloud.io/component/README;

接口能力靠近小程序规范,需将前缀wx替换为uni,uni-app接口规范:https://uniapp.dcloud.io/api/README;

数据绑定及事件处理和Vue.js规范一样,同时补充了App及页面的生命周期;

为兼容多端运行,建议使用flex布局进行开发。
  • 全局配置和页面配置

1.通过globalStyle进行全局配置:用于设置应用的状态栏、导航条等

参考网址:https://uniapp.dcloud.io/collocation/pages?id=globalstyle

使用方法,把自己需要的globalStyle样式配置到pages.json即可;

浏览器的页面

小程序的页面

2.页面配置

在pages目录新建一个message的目录,在message目录下创建一个message.vue的文件

创建好了在页面添加内容,不会显示

需要在pages.json里配置路径,才会显示     注意:1.需要显示的放在首项  2.不能有多余的标点符号    请看图上的蓝色标注

浏览器页面

小程序页面

posted @ 2021-08-24 07:47  会飞的猪礼  阅读(163)  评论(0)    收藏  举报