uni-app 学习笔记(一)uni-app入门

前言

参照官网学习,并加入一些自己的注解

一、什么是uni-app

官网介绍:uni-app 是一个使用 Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台
翻译翻译就是:写一套代码就可以在多端运行

二、uni-app快速上手

1、下载HBuilderX

建议下载App开发版,别问,问就是好用 下载地址
uni-app 学习笔记(一)uni-app入门_第1张图片
2、新建项目
uni-app 学习笔记(一)uni-app入门_第2张图片
建哪个都可以自己试一试
uni-app 学习笔记(一)uni-app入门_第3张图片

3、运行调试,边调边试

点击右上角的预览
uni-app 学习笔记(一)uni-app入门_第4张图片
哦可,到这里最简单的uni-app项目就建完了,很简单对吧

三、发布uni-app

这里只说打包成APP,打包成其他的东西需自行配置

1、配置manifest.json

uni-app 学习笔记(一)uni-app入门_第5张图片
如果AppID没有就点击重新获取,按照提示进行注册

2、打包成原生APP

uni-app 学习笔记(一)uni-app入门_第6张图片
勾选以下选项,并按照提示填写相应内容,如果提示安装插件则等待安装
uni-app 学习笔记(一)uni-app入门_第7张图片

3、体验app

打包完成后会出现如下文件,apk里面的就是打包后的安装包
uni-app 学习笔记(一)uni-app入门_第8张图片
根据目录找到该文件,并将该apk发送到手机上
在这里插入图片描述
效果如下
uni-app 学习笔记(一)uni-app入门_第9张图片
uni-app 学习笔记(一)uni-app入门_第10张图片

你可能感兴趣的:(uni-app,HBuilderX,uni-app)