姚红 發表於 2021-12-21 10:06:00

uni-app + Cloudbase——uni-app 项目中如何使用腾讯云开发后端服务

<h2 id="1-基本介绍">1 基本介绍</h2>
<p>uni-app 是一个基于 Vue.js 的跨端开发框架，一套代码可以发布到 App、小程序、Web 等不同平台</p>
<p>腾讯云开发平台 Cloudbase 提供的 <code>@cloudbase/js-sdk</code> 可以让开发者在 Web 端（例如 PC Web 页面、微信公众平台 H5 等）使用 JavaScript 访问 Cloudbase 服务和资源。</p>
<p>但是 <code>@cloudbase/js-sdk</code> 只支持 Web（浏览器环境）的开发，不兼容其他类 Web 平台（比如小程序）。因为这些平台在网络请求、本地存储、平台标识等特性上与浏览器环境有明显差异。</p>
<p><code>@cloudbase/js-sdk</code> 不认识这些差异，比如<code>@cloudbase/js-sdk</code>不知道这些平台是怎么发送网络请求的，因此我们不能在开发类 Web 应用时直接使用<code>@cloudbase/js-sdk</code>。</p>
<p>针对这些差异，<code>@cloudbase/js-sdk</code>提供了一套完整的适配扩展方案，遵循此方案规范开发对应平台的适配器，就可以实现平台的兼容性</p>
<p>对于 uni-app，不同于浏览器，它基于 ECMAScript 扩展了独有的 uni 对象，它也不能直接使用<code>@cloudbase/js-sdk</code>，因为它在网络请求、本地存储等特性上和浏览器环境也存在明显差异</p>
<p>如果想让 uni-app 开发的小程序和 PC Web 应用使用同一套云开发后端服务，就需要开发针对 uni-app 的适配器</p>
<h2 id="2-适配器">2 适配器</h2>
<p>开发适配器之前需要安装官方提供的接口声明模块<code>@cloudbase/adapter-interface</code></p>
<pre><code class="language-sh"># npm
npm i @cloudbase/adapter-interface
# yarn
yarn add @cloudbase/adapter-interface
</code></pre>
<p>适配器模块需要导出一个<code>adapter</code>对象：</p>
<pre><code class="language-js">const adapter = {
genAdapter,
isMatch,
// runtime标记平台唯一性
runtime: '平台名称'
};

export adapter;
export default adapter;
</code></pre>
<p>必须包含以下三个字段：</p>
<ul>
<li><code>runtime</code>: <code>string</code>，平台的名称，用于标记平台唯一性；</li>
<li><code>isMatch</code>: <code>Function</code>，判断当前运行环境是否为平台，返回<code>boolean</code>值；</li>
<li><code>genAdapter</code>: <code>Function</code>，创建<code>adapter</code>实体。</li>
</ul>
<h3 id="runtime">runtime</h3>
<p><code>runtime</code>用于标记平台的唯一性</p>
<h3 id="ismatch">isMatch</h3>
<p><code>isMatch</code>函数用于判断当前运行环境是否与适配器匹配，通常是通过判断平台特有的一些全局变量、API 等。</p>
<p>我们可以通过 uni 对象来判断是否为 uni-app</p>
<pre><code class="language-js">function isMatch() {
    return uni ? true : false
}
</code></pre>
<h3 id="genadapter">genAdapter</h3>
<p><code>genAdapter</code>函数返回适配器的实体对象，结构如下：</p>
<pre><code class="language-typescript">interface SDKAdapterInterface {
// 全局根变量，浏览器环境为window
root: any;
// WebSocket类
wsClass: WebSocketContructor;
// request类
reqClass: SDKRequestConstructor;
// 无localstorage时persistence=local降级为none
localStorage?: StorageInterface;
// 无sessionStorage时persistence=session降级为none
sessionStorage?: StorageInterface;
// storage模式首选，优先级高于persistence
primaryStorage?: StorageType;
// 获取平台唯一应用标识的api
getAppSign?(): string;
}
</code></pre>
<p>我们只要使用 uni-app 提供的方法来实现指定的接口即可，示例：</p>
<pre><code class="language-typescript">// Request类为平台特有的网络请求，必须实现post/upload/download三个public接口
export class UniRequest extends AbstractSDKRequest {
// 实现post接口
public post(options: IRequestOptions) {
    const { url, data, headers } = options
    return new Promise((resolve, reject) =&gt; {
      try {
      uni.request({
          url,
          data,
          header: headers,
          method: 'POST',
          success: (res) =&gt; {
            resolve(res)
          },
          fail: (err) =&gt; {
            reject(err)
          }
      })
      } catch (error) {
      reject(error)
      }
    });
}
// 实现upload接口
public upload(options: IUploadRequestOptions) {
    const { url, file, name } = options
    return new Promise((resolve, reject) =&gt; {
      try {
      uni.uploadFile({
          url,
          filePath: file,
          name,
          success: (res) =&gt; {
            resolve(res)
          },
          fail: (err) =&gt; {
            reject(err)
          }
      })
      } catch (error) {
      reject(error)
      }
    });
}
// 实现download接口
public download(options: IRequestOptions) {
    const { url } = options
    return new Promise((resolve, reject) =&gt; {
      try {
      uni.downloadFile({
          url,
          success: (res) =&gt; {
            resolve(res)
          },
          fail: (err) =&gt; {
            reject(err)
          }
      })
      } catch (error) {
      reject(error)
      }
    });
}
}
// Storage为平台特有的本地存储，必须实现setItem/getItem/removeItem/clear四个接口
export const Storage: StorageInterface = {
setItem(key: string, value: any) {
    uni.setStorage({
      key,
      data: value,
      success: (res) =&gt; {
      console.log(res);
      }
    })
},
getItem(key: string): any {
    return uni.getStorageSync(key)
},
removeItem(key: string) {
    uni.removeStorage({
      key,
      success: (res) =&gt; {
      res
      }
    })
},
clear() {
    uni.clearStorage()
}
};
// WebSocket为平台特有的WebSocket，与HTML5标准规范一致
export class WebSocket {
constructor(url: string, options: object = {}) {
    const socketTask: WebSocketInterface = {
      set onopen(cb) {
      // ...
      },
      set onmessage(cb) {
      // ...
      },
      set onclose(cb) {
      // ...
      },
      set onerror(cb) {
      // ...
      },
      send: (data) =&gt; {
      // ...
      },
      close: (code?: number, reason?: string) =&gt; {
      // ...
      },
      get readyState() {
      // ...
      return readyState;
      },
      CONNECTING: 0,
      OPEN: 1,
      CLOSING: 2,
      CLOSED: 3
    };
    return socketTask;
}
}

// genAdapter函数创建adapter实体
function genAdapter() {
const adapter: SDKAdapterInterface = {
    // root对象为全局根对象，没有则填空对象{}
    root: {},
    reqClass: UniRequest,
    wsClass: WebSocket as WebSocketContructor,
    localStorage: Storage,
    // 首先缓存存放策略，建议始终保持localstorage
    primaryStorage: StorageType.local,
    // sessionStorage为可选项，如果平台不支持可不填
    sessionStorage: sessionStorage
};
return adapter;
}
</code></pre>
<p>此处未实现 WebSocket ，若有需要可按需实现</p>
<h2 id="3-接入流程">3 接入流程</h2>
<p>现在我们有了适配器，就可以愉快地在 uni-app 项目中使用 Cloudbase 了</p>
<h3 id="第-1-步安装并引入适配器">第 1 步：安装并引入适配器</h3>
<p>安装 @cloudbase/js-sdk</p>
<pre><code class="language-sh"># 安装 @cloudbase/js-sdk
npm i @cloudbase/js-sdk
</code></pre>
<p>在业务代码中引入适配器（这里我将适配器放在 utils 目录下）</p>
<pre><code class="language-js">import cloudbase from "@cloudbase/js-sdk";
import adapter from '@/utils/adapter.ts'

cloudbase.useAdapters(adapter);
</code></pre>
<h3 id="第-2-步配置安全应用来源">第 2 步：配置安全应用来源</h3>
<p>登录云开发 CloudBase 控制台，在安全配置页面中的移动应用安全来源一栏：</p>
<p><img src="https://melonvin-1302080640.cos.ap-shanghai.myqcloud.com/987437125d4123504f8f7647ca3ea9da.png" alt="" loading="lazy"></p>
<p>点击“添加应用”按钮，输入应用标识：比如 uniapp</p>
<p><img src="https://melonvin-1302080640.cos.ap-shanghai.myqcloud.com/Snipaste_2021-12-20_15-36-40.png" alt="" loading="lazy"></p>
<p>添加成功后会创建一个安全应用的信息，如下图所示：</p>
<p><img src="https://melonvin-1302080640.cos.ap-shanghai.myqcloud.com/6542df6800b71b91289bebc29d38de94.png" alt="" loading="lazy"></p>
<h3 id="第-3-步初始化云开发">第 3 步：初始化云开发</h3>
<p>在业务代码中初始化云开发时将第 2 步配置的安全应用信息作为参数传递给 <code>init</code> 方法：</p>
<pre><code class="language-js">import cloudbase from '@cloudbase/js-sdk';
import adapter from '@/utils/adapter.ts'

cloudbase.useAdapters(adapter);

cloudbase.init({
env: '环境ID',
appSign: '应用标识',
appSecret: {
    appAccessKeyId: '应用凭证版本号'
    appAccessKey: '应用凭证'
}
})
</code></pre>
<ul>
<li>环境 ID 可以在环境总览中获取：</li>
</ul>
<p><img src="https://melonvin-1302080640.cos.ap-shanghai.myqcloud.com/Snipaste_2021-12-20_15-42-56.png" alt="" loading="lazy"></p>
<ul>
<li>
<p><code>appSign</code>：<code>string</code>，应用标识，对应移动应用安全来源中“应用标识”一栏（比如uniapp）</p>
</li>
<li>
<p><code>appSecret</code>：<code>Object</code>，应用凭证信息，包括以下字段：</p>
<ul>
<li><code>appAccessKeyId</code>：<code>string</code>，对应移动应用安全来源中“版本”一栏，<strong>同一个应用标识可以最多可以添加两个版本的凭证信息</strong>，以便区分开发和生产环境；</li>
<li><code>appAccessKey</code>：<code>string</code>，对应移动应用安全来源中“操作”一栏点击“获取凭证”之后获取到的信息。</li>
</ul>
</li>
</ul>
<h3 id="第-4-步编写业务代码">第 4 步：编写业务代码</h3>
<p>经过以上准备工作之后便可以编写自身的业务代码。</p>
<p>比如我们要访问云函数 test :</p>
<pre><code class="language-js">const tcb = cloudbase.init({
        env: '环境id',
        appSign: 'uniapp',
        appSecret: {
                appAccessKeyId: '1',
                appAccessKey:'应用凭证'
        }
})

tcb.callFunction({
        name: 'test'
}).then(res =&gt; {
        console.log(res)
})
</code></pre>
<h2 id="4-访问权限问题">4 访问权限问题</h2>
<p>经过上述准备工作以后，我们可能仍然无法访问云函数、云数据库、云存储等资源，控制台出现如下信息：</p>
<p><img src="https://melonvin-1302080640.cos.ap-shanghai.myqcloud.com/Snipaste_2021-12-20_16-03-13.png" alt="" loading="lazy"></p>
<p>这时可以查看访问权限，以<strong>云函数</strong>为例：</p>
<h3 id="41-权限控制">4.1 权限控制</h3>
<p>点击云函数的权限控制按钮</p>
<p><img src="https://melonvin-1302080640.cos.ap-shanghai.myqcloud.com/Snipaste_2021-12-21_08-57-05.png" alt="" loading="lazy"></p>
<p>对云函数访问权限进行配置，比如下面将<code>test</code>权限配置成<code>true</code></p>
<p><img src="https://melonvin-1302080640.cos.ap-shanghai.myqcloud.com/Snipaste_2021-12-21_08-58-02.png" alt="" loading="lazy"></p>
<h3 id="42-登录授权">4.2 登录授权</h3>
<p>打开登录授权中的“未登录”选项，不登录即可访问应用</p>
<p><img src="https://melonvin-1302080640.cos.ap-shanghai.myqcloud.com/Snipaste_2021-12-21_09-12-01.png" alt="" loading="lazy"></p>
<p>现在，就可以愉快地访问了~</p>
<p><img src="https://melonvin-1302080640.cos.ap-shanghai.myqcloud.com/Snipaste_2021-12-21_09-13-18.png" alt="" loading="lazy"></p>
<h2 id="5-源码地址">5 源码地址</h2>
<p>https://github.com/Melonvin/uniapp-cloudbase-demo</p>


</div>
<div id="MySignature" role="contentinfo">
    <p></p><br><br>
来源：https://www.cnblogs.com/bidong/p/15714081.html
頁: [1]
查看完整版本: uni-app + Cloudbase——uni-app 项目中如何使用腾讯云开发后端服务