一吻搞定uniApp及关联uniCloud开发(一)

简介: 一吻搞定uniApp及关联uniCloud开发

如何学习UniApp


是什么


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

需要什么知识储备


  • vue
  • js

快速上手


使用HBuilderX


是什么:HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

下载链接:

官方IDE下载地址

新建项目

image.png

选择项目

image.png

  • 选择模板,后面如果此基础上开发,最好是选择默认模板,后面也好加东西
  • 选择vue版本 ,选择新的吧,毕竟是新项目,以新为基础
  • 是否启用unicloud ,看名字应该是对应uniapp的服务端,可以根据自己的情况,选择阿里云或腾讯云
  • 是否上传GitCode托管平台(由CSDN提供),建议不选,如果你之前是用GitCode那就选吧

下一步,如下提示,点击安装即可

image.png

点击安装后,即可创建,如下,登录下

image.png

注册登录需要邮箱认证

链接

dev.dcloud.net.cn/

image.png

登录完成后开始项目生成

image.png

项目最终这样

image.png

先运行下

第一次运行,可能需要编译,有点慢刚开始,我第一次运行没找到浏览器,点运行后,先等待一会吧,多点几次就出来了。

image.png

配置AppId,这个AppId是uniapp的标识image.png

解决办法也很简单,点击如下图所示即可

image.png

项目目录探究

由于我创建项目时选择uniCloud,所以该项目中生成服务器相关的代码,其他渠道所知,uniapp可以直接调用服务器的代码,不需要单独开发一套服务端api,这个也是对于快速迭代的app,提供了不错的支持,很方便

├── App.vue 类似Android Application,有整个App生命周期

├── index.html 加载main.js

├── main.js 加载 App.vue

├── manifest.json 配置文件

├── pages 存放页面代码的地方

│ └── index

│ └── index.vue 首页代码

├── pages.json 页面配置

├── static 存放图片的地方

│ └── logo.png

├── uni.scss 常用样式

├── uniCloud-aliyun 关联阿里云服务

│ ├── cloudfunctions 云函数

│ └── database 数据库

│ └── JQL查询.jql

└── uni_modules 公共模块依赖

├── uni-config-center

│ ├── changelog.md

│ ├── package.json

│ ├── readme.md

│ └── uniCloud

│ └── cloudfunctions

│ └── common

│ └── uni-config-center

│ ├── index.js

│ └── package.json

└── uni-id

├── changelog.md

├── package.json

├── readme.md

└── uniCloud

└── cloudfunctions

└── common

└── uni-id

├── LICENSE.md

├── index.js

└── package.json

如何调试

打开内置浏览器的控制台的 Sources 栏,可以给 js 打断点调试

image.png

image.png

image.png

如上图中,与Android调试没有什么区别,找到对应代码,打断点,重新加载页面即可调试。

如果是App端的调试,前转移:关于 App 的调试debug

如图

image.png


目录
相关文章
|
9天前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
12 1
|
1月前
|
监控 数据管理 Java
智慧城管源码,基于微服务+java+springboot+vue+uniapp开发的城管综合执法系统源码
智慧城管执法系统利用微服务和Java技术提升城市管理水平,涵盖事件处理、投诉、处罚等功能,包含PC和APP源码。系统支持执法APP,便于领导随时随地审批,具备文书模板、地图定位、法规查询等功能。此外,执法办案系统通过监控视频分析事件,实现案件全程闭环管理,包括组织、案件、信用和执法队伍管理,以及法规库等基础支撑。系统旨在优化流程,提高数据管理和效率。
智慧城管源码,基于微服务+java+springboot+vue+uniapp开发的城管综合执法系统源码
|
8天前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
28 0
|
8天前
|
前端开发
uniapp 实战 -- 创建 uni-admin 项目,部署到 uniCloud 前端网页托管(免费云空间)
uniapp 实战 -- 创建 uni-admin 项目,部署到 uniCloud 前端网页托管(免费云空间)
7 0
|
8天前
|
小程序 开发者
uniapp 获取微信的 openid(借助 uniCloud)
uniapp 获取微信的 openid(借助 uniCloud)
18 0
|
8天前
uniapp 安装插件 uView (多平台快速开发的UI框架)
uniapp 安装插件 uView (多平台快速开发的UI框架)
9 0
|
1月前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
43 8
|
11天前
|
小程序
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
13 0
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
18 1
|
1月前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
23 0