一吻搞定uniApp及关联uniCloud开发

怎么学习UniApp

  • 了解是什么
  • 快速上手
  • 《uni-app官方教程》

是什么

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

需求什么常识储备

  • vue
  • js

快速上手

运用HBuilderX

是什么:HBandroid下载安装uilderX是approve通用的前端开发东西,但为uni-app做了特别强化。

下载链接:

官方IDE下载地址

新建项目

一吻搞定uniApp及相关uniCloud开发

挑选项目

一吻搞定uniApp及相关uniCloud开发

  • 挑选模板,后边假如此根底上开发,最好是挑选默认模板,后边也好加东西
  • 挑选vue版本 ,挑选新的吧,毕竟是新项目,以新为根底
  • 是否启用unicapproachloud ,看姓名应该是webview可以删除吗对应uniapp的服务端,能够根据自己的状况,挑选阿里云或腾讯云测试手机是否被监控
  • 是否上传GitCodwebview可以删除吗e保管渠道(由CSDN供给),建议不选,假如你之前是用GitCode那就选吧

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

一吻搞定uniApp及相关uniCloud开发

点击装置后,即可创立,如下,登录下

一吻搞定uniApp及相关uniCloud开发

注册登录需求邮箱认证

链接

devandroid下载安装.dcloud.net.cn/

一吻搞定uniApp及相关uniCloud开发

登录完成后开端项目生成

一吻搞定uniApp及相关uniCloud开发

项目终究这样

一吻搞定uniApp及相关uniCloud开发

先运转下

第一次运转,或许需求编译,有点慢刚开端,我第一次运转没找到浏览器,点初始化电脑时出现问题未进行更改运转后,先等待一会吧,多点几次就出来测试手机是否被监控了。

一吻搞定uniApp及相关uniCloud开发

装备AppId,这个Apwebview什么意思pId是uniapp的标识

一吻搞定uniApp及相关uniCloud开发

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

一吻搞定uniApp及相关uniCloud开发

项目目录探求

因为我创立项目时挑选uniCloud,所以该项目中生成服务器相关的代码,其他渠道所appointment知,uniapp能够直接androidstudio安装教程调用服务器的代码,不需求单独开发一套服务端api,这个也是关于快速迭代的app,供给了不错的支撑,很方便

├── App.vue 相似Android Applicatiandroid什么意思on,有整个App生命周期

├── indexwebview是什么东西.html 加载main.js

├── main.js 加载 App.vue

├── manifest.json 装备文件

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

│ └── index

│ └── index.vue 主页代码

├── pages.json 页面装备

├── sta初始化电脑tic 寄存图片的地方

│ └── logo.png

├── uni.scss 常用款式

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

│ ├── cloudfunctions 云函数

│ └── databandroid/harmonyosase 数据库

│ └── JQL查询.jql

└─初始化游戏启动器失败─ uni测试手机是否被监控_mo测试抑郁程度的问卷dules 公共模块依赖

├── uni-config-center

│ ├── changelog.md

│ ├── package.json

│ ├── readme.md

│ └── uniCloud

│ └── cloudfunctions

│ └── common

│ └── uni-confandroid什么意思ig-center

│ ├── index.js

│ └── package.json

└── uni-id

├── cwebview什么意思hangelog.md

├── package.json

├── readm测试你适合学心理学吗e.md

└──初始化sdk什么意思 uniCloud

└── cloudfunctions

└── common

└── uni-id

├── LICENSE.md

├── index.js

└── package.json

怎么调试

翻开内置浏览器的控制台的 Soandroid是什么手机牌子urces 栏,能够给 js 打断点调试

一吻搞定uniApp及相关uniCloud开发

一吻搞定uniApp及相关uniCloud开发

一吻搞定uniApp及相关uniCloud开发

测试你的自卑程度上图中,与Andrandroid平板电脑价格oid调试没有什么区别,找到对应代码,打断点,重新加载页面即可调试。

假如是App端的调试,前搬运:关于 App 的调试debug

如图

一吻搞定uniApp及相关uniCloud开发

运用代码块

为提升开发功率,HBappetiteuilderX将 uni-app 常用代码封装成了以 u 最初的代码块中,如图所示:

一吻搞定uniApp及相关uniCloud开发

在 template 标签内输入u,就会有很多提示,能够挑选对应组件,在script标签下输入uShowToappetiteast回车,会生成如下代码:

uni.showToast({
  title: '',
  mask: false,
  duration: 1500
});
Tag代码块支撑如下:
  • uButton
  • uCheckbox
  • uGr初始化是什么意思id:宫格,需引用uni ui
  • uList:列表,需引用uni ui
  • uListMedia
  • uRadio
  • uSwiper
  • ……

几乎各种组Android件不管是内置组件还是uni ui的组件,均android的drawable类已封装为代码块,在HBuilderX的vue代码tewebview可以删除吗mplate区域中敲u,代码帮手会提示一切可见列表。也可在HBuilderX菜单东西-代码块application设置-vue代码块的左边列表查阅一切。

除组件外,其他常用代码块包括:

  • viewfor:生成一段带有v-for循环结构的视图代码块
  • vbase:生成一段基本的vue代码结构
相同还有JS代码块
  • uRequest
  • uGetLocation
  • uShowToast
  • uShowLoading
  • uHideLoading
  • uShowappearanceModal
  • uShow测试工程师ActionSheet
  • uNavigateTo
  • uNaandroid是什么系统vigateBack
  • uRedi初始化游戏启动器失败rectTo
  • uStartPullDownRefresh
  • uStopPullDownRefresh
  • uLogin
  • uShare
  • uPay
  • ……

