微信小程序|云环境共享-使用指南

最近上线了我的第三款小程序,自从有了AI后,每天有使不完的牛劲儿...

由于第一款个人小程序50天重启人生已开通了云开发,并且每月资源有富余,所以决定共享云环境资源,独立开发,能省则省...

即使有官方文档,但在开发中还是遇到了挺多问题,接下来就给大家梳理一下环境共享具体如何使用,以及一些注意点。

为了叙述方便,下文中将第一款小程序,也就是资源方统称为A,第二款小程序,也就是调用方称为B。

1. 开通「环境共享」:

开通流程按照官方文档操作就可以,操作成功后,A中打开云开发控制台如下图所示:

2. 调用云函数:

这里需要注意!!!你要调用的云函数要放在A项目中!

因为我B项目一开始使用的是本地免费云开发,所以云函数都在B项目中,我以为B项目中的云函数只要部署后效果是一样的。但开启环境共享后,再调用云函数一直提示没有权限,需要先开通云开发。所以这里需要将云函数都放置在A项目中:

之后就是在B项目的页面中调用云函数(这部分官方文档有,但刚开始没太整明白...):

这里无需在app.js中初始化云函数了,直接在具体js中使用

3. 注意事项:
  1. 项目B中如果要获取用户openid,要用FROM_OPENID
js 复制代码
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  const { action, data } = event;
  // 获取用户openid
  const openid = wxContext.FROM_OPENID;
}
  1. 项目B中的image组件在环境共享中无法直接使用云储存中 cloud:// 协议的 fileID 加载图片:

解决方案: 在page下新增公共wxs文件,代码内容如下:

js 复制代码
// lib.wxs
module.exports = {
  getUrl: function (link) {
    if (link) {
    } else return "";
    if (link.substring(0, 5) == "cloud") {
    } else return link;
    var arr = link.split("/");
    arr[0] = "https:";
    arr[2] = arr[2].split(".")[1] + ".tcb.qcloud.la";
    return arr.join("/");
  },
};

页面中调用:

js 复制代码
<!-- pages/index/index.wxml -->
<wxs module="wxs" src="/pages/lib.wxs"></wxs>
<view>
   <image class="list-image" src="{{wxs.getUrl(item.image)}}" mode="aspectFill"></image>
</view>

完成以上配置与逻辑后,B项目就可以丝滑的共享云环境啦~。

最后,有任何小程序开发的问题,都欢迎评论区交流,也欢迎大家体验我的【理物收纳】小程序,一款简单易用的物品管理工具,让每一件物品都可视化,轻松记物,一目了然。

相关推荐
Jmyd01235 小时前
Web端3D营销展厅技术实现路径:从素材上云到线索回流的数据链路
前端·3d·性能优化·三维数字化
砚凝霜6 小时前
【软考信息安全】第二十二章 Web服务器安全分析与增强——Apache与IIS
服务器·前端·安全
u0111026757 小时前
JPG、PNG、WebP 怎么选?按透明度、体积和使用场景做判断
前端·javascript·vue.js·图像处理·ai作画
jerrywus8 小时前
让 AI 写完代码后交一份报告:我改造了 answer-me-with-html
前端·claude·cursor
派小心.8 小时前
小程序分享链路中来源参数的传递校验
大数据·前端·数据库·人工智能·小程序·数据分析
hhb_6189 小时前
一键生成数据看板,ECharts实战演示
前端·javascript·echarts
Java后端的Ai之路9 小时前
08_React组件API
前端·react.js·前端框架
小马不起床9 小时前
零基础玩转 FastAPI_09:前端基础工程构建
前端·状态模式·fastapi
风骏时光牛马10 小时前
用户管理模块接口开发
前端
彭亚川Allen10 小时前
从零手搓 RAG 之检索全流程,给大模型接上自己的知识库
前端·后端·ai编程