html 小程序开发 搭建,云开发(小程序端,web端+博客搭建部署)
小程序端
云函数
const cloud = require("wx-server-sdk");
cloud.init({
env: "xly-ba27v",
});
const db = cloud.database();
const todo = db.collection("test");
// 云函数入口函数
exports.main = async (event, context) => {
// console.lo
const wxContext = cloud.getWXContext();
return await todo
.add({
data: {
todo: event.todo,
_openid: wxContext.OPENID,
other: "云函数端数据",
},
})
.then((res) => {
console.log(res);
});
};
小程序端调用云函数
data: {
todo:""
},
primary:function(){
wx.cloud.callFunction({
name:"test",
data:{
todo:"吃饭"
}
}).then(res => {
// this.setData({todo:res.data})
console.log(res)
})
},
//获取临时文件路径
chooseMessageFile(){
const files = this.data.files
wx.chooseMessageFile({
count: 2,
success: res => {
console.log('选择文件之后的res',res)
let tempFilePaths = res.tempFiles
this.setData({ tempFilePaths: tempFilePaths })
console.log('选择文件之后的files', tempFilePaths)
}
})
},
// 将临时文件上传到云存储指定云文件里
uploadFiles(e) {
const filePath = this.data.tempFilePaths[0].path
const cloudPath = `cloudbase/${Date.now()}-${Math.floor(Math.random(0, 1) * 1000)}` + filePath.match(/\.[^.]+?$/)
wx.cloud.uploadFile({
cloudPath,filePath
}).then(res => {
console.log(res)
}).catch(error => {
console.log("文件上传失败",error)
})
},
小程序端视图层
primary
src="cloud://xly-ba27v.786c-xly-ba27v-1301545001/1584691592129-64.png"
>
选择文件
上传文件
web 端
环境准备
登陆腾讯云新建环境,使用免费版
云函数
安装 cli 工具npm i -g @cloudbase/cli
cloudbase 命令可以简写成 tcb
查看版本tcb -v
尝试登陆tcb login
初始化一个项目mkdir my-cloudbase-app,tcb init
部署函数tcb functions:deploy app
查看函数列表tcb functions:list
下载云函数cloudbase functions:download [destPath]
默认情况下,函数代码会下载到 functionRoot 下,以函数名称作为存储文件夹,你可以指定函数存放的文件夹地址,函数的所有代码文件会直接下载到指定的文件夹中
查看函数详情cloudbase functions:detail app,查看所有详情cloudbase functions:detail
删除函数cloudbase functions:delete app,删除所有cloudbase functions:delete
赋值函数cloudbase functions:copy app app2
更新函数代码cloudbase functions:code:update app
functions:code:update 命令和 functions:deploy 命令的主要区别是:functions:code:update 命令只会更新函数的代码以及执行入口,不会修改函数的其他配置,而 functions:deploy 命令则会修改函数的代码、配置
云存储
上传文件cloudbase storage:upload localPath cloudPath,当 CLI 检测到 localPath 为文件夹时,会自动上传文件内的所有文件。
下载文件cloudbase storage:download cloudPath localPath,下载文件夹cloudbase storage:download cloudPath localPath --dir
查看日志cloudbase functions:log app
删除文件cloudbase storage:delete cloudPath,删除文件夹cloudbase storage:delete cloudPath --dir
文件列表cloudbase storage:list cloudPath
获取文件访问链接cloudbase storage:url cloudPath
获取文件详细信息cloudbase storage:detail cloudPath
查看权限cloudbase storage:get-acl,设置权限cloudbase storage:set-acl
调用云函数
需要起一个服务在根目录下npx server或http-server
Document
const app = tcb.init({
env: "web-d68cb1",
});
app
.auth()
.signInAnonymously()
.then(() => {
alert("登录云开发成功!");
});
app
.callFunction({
name: "test",
})
.then((res) => {
console.log("hahah", res);
});
微信公众号登录
const auth = app.auth();
async function login() {
// 1. 建议登录前先判断当前是否已经登录
const loginState = await auth.getLoginState();
if (!loginState) {
// 2. 调用微信登录API
await auth
.weixinAuthProvider({
appid: "xxx", // 微信公众号的Appid
scope: "xxx",
})
.signIn();
}
}
数据库操作
const db = app.database();
const collection = db.collection("file");
collection
.add({
name: "Ben",
})
.then((res) => {
console.log(res);
});
文件操作
app.getTempFileURL({
fileList: [
"cloud://web-d68cb1.7765-web-d68cb1-1301545895/static/img/timg8.gif",
],
}).then((res) => {
res.fileList.forEach((el) => {
if (el.code === "SUCCESS") {
console.log(el.tempFileURL);
return el.tempFileURL;
} else {
//获取下载链接失败
}
});
});
部署 hugo
在 github 下载成品https://github.com/gohugoio/hugo/releases,mac 下使用可brew install hugo
生成一个博客站点hugo new site myblog
https://themes.gohugo.io/hugo-theme-m10c/
下载主题git clone https://github.com/vaga/hugo-theme-m10c.git m10c
在 config.toml 文件中添加以下行:
baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "m10c"
本地启动hugo server -D
新建一篇文章hugo new post/blog.md
部署到云端
hugo --baseUrl="https://web-d68cb1.tcloudbaseapp.com/" --buildDrafts
cloudbase hosting:deploy ./public -e web-d68cb1
flutter 端
html 小程序开发 搭建,云开发(小程序端,web端+博客搭建部署)相关推荐
- wordpress博客搭建-保姆教程
前言: 如今这个年代,估计每个人都有属于自己的服务器,放着也是放着,为什么不用来搭建一个博客呢. Wordpress作为目前流行的动态博客,至今已经发展了数十年,用wordpress建站简直是不能太简 ...
- halo个人博客搭建
halo+云服务器+nginx反向代理实现个人博客搭建 1.云服务器选择 这里直接选用 阿里云云服务器 ECS突发性能型 t6 别家的基本都一样,选用配置差不多的就行. https://develop ...
- 微信小程序---快速上手云开发
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
- 仿京细菜谱微信小程序源码 云开发菜谱微信小程序源码
京细菜谱是一个美食分享网站,提供优质的家常菜谱大全,仿京细菜谱小程序源码为喜欢美食的朋友提供了很多的美食烹饪教程 让您轻松学会做美食.对不同食材和地域的饮食做了不同的分类和详细的做菜方法 分类十分详细 ...
- 微信小程序:uni-app云开发的网盘助手
这是一款uni-app开发的一款网盘小助手小程序源码 该源码主要用于用户输入关键词然后全网抓取百度网盘资源内容 另外呢该小程序还可以免费领取百度网盘七天会员,所以用来引流特别的不错 该小程序还有外卖系 ...
- 【微信小程序开发(云壁纸小程序教程)】
微信小程序开发(云壁纸小程序教程) 1. 准备 HBuilder X 和 微信开发者工具 2. 进入网站注册小程序 3. 点击发行,这时候就用到微信开发者工具 1. 准备 HBuilder X 和 微 ...
- 微信小程序开发13 云开发:云原生一体化应用开发平台
你好,我是冠宇,从这个模块开始,就由我带着你一起学习. 在开篇词中,俊鹏讲到云开发诞生的背后动力是困扰前端开发者们的一个核心问题:对后端的依赖.那云开发到底怎么去优化和解决这个问题的呢? 这就是我们今 ...
- 微信小程序开发之——云开发初探
一 现象 将微信小程序组件/API/云开发示例导入到小程序开发者工具后,出现如下错误信息,并且工具栏中,没有云开发按钮 VM90 WAService.js:2 cloud init error: Er ...
- 2022全新恶搞放屁小程序源码(云开发)
全新恶搞放屁小程序源码,恶搞类微信小程序源码.免服务器,直接上传即可. 小程序源码下载地址: 2022全新恶搞放屁小程序源码(云开发)-小程序文档类资源-CSDN下载全新恶搞放屁小程序源码,恶搞类微信 ...
- 微信小程序中配置云开发
微信小程序中配置云开发 一.配置 app.js 文件 onLaunch() {wx.cloud.init({env: 'cloud1-xxxxxxxxxx', // 云开发 环境IDtraceUser ...
最新文章
- Ubuntu18.04中pyhton默认版本从2.7换为3.x
- C语言 · 身份证号码升级
- [MySQL] MySQL的自己主动化安装部署
- thinkphp路由配置 php7.0,thinkphp3.2 路由设置方法
- JVM从入门到精通(三):热加载的实现原理,Java内存模型,缓存行,指令重排,合并写技术等
- 未找到要求的 from 关键字_性能优化|这恐怕是解释Explain关键字最全的一篇文章
- [C#基础]c#中的BeginInvoke和EndEndInvoke
- 计算机一级上机考试试题题库,2016年计算机一级上机考试题库
- python异常值处理实例_利用Python进行异常值分析实例代码
- mysql常用函数参考
- group by的用法原理
- MTK 驱动开发(36)---低功耗基础知识
- 我的k8s随笔:命令实践
- 如何创建一个最小的串口、TTY设备包括虚拟控制台,串口以及伪终端设备的驱动程序
- webpack5不要再用url-loader了
- 川大NLP博士生被华为以200万年薪录用!分享以下科研及论文写作经验
- CPaintDC 、CWindowDC、 CClientDC、cMemDC、 CDC
- Win7 64位系统安装 Windows XP 虚拟机
- 【AD】altium designer绘制原理图使用教程
- 基于AT89C52单片机简易篮球计分器设计
热门文章
- 腾讯海量数据处理平台TDW
- 京杭大运河的地形特征及各段水流流向
- c# sbyte string转_C# 学习之路(八)
- 无安装费、无服务费、无管理费的“三无”门诊管理软件
- 桌面日历和手机同步步骤(desktopcal)
- x64 编译 静态链接_C++静态库与动态库
- .NET/C#大型项目研发必备(7)--DataAccess数据库访问技术
- sw如何按比例缩放零件_SOLIDWORKS装配体及零件的整体缩放
- 第一次作业——游戏分类与热点探索
- 求职行测题和性格测试题