uni-app 介绍

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。
适用平台：Android、iOS、微信小程序。实现了一套代码，同时发布到Android、iOS、微信小程序。
官方：https://uniapp.dcloud.io/

开发

开发工具

（1）HBuilderX
下载地址：http://www.dcloud.io/hbuilderx.html
（2）微信开发者工具
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

HBuilderX模拟器连接
夜神模拟器下载地址：https://www.yeshen.com/
（1）打开夜神模拟器
（2）找到模拟器安装目录，执行以下命令

nox_adb connect 127.0.0.1:62001
nox_adb devices

（3）找到hbuilder的adb.exe路径

（4）设置端口号

（5）选择项目运行-模拟器

框架介绍

官方：https://uniapp.dcloud.io/frame

目录结构

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

生命周期

参考官方：https://uniapp.dcloud.io/frame?id=应用生命周期

路由

参考官方：https://uniapp.dcloud.io/frame?id=路由

页面样式与布局

参考官方：https://uniapp.dcloud.io/frame?id=页面样式与布局

配置

pages.json

参考官方：https://uniapp.dcloud.io/collocation/pages

manifest.json

参考官方：https://uniapp.dcloud.io/collocation/manifest

组件、接口

参考官方：
https://uniapp.dcloud.io/component/README
https://uniapp.dcloud.io/api/README
参考官方提供示例模板

全局变量、方法

（1）定义
在App.vue的script标签中定义，如：

global.root = '全局的值';
global.isAuth = function(){return false;
}

（2）使用

在需要使用的页面中使用
变量：root
方法：isAuth()

uniapp开发app相关推荐

uniapp开发app中配置高德地图定位流程
在使用uniapp开发app过程中,如何使用高德地图进行定位高德地图开放平台账号申请进入高德地图开放平台,注册并登陆开发者账号,完成之后点击进入控制台主页在应用管理中点击创建新应用输入并选择你 ...
uniapp开发APP之真机调试
uniapp开发APP之登录授权,获取用户基础信息一:华为手机实时调试APP代码基座流程 1.打开手机的开发者模式,允许USB调试,手机操作流程,进入设置-关于手机,长按版本号(开启开发模式),然后 ...
uni-app 开发App 口令弹窗
我们用uni-app开发APP 电商类总有口令弹窗的需求首先我们写弹窗首先就要想到uni-popup 写弹窗非常方便 <uni-popup ref="popup" roun ...
uniapp开发APP 客服链接
uniapp开发APP嵌套第三方(米多客)客服链接,遇到了无法返回的问题米多客的客服也回复很及时,发了一种解决方法详细描述问题 (记不清在哪看到一句话: 详细的描述出遇到的问题,问题就解决一大半了 ...
uniapp 开发APP 安卓手机中在使用nvue时候 border的dashed和radius可能会有冲突的解决办法
uniapp 开发APP 安卓手机中在使用nvue时候 border的dashed和radius可能会有冲突的解决办法在开发中发现如果同时给了圆角和虚线虚线属性会有问题分别设置圆角四个角 ...
uniapp开发App从开发到上架全过程(三)-上架
当我们的APP开发完毕,最终交付的时候,必然要经历的一个环节,就是APP上架,国内APP上架一般为IOS端appstore上架,安卓端应用商店比较多,最常见的应用商店有华为应用商店.小米应用商店.OP ...
uni-app 开发app 打包后的尺寸与使用hbuilderx预览时不符
uni-app 开发app 打包后的尺寸与使用hbuilderx预览时不符 uni-app rpx 比例失调 uni-app 开发app 横屏或者屏幕尺寸过大时样式错乱 uni-app 有解决方案 ...
uniapp开发app——nvue
Nvue是一个基于weex改进的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流畅,但是缺点也很明显,没有足够的api能力,语法限制太大,所以nvue适用于特定场景(需要高性能的区域 ...
uniapp开发app过程中集成友盟统计
uniapp在开发app过程中,需要集成友盟统计,可参考以下流程进行配置友盟统计官网注册并获取appkey 单独创建安卓跟ios的应用,获取到appkey(这里以安卓为例) 配置manifest.j ...
使用uniapp开发APP时的调试/安卓打包等
一.调试 1.先用数据线连接电脑和手机,选择"文件传输", 2.打开开发者模式,华为手机举列-->设置-->关于手机-->版本号,多次连续点击"版本号& ...

uniapp开发app