クラウド開発（小規模なプログラムエンド、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>

ウェブ側

環境の準備

Tencent Cloudの新しい環境にログインして無料版を使用する

クラウド機能

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 serverまたはhttp-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>

WeChatパブリックアカウントログイン

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をデプロイする

完成した製品をhttps://github.com/gohugoio/hugo/releasesMacで入手可能なgithub からダウンロードします。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