uni |
您所在的位置:网站首页 › 安卓软件开发前端是什么意思 › uni |
一,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,列表选项字符串,数字,列表,对象都可以遍历 {{index+1}} {{item}}一定要保证兄弟元素间的key值是唯一 1.4, 属性绑定 1.5,表单绑定默认 :value="单向绑定"input v-model=“双向绑定” @change=“$event.detail.value” 事件,事件的值$event.detail.value 1.6,事件 1.6.1,事件绑定: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |