uni-app基础

源代码 · 2024-9-9 08:19:58

媒介：把握HTML+CSS+JavaScript，相识 Vue.js+原生微信步调更容易上手
一、媒介

uni-app是基于通用的前端技术栈，接纳vue语法+微信小步调api，无额外学习成本。一套代码，多端发布(开发者编写一套代码，可发布到ios、android、H5以及各种小步调等多个平台)。
纵然不跨端，uni-app也是更好的小步调开发框架
利益：淘汰学习成本(个人)，淘汰开发成本(公司)
二、搭建开发情况

1、前期准备：安装编辑器HbuilderX(HBuilderX是通用的前端开发工具，但为了uni-app做了特别强化)+微信开发者工具(开发微信小步调必备，建议下载稳固版)
2、创建项目：安装完成后打开HBuilderX，在窗口栏找到：文件=>新建=>项目

3、运行，在窗口栏找到：运行，然后根据需求运行到对应平台即可
留意：
1、如果运行到微信开发者工具，第一次运行时须要设置小步调ide的相干路径才华运行乐成。（找到微信开发者工具，打开文件地点位置，复制路径）

2、若路径已设置好，第一次运行还报错，可以打开端标语:设置-安全设置-端标语（开启）
三、uni-app焦点知识点：

1、开发规范：页面文件遵照Vue单文件组件（SFC）规范。

2、组件标签靠近小步调规范。

3、接口本领（JS API）靠近微信小步调规范。

接口本领（JS API）靠近微信小步调规范，但须要把前缀wx换成uni，vue开发不可以直接api获取手机原生功能，而uni-app可以直接利用uni前缀的api获取，如获取当前手机的网络范例：

4、数据绑定及变乱处理处罚同Vue.js规范，同时增补了App及页面的生命周期。

5、为兼容多端运行，建议利用flex布局。

uni-app特色：

1、条件编译：

2、App端的Nvue（native vue）开发

Nvue内置了weex的渲染引擎，在Nvue中我们既可以利用weex的组件和api，也可以利用uni-app的组件和api。
3、HTML5+引擎

HTML5+引擎：可以帮助我们在app端直接调用原生插件，含大量的api方法。（只能在App端利用，在H5和微信小步调端不可用。）
4、uni-app中的数据绑定

uni-app中的数据绑定绝大部门与Vue同等
<template>          <view>       <!-- <view
6、组件

uniapp 对比 vue
view ------ div
text    ------ span
image  ------ img
其他标签根本同等，详情检察官网
7、nuiapp中样式以及sass的利用

1、rpx是相应式的px,是一种根据屏幕宽度自顺应的动态单位。一750宽的屏幕为基准，750rpx恰恰为屏幕宽度。屏幕越宽，rpx的现实结果会等比放大。
2、利用@import语句可以导入外联样式表。
3、支持常用的选择器(element、class、id等），留意：uni-app中不能利用通配符选择器*.
4、在App.vue中的样式一样平常为全局样式。
5、uni-app支持利用的字体图标，利用方式与平凡web项目雷同，需留意：
①字体文件小于40kb，uni-app会自动将其转化为base64格式。
②字体文件大于40kb，须要开发者自己转换，否则利用将不见效。
③字体文件的引用路径保举利用~@开头的绝对路径：
@font-face{ font-family:test1-icon;  src:usl('~@/static/iconfont.ttf');}6、scss/sass的利用：工具-插件安装-找到之后直接安装
8、uni-app中的数据绑定/变乱绑定：与vue千篇一律

Vue相干知识
9、uni-app的生命周期

生命周期：一个对象从创建、运行到烧毁的整个过程。
生命周期函数：在生命周期的每个阶段都会陪同着对应函数的触发，这些函数就称为生命周期函数。
uni-app支持如下应用生命周期函数：

uni-app支持的页面生命周期函数：

9、页面跳转

官网详情
uni-app项目中的页面跳转方式

uni-app基础

所属分类: 问答交流

新帖推荐: 30日

推荐作品