uni

您所在的位置：网站首页 › 在线js开发工具怎么用 › uni

uni

2024-07-01 23:35| 来源: 网络整理| 查看: 265

一，uni-app 介绍：

官方网页 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

简单说： 1次开发多端运行

二，准备工具

Hbuilderx （开发与编译工具）

微信小程序开发工具（微信小程序预览测试）

安卓模拟器/真机运行app

官方链接在上面，点解下载

三，新建项目 / 认识界面 1，新建项目点击HbuilderX菜单栏文件>项目>新建选择uni-app,填写项目名称，项目创建的目录在这里插入图片描述

2，认识界面

在这里插入图片描述

2.1 介绍项目目录和文件作用 pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。App.vue：是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。main.js：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。uni.scss：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。unpackage：就是打包目录，在这里有各个平台的打包文件pages：所有的页面存放目录static：静态资源目录，例如图片等components：组件存放目录 3，全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

在这里插入图片描述

注意：

如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功微信开发者工具在设置中安全设置，服务端口开启

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范，详见uni-app 组件规范接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期为兼容多端运行，建议使用flex布局进行开发四，运行多端 1，H5

在这里插入图片描述

2，小程序 01 打开开发工具的服务端口

在这里插入图片描述

02 HBuilderx配置微信开发工具的地址

在这里插入图片描述

03 配置微信小程序id

在这里插入图片描述

04 运行到微信小程序在这里插入图片描述

3，App 01 打开模拟器或者手机

在这里插入图片描述

02 配置模拟器的端口

在这里插入图片描述

各模拟器端口号：

夜神模拟器端口号：62001

海马模拟器端口号：26944

逍遥模拟器端口号：21503

MuMu模拟器端口号：7555

天天模拟器端口号：6555

03 运行到模拟器

在这里插入图片描述

4，注意项 hbuilder可能需要下载对应的插件运行到安卓模拟器，有视图差别运行可以需要一定的诗句五，语法： 1，模板语法 1.1，文本渲染 {{表达式}} v-text=“表达式” 表达式简单的js运算 {{2+3}} js方法调用 {{title.length}} {{title.split("").reverse().join("")}} 3元运算符 {{title.length>15?'长度很长':'字少事大'}} v-html 富文本 1.2，条件渲染 v-if v-else-if v-else v-show 通过三元运算符 1.3，列表选项

字符串，数字，列表，对象都可以遍历

一定要保证兄弟元素间的key值是唯一

1.4，属性绑定 1.5，表单绑定

默认

:value="单向绑定"

input

v-model=“双向绑定” @change=“$event.detail.value” 事件，事件的值$event.detail.value 1.6，事件 1.6.1，事件绑定：

【本文地址】

uni

uni

今日新闻

推荐新闻