借助云开发实现免登陆资源导航小程序

用云开发实现一个资源导航小程序，要实现的功能很简单：全部用户均可以查看和推荐资源，被推荐的资源的相关信息会以清单的方式显示。

主要目的是经过实战，帮助你们快速了解下 小程序开发流程 和 云开发技术，学习更高效的小程序开发方式。

技术选型

首先选择小程序开发技术。开发小程序的过程和开发网站相似，都是要写前端（界面交互）和后端（请求处理逻辑）代码。

前端

前端方面我选择用 Taro 框架 + Taro UI 开发。Taro 是一个基于 React 的跨端开发框架，支持写一套代码，自动生成微信小程序、H五、APP 等应用，再加上框架为不少复杂的功能提供了函数封装，能够大大提高开发效率。而 Taro UI 是基于 Taro 的 UI 库，提供了不少现成的组件，好比图片上传、选择器等，能够知足常见的开发需求。

后端

后端就简单了，传统的方式是使用编程语言提供的后端开发框架，好比 Java 的 SpringBoot、PHP 的 Laravel、Python 的 Django 等，但每每须要本身搭建服务器、数据库、日志、监控、运维等等，对于只会前端或者想要快速开发小程序的同窗来说，简直就是噩梦！

所以我选择更高效便捷的方式，腾讯小程序云开发！

什么是云开发？

小程序云开发是微信团队联合腾讯云推出的专业的小程序开发服务，帮助你们快速开发小程序、小游戏、公众号网页等，而且原生打通微信开放能力。

云开发的优点有哪些呢？

1.开发者无需搭建后端服务器，只需使用平台提供的各项能力（好比云数据库、云存储、音视频、AI 等），便可快速开发业务。

1. 安全易接入：无需管理证书、签名、秘钥，直接调用微信 API 。复用微信私有协议及链路，保证业务安全性。
2. 多端复用：支持环境共享，一个后端环境可开发多个小程序、公众号、网页等，便捷复用业务代码与数据。
3. 不限开发语言和框架：开发者可使用任意语言和框架进行代码开发，构建为容器后，快速将其托管至云开发。
4. 按量计费，成本更低，支持自动扩缩容
5. 扩展能力：支持一键部署静态网站，并能用云 CMS 管理数据内容

其中，最吸引个人就是云开发的高效便捷，不用本身搞服务器、搭数据库，也不用处理和微信对接的复杂逻辑，只须要专一于实现功能自己便可，并且能够直接用云开发 SDK 提供的各类函数，开发效率拉满！

好比查询数据，几行代码搞定！

应用开发

下面来开发小程序，包含初始项目搭建、前端页面开发、接入云开发等步骤。

项目搭建

首先咱们参照 Taro 框架官方文档的快速开始部分，安装 Taro 命令行工具，并初始化一个小程序应用。

注意初始化时会让你选择模板，此处选择云开发便可，Taro 会自动生成包含云开发的示例代码，目录结构以下：

前端开发

咱们总共要建立两个页面，资源列表页和推荐资源页，须要用到的组件有列表、表单、输入框、按钮、图像上传等。

Taro UI 支持以上全部组件，按照 Taro UI 的官方文档接入，复制组件代码到页面中修改便可，很快就能开发出这两个页面。

资源列表页的示例代码以下：

<View className='list'>
  <!-- 列表组件 -->
  <AtList>
    {resourcesView}
  </AtList>
  <!-- 固钉组件，点击跳转至推荐页 -->
  <AtFab className="fab-btn"
         onClick={() => navTo(xx)}>
    <AtIcon value='add'/>
  </AtFab>
</View>

能够打开微信开发者工具查看页面效果：

页面开发完成后，咱们来搭建后端服务，使得用户能够经过界面插入和读取数据。

接入云开发

区别于本身搭建后端服务，使用云开发会更简洁快速，直接在微信开发者工具中点击云开发，开通环境便可，每位用户均可以享有必定数量的免费环境！

在云开发界面中，能够对云数据库、云存储、云函数等资源进行监控和管理。

咱们能够在云数据库中建立一张 资源表，用于读写资源数据。云开发控制台支持可视化的数据库管理，好比记录、索引、数据权限等，很是方便！

每一个环境都有惟一的 id，用于区分，能够在前端引入云开发 SDK，并传入环境 id 来初始化。

前端用 Taro 的话，能够用它封装好的 <span>init</span> 方法：

Taro.cloud.init({
  // 环境 id
  env: 'xx', 
})

而后，就能够在前端 直接调用 云开发提供的操做数据库的接口，好比插入数据、查询数据，不用本身开发后台了！

好比插入数据：

const db = Taro.cloud.database();
// 添加数据到 resource 表
db.collection('resource').add({
  data
}).then(res => {
  // 成功
  return res;
}).catch(err => {
  // 失败
 console.error(err);
});

在推荐资源时须要让用户上传图片，之前咱们须要本身找地儿存放，如今能够在前端 直接调用云存储，几行代码搞定：

// 上传文件
const res = await Taro.cloud.uploadFile({
  cloudPath: '上传到云存储的位置',
  // 要上传图片的本地路径
  filePath: pictureUrl,
})
// 获取图片 id，可下载或直接展现
picture = res.fileID;

能够在云开发控制台管理云存储中的文件、配置权限、缓存等：

若是云开发默认提供的接口不能知足需求，那能够本身写后台接口，做为一个云函数部署到腾讯云上。而后在前端请求便可，和本身开发后端相似。

好比部署一个登陆函数，能够获取用户在小程序中的惟一 id，在控制台中还能看到函数的调用日志、管理权限等。

实现无登录调用

按照上面的流程开发完后，在微信开发者工具中，可以顺利地推荐和展现资源。可是若是将这个小程序上线并分享给其余用户，就会出现权限问题，全部功能都会失效！

这是由于云开发为了保证资源的安全性、灵活控制资源调用权限，制定了安全规则，默认不容许未登陆用户访问。

假如咱们把小程序分享到朋友圈，必需要朋友们登陆才能查看资源列表，那这用户体验就太差了，因此下面咱们要实现无登陆调用。

小程序云开发考虑到了种种场景，所以提供了 未登陆模式。

在未登陆模式中，不存在用户的登陆态，应用场景有：

1.单页模式：小程序/小游戏分享到朋友圈被打开时

1. Web 未登陆模式：没有登陆的 Web 环境中

该模式默认关闭，须要在 “云控制台 - 设置 - 权限设置” 中手动为云环境开启容许未登陆访问。

一旦开启了未登陆模式，客户端（前端）的权限控制 必须使用安全规则，即云函数、数据库和文件存储的访问都必须经过安全规则。

所以，除了在控制台开启容许未登陆访问云环境外，还必须在云数据库、云存储和云函数的权限设置中分别选择安全规则并配置。

安全规则有一套本身的语法，以云数据库为例，选择自定义安全规则，查看本来的规则：

在上述规则中，<span>read</span>、<span>write</span> 分别表明读写权限，<span>doc</span> 表示当前的一条数据，<span>auth</span> 表示当前登陆的用户，表达式为 <span>true</span> 时容许访问，即当前登陆的用户必须是该条数据的建立者才能读写。

未登陆用户访问时，安全规则的 auth 字段为空，若是要容许全部用户读写全部资源，能够直接将表达式值设置为 true：

再修改下云存储的安全规则，原规则以下：

上述规则中，<span>resource</span> 表示一个资源，将表达式改成 true，则容许全部用户读写存储的全部文件！

同理，也要修改云函数的安全规则，能够为不一样云函数设置不一样规则，好比 <span>login</span> 函数容许全部用户访问，而其余函数仅容许已登陆用户访问：

安全规则很是灵活，合理运用，能够在知足资源调用需求的同时，增长资源的安全性，为应用安全保驾护航。

最后总结，经过本文，咱们了解了小程序的开发过程，以及小程序云开发的用法、无登陆资源调用的方式。相对于代码，思路更重要，也强烈建议你们试一试云开发，感觉高效，轻松地作出本身的应用！

产品介绍

云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等serverless化能力，可用于云端一体化开发多种端应用（小程序，公众号，Web 应用，Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程当中繁琐的服务器搭建及运维，开发者能够专一于业务逻辑的实现，开发门槛更低，效率更高。
开通云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档：https://cloud.tencent.com/product/tcb?from=12763
技术文档：https://cloudbase.net?from=10004技术交流加Q群：601134960最新资讯关注微信公众号【腾讯云云开发】