uniapp基础知识点掌握以及面试题整理

发布时间：2023-02-16 13:04:49 所属栏目：Java 来源：互联网

导读：uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,下面这篇文章主要给大家介绍了关于uniapp基础知识点掌握以及面试题整理的相关资料,需要的朋友可以参考下 1.uniapp优缺点优点: a. 一套代码可以生成多端 b. 学习成本低,语法是vue的,组件

　　uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,下面这篇文章主要给大家介绍了关于uniapp基础知识点掌握以及面试题整理的相关资料,需要的朋友可以参考下

　　1.uniapp优缺点
　　    优点:
　　    a. 一套代码可以生成多端
　　    b. 学习成本低,语法是vue的,组件是小程序的
　　    c. 拓展能力强
　　    d. 使用HBuilderX开发,支持vue语法
　　    e. 突破了系统对H5调用原生能力的限制
　　    缺点:
　　    a. 问世时间短,很多地方不完善
　　    b. 社区不大
　　    c. 官方对问题的反馈不及时
　　    d. 在Android平台上比微信小程序和iOS差
　　    e. 文件命名受限

　　2. uniapp的配置文件、入口文件、主组件、页面管理部分

　　 pages.json
　　配置文件，全局页面路径配置，应用的状态栏、导航条、标题、窗口背景色设置等
　　main.js
　　入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。如果开发者坚持使用vue-router，可以在插件市场找到转换插件。
　　App.vue
　　是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。
　　pages
　　页面管理部分用于存放页面或者组件
　　manifest.json
　　文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
　　package.json
　　配置扩展，详情内容请见官网描述package.json概述

　　3.基本开发流程
　　新建一个工程项目，如下所示，我们可以直接使用一些模板进行开发，这些模板会有一些基础的页面和配置，能够让我们减少前期的配置直接上手开发

　　4. 安装插件
　　我们可以从工具里面—>插件安装—>安装新插件—>前往插件市场安装来安装自己所需要的插件和组件，能够快速提高开发效率

　　5.tab页面及二级页面路径配置
　　pages.json

　　pages数组中第一项表示应用启动页，参考官网：uni-app官网

　　{
　　    //页面路径配置,未设置root则path默认完整路径
　　    "pages": [
　　        {
　　            "path": "pages/index/index",
　　            "style": {
　　                "navigationBarTitleText": "首页",
　　                "enablePullDownRefresh": true
　　            }
　　        }
　　    ],
　　    //二级页面，设置了root根文件路径，则path可以简写
　　    "subPackages": [{
　　        "root": "pages/test-sub",
　　        "pages": [
　　            {
　　                "path": "login/index",
　　                "style": {
　　                    "navigationBarTitleText": "登录"
　　                }
　　            }
　　        ]
　　    }],
　　    //全局样式配置
　　    "globalStyle": {
　　        "navigationBarTextStyle": "black",
　　        "navigationBarTitleText": "uni-app",
　　        "navigationBarBackgroundColor": "#F8F8F8",
　　        "backgroundColor": "#F8F8F8"
　　    },
　　    "tabBar": {
　　        //tab样式和选中后效果
　　        "color": "#7A7E83",
　　        "selectedColor": "#2BD3DE",
　　        "borderStyle": "black",
　　        "backgroundColor": "#F8F8F8",
　　        //tab页面配置，包括图标路径，tab名称、路径
　　        "list": [{
　　                "pagePath": "pages/index/index",
　　                "iconPath": "static/农场_24种子.png",
　　                "selectedIconPath": "static/农场_31花草.png",
　　                "text": "首页"
　　            },
　　            {
　　                "pagePath": "pages/user/index",
　　                "iconPath": "static/农场_36稻草人.png",
　　                "selectedIconPath": "static/农场_28蜜蜂.png",
　　                "text": "个人中心"
　　            },
　　            {
　　                "pagePath": "pages/test/index",
　　                "iconPath": "static/农场_36稻草人.png",
　　                "selectedIconPath": "static/农场_28蜜蜂.png",
　　                "text": "测试页面"
　　            }
　　        ]
　　    }
　　}

　　6.页面设计开发
　　基础设置完成后就可以直接在页面上开发了，uniapp的语法承袭vue，熟悉vue的同学可以快速的上手

　　7.vue , 微信小程序 , uni-app属性的绑定
　　vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";

（编辑：十堰站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/6

尾页