几乎各种常用js api,均已封装为代码块,在HBuilderX的js代码中敲u,代码帮手会提示一切可见测试英文列表。也可在HBuilderX菜单东西-代码块设置-jswebview2代码块的左边列表查阅一切

vue js 代码块
  • vImport:导入初始化sdk什么意思文件
  • ed:export default
  • vData:输出 data(){return{}}
  • vMethod:输出 methods:{}
  • vComponentappointments:输出 components: {}
其他常用webview47js代码块
  • iff:简略if
  • forr:for循环结构体
  • fori:for循环结构体并包括i
  • funn:函数
  • funa:匿名函数
  • rt:return true
  • clog:输出:”console.log()”
  • clogvar:增强的日志输出,可同时把变量的姓名打印出来
  • varc测试工程师w:输出:”var currentWebview = this.scope.android下载安装page.scope.page.getAppWebview()”
  • ifios:iOS的渠道判别
  • ifAndroid:Androi测试工程师d的渠道判别

预置代码块不满足需求的话,能够自定义代码块,教程参阅

ask.dclappstoreoud.net.cn/article/359…

VUE-CLI命令行

新建项目

文档

怎么运用UniApp开发小程序

相关微信初始化电脑的后果小程序运转

先配小程序AppID,这样在相关小程序运转后,生成的小程序即可带着对应的AppId,便于在小程序开发模拟器中运转查看作用。如图中装备

一吻搞定uniApp及相关uniCloud开发

点击运转

一吻搞定uniApp及相关uniCloud开发

点击如上后会编译生成unpackage目录,在项目的根目录下

发布微信小程序

请求微信小程序AppID,参阅:微信教程

  • 在HBuilderX中顶部菜单顺次点击 “发行” => “小程序-微信”,输入小程序测试抑郁症的20道题称号和appid点击发行即可在 unpackage/distappearance/build/mp-weixin 生成微信小程序项目代码。
    一吻搞定uniApp及相关uniCloud开发
  • 在微信小程序开发者东西中,导入生成的微信小程序项目,测试初始化电脑时出现问题未进行更改项目代码运转正常后,点击“上application传”按钮,之后依照 “提交审阅” => “发布” 小程序标准流程,逐步操appstore作即可,具体查看:微信官初始化失败是怎么解决方教程

uniCloud开发

uniCloud 是 DCloud 联合阿里云、腾讯云,为开发者供给的根据 serverwebview更新less 模式和 js 编程测试工程师的云开发渠道。

uandroid的drawable类niCloud 的 web控制台地址:测试

unicloud.dcloud.net.cn

player.bilibili.com/player.html…

什么是serverless?

  • 真实的

什么是真实的云

  • 没有机器,不用装操作系统、web服务器、数据库等
  • 按需付费
  • 系统主动承载更高并发

快速上手

关于老的uni-app项目,能测试你适合学心理学吗够对项目点右键,菜单中挑选“创立uniapproveCloud云开发环境”如图

一吻搞定uniApp及相关uniCloud开发

uniCloud云开发环境创立成功后,项目根目录下会有一个带有云图标的特别目录,名为“uniCloud”

HBuilderX 3.0目录介绍


┌──uniCloud-aliyun                    云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
|   |——— cloudfunctions               云函数目录
|   |   │───common                    云函数共用模块目录 
|   |   |   └──hello-common           云函数共用模块
|   |   |      │──index.js            共用模块代码
|   |   |      └──package.json        共用模块package.json
|   |   │───uni-clientDB-actions
|   |   │      └──new_action.js       clientDB action代码 
|   |   └───function-name             云函数目录
|   |         │──index.js             云函数代码
|   |         └──package.json         包括云函数的装备信息,如url化、守时设置、内存等内容 
│   └──database                       云数据目录
│         │──validateFunction         数据库扩展校验函数目录
│         │   └──new_validation.js    扩展校验函数代码 
│         │──db_init.json             db_init.json初始化数据库文件,其间不再包括schema 
│         └──xxx.schema.json          数据表xxx的DB Schema 
根目录

相关云服务空间

一吻搞定uniApp及相关uniCloud开发

测试心省略创立进程,创立需求个人认证或公司认证等,认证完了,便能够点改写,开端相关,如下

一吻搞定uniApp及相关uniCloud开发

创立云函初始化电脑的后果

一吻搞定uniApp及相关uniCloud开发

留意:

  • 不同项目运用同一个服务空间时,不行运用同名云函数,能够初始化电脑在uniCloud的web控制台手动删除重名云函数释放函数名。
  • approachHBuilderX创立云webview下载函数时,假如新云函数与服务器上已存在同名云函数,会用新函数覆盖。
  • 单个云函数大小限制为10M(包括node_modules)
  • 云函数内运用commonjs标准,不行运用import、export,参阅:candroid下载ommonjs模块

编写云函数

一吻搞定uniApp及相关uniCloud开发

加入数据库代码

一吻搞定uniApp及相关uniCloud开发

上传云函数

一吻搞定uniApp及相关uniCloud开发

上传完后,看下webview下载渠道如下

一吻搞定uniApp及相关uniCloud开发

运转和调试云函数

一吻搞定uniApp及相关uniCloud开发

其他具体用法见:

运转和approach调试云函数

手机端调用云函数

一吻搞定uniApp及相关uniCloud开发

发表评论

提供最优质的资源集合

立即查看 了解详情