您现在的位置是:首页 > Javascript
当前栏目
uniCloud使用
2023-03-31 10:42:29 时间
uni-app
是是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
1 创建uni-app项目
在 HBuilder
选择文件,新建(如果提示需要安装插件,按照提示安装即可,稍后会要求登陆,如果没有 HBuilder
账户,可以根据提示去注册):
2 创建云服务空间
在 uniCloud
目录上单击右键,选择打开 uniCloud Web 控制台
,根据提示创建云服务空间:
3 关联云服务空间
在 uniCloud
目录上单击右键,选择 关联云服务空间或项目
,选择刚刚创建好的云服务空间:
4 新建云函数
在 uniCloud/cloudfunctions
目录上单击右键,选择新建云函数:
编辑云函数内容如下:
'use strict';
exports.main = async (event, context) => {
return "hello uni-app!"
};
5 本地运行云函数
CTRL+R,选择 本地运行云函数
(如果提示要安装插件,根据提示要求安装即可,如果提示参数不正确,可以点击manifest.json,看是否有appid,如果没有,那就重新获取下appid):
6 上传至云端并运行
在 uniCloud/cloudfunctions/test
目录上单击右键,选择上传并运行:
可以在web控制台查看上传的云函数:
修改 pages/index/index.vue
:
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
uniCloud.callFunction({
name:"test",
success: (e) => {
this.title = e
}
})
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
运行到内置浏览器(如果提示要安装插件,按照提示安装即可):
uni.callFunction
的好处:
- 更安全,黑客攻击都找不到URL入口。
- 无需URL,即无需域名,如果是只做APP和小程序,也就无需购买和备案域名。
- 自带
uni-id
的token。
文章作者:GentleTK
原文链接:https://gentletk.gitee.io/uniCloud使用
相关文章
- J2EE之普通类载入web资源文件的方法
- 你在元宇宙“吃鸡”,我在Web3.0投机,我们都有光明的未来
- 为了生成唯一id,React18专门引入了新Hook:useId
- JS中所有对象隐式转换都是true?除了他...
- 用几行原生JS就可以实现丝滑的元素过渡效果!
- 使用 Rust 编写更快的 React 组件
- 六种方式,教你在SpringBoot初始化时搞点事情!
- C++使用Nginx搭建WEB程序
- Node.js 2021年开发者报告解读:健康稳步的发展中
- 因为没有这个按钮,谷歌、脸书被罚15亿,限期三个月改正
- 探索 ebpf 在 Node.js 中的应用
- 这30个超级工具!前端开发很喜欢
- 中文域名对建设网站有什么影响?中文域名有什么优点?
- MyBatis 整合spring boot
- 《手把手教你》系列技巧篇(四十五)-java+ selenium自动化测试-web页面定位toast-上篇(详解教程)
- 亚马逊将关闭其 Web 排名网站 Alexa.com
- EasyCVR开启接口鉴权后网址实现无密码登录
- css动画之@keyframes
- 【Rust日报】2021-12-01 Hubris - 一个用于嵌入计算机系统的小型开源操作系统
- PHP开发 MAC 自带apache从php7切换到php5