zoukankan      html  css  js  c++  java
  • 云开发(小程序端,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)
        })
      },
    

    小程序端视图层

    <button type="primary" bindtap="primary">primary</button>
    <image
      src="cloud://xly-ba27v.786c-xly-ba27v-1301545001/1584691592129-64.png"
    ></image>
    
    <form bindsubmit="uploadFiles">
      <button type="primary" bindtap="chooseMessageFile">选择文件</button>
      <button type="primary" formType="submit">上传文件</button>
    </form>
    

    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 <functionName> [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 serverhttp-server

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://imgcache.qq.com/qcloud/tcbjs/1.3.5/tcb.js"></script>
      </head>
      <body>
        <script>
          const app = tcb.init({
            env: "web-d68cb1",
          });
          app
            .auth()
            .signInAnonymously()
            .then(() => {
              alert("登录云开发成功!");
            });
          app
            .callFunction({
              name: "test",
            })
            .then((res) => {
              console.log("hahah", res);
            });
        </script>
      </body>
    </html>
    

    微信公众号登录

    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 端

  • 相关阅读:
    空间统计笔记之三(度量地理分布工具集,Measuring Geographic Distributions)
    空间统计笔记之四(空间关系建模工具集,Modeling Spatial Relationships)
    黑苹果WiFi&蓝牙驱动
    Hackintosh问题集结
    macOS读写NTFS磁盘分区
    Windows10 无法打开此计算机上的组策略对象。你可能没有相应的权限
    电脑C盘容量扩容
    Windows配置定时休眠和唤醒
    macOS Windows添加静态路由
    macOS使用技巧
  • 原文地址:https://www.cnblogs.com/ygjzs/p/12742253.html
Copyright © 2011-2022 走看看