uniapp学习心得

Uniapp学习心得

 

1. uniapp环境搭建

第一步：工具使用HBuilderX，该工具专门为uni-app做过特别强化。

第二步：安装微信开发者工具。

注意：

第一次运行微信小程序，需要让hbuilder找到微信开发者工具在哪，也就是配置微信开发者工具的安装路径。

再个就是记得打开服务端口。

 

1. uni-app的开发目录结构

pages目录： 存放页面的。

static目录：存放静态资源的。

unpackage目录：存放最终打包的存放位置。

App.vue文件：项目根组件。

main.js文件：项目的入口文件，也就是项目加载时，先加载main.js文件。

manifest.json文件：负责管理打包的一些配置，指定应用名称，图标，权限等。

pages.json文件：页面路由，负责设置整个项目的页面(pages)存放路径以及窗口外观(globalStyle)的。

uni.scss文件：配置一些颜色什么的。

3.利用HbuilderX初始化项目

点击HbuilderX菜单栏文件>项目>新建

 

选择uni-app,填写项目名称，项目创建的目录

4.pages的页面配置：

5.text组件 的基本使用

uniapp的一些组件，就像HTML中的div，p，span等标签作用一样，用于搭建页面的基本结构。可以说是组件是视图层的基本组成单元。

 

 

6.scss的使用

 

7.uni-app中的样式

rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

支持基本常用的选择器class、id、element等

在 uni-app 中不能使用 * 选择器。

page 相当于 body 节点

定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

1.字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；

2.字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；

3.字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

8.在学习当中出现的问题

 

跨域问题

 

有 input 框的页面，手机端 input 被键盘挡住等各种情况

 

总结：以上就是这段时间来学习uni-app的总结，学了以上的知识，再结合具体的项目，或者有朋友分享完整的项目，便可以上手参与到实际开发过程中了，希望能帮到您，有疑问欢迎来咨询。