概述 以下方案均需要有全景照片后方可实现（自己拍的 or 网上下载）。 一、方案一：自建网页 自建网页，自己有服务器，可以用全景图转换器（如pano2vr）直接生成html代码，然后通过 webview 嵌入到小程序访问。 建议：图片可以放在七牛云或其他地方，CDN 能有效优化网页中全景图的打开速度（一般全景图片体积都是较大的）。 体验效果： [图片] 二、方案二：720yun 使用 720云，这也是大部分全景摄影社或爱好者最习惯用的平台了。他们也提供了小程序打开全景图的方案。但核心还是使用 webview，并且需要开通会员，具体参考： 建议：经费足的可以考虑一下这个方案，毕竟720云的操作和体验是真的是十分优秀的！ 参考：小程序校验指南 | 720yun https://bbs2.720yun.com/article?id=687 [图片] 三、方案三：小程序插件 以上两种方案都是借助webview来实现，也就是说必须要企业或其他单位的主体才能使用。个人的小程序如果要实现全景，建议使用这位大佬写的小程序插件——wxPano。项目一直在不断更新中，而且还免费，很值得期待！ 建议：①该插件限制全景图片分辨率需在2048*1024及以下，因此无法打开画质很高清的全景图片。②插件代码包超过1MB，对小程序打开速度有微小的影响。 链接：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx386c038238531f87 [图片] 结语 以上来自我自己开发时的一些经验，欢迎前辈老师们补充。 也欢迎社区三连——点赞收藏关注！！

概述 有时候我们需要立体展示一个物体时，可能需要用到以下效果。当然实现的效果可能有很多，这里就为大家介绍一个大神写的方案，希望能帮到大家！ 利用小程序开放的接口模拟简单的3D环物功能。只需传入物品序列照片数组即可。 [图片] 截图来自小程序“白海豚保护区” 一、小程序插件 AppID：wx0f253bdf656bfa08 基础库要求：>= 2.4.3 文档链接：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx0f253bdf656bfa08 图片要求：网络URL链接 [图片] 二、兼容云开发 由于插件已经有段时间没有更新了，笔者在开发时又用到了小程序的云开发储存图片资源。拜原作者开源所赐，为了兼容云开发，我在开源的小程序插件代码中进行了部分修改。 开源代码：https://github.com/hiteochew/DimensionalShow-wxapp-plugin 修改方法： 将原代码中 downloadFile 方法替换为以下代码即可。 [代码]// 文件位置：plugin/api/util.js // 代码位置：第 124 行 function downloadFile(src) { return new Promise((resolve, reject) => { //云储存 wx.cloud.downloadFile({ fileID: src }).then(res => { resolve(res.tempFilePath); }).catch(error => { reject(err); }) }) } [代码] 结语 欢迎社区三连——关注点赞收藏！

介绍 中华白海豚是国家一级保护动物、香港回归吉祥物，仅剩2千余头，与现存大熊猫数量相当；珠江口海域是世界最大的白海豚栖息地，但受人类活动影响生存状况不容乐观；保护区承担着科普教育、管理执法、保护救助、科研监测等诸多职能。 小程序“白海豚保护区”是我个人以志愿者身份，无偿帮助保护区开发的，该项目在2019高校小程序大赛中获全国总决赛一等奖。 [图片] 选择云开发 这个项目是以小程序云开发（TCB）为核心的。在笔者看来，每个云开发的运行环境是独立而隔离的，因此能够有效避免在一些突发情况时，不同项目之间产生的负面影响，这对于一个对稳定性要求较高的项目来说是十分合适的选择。同时，也不用考虑服务器的运维这些杂七杂八的问题。因此，可以说云开发是让开发者十分省心了！ [图片] 不同场景下的应用 小程序聚焦保护区工作中的三个场景，包括两个高频场景：科普基地参观、志愿综合服务；以及一个低频场景，但却是十分重要的应用场景，那就是在遇到鲸豚搁浅等情况时，小程序能告诉我们该如何正确处理。详细的功能大家可进入小程序体验。 保护区拥有首个白海豚主题科普基地，迎接着来自珠三角乃至全国的参观者。以下，笔者将以这个场景下的参观预约功能的实现流程为例，向大家介绍一下云开发在本项目中应用！ [图片] 一、用户界面 关键词：数据库 云存储 选择图片时将图片压缩，并使用 wx.cloud.uploadFile 方法上传到云存储中。 [代码]chooseImage: function (e) { wx.chooseImage({ count: 1, sizeType: ['compressed'], //压缩图片 sourceType: [e], success: chooseResult => { wx.cloud.uploadFile({ cloudPath: 'orderPic/' + new Date().getTime() + '.jpg', //定义上传至云端的路径、名称 filePath: chooseResult.tempFilePaths[0] }) }, }) } [代码] 通过<form>组件获取到用户填写的信息后，调用 add 方法往数据库的集合中插入记录。 [代码] formSubmit(form) { db.collection('order_list').add({ data: form, success: res => { console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id) } }) } [代码] [图片] 二、审核界面 关键词：数据库 云函数 利用企业微信支持微信小程序运行的天然优势，本项目与保护区单位的企业微信相结合，工作人员在企业微信中接收通知、处理申请。 利用 get 方法查询数据库该条预约的信息，并渲染到页面中。 [代码] onLoad: function (e) { var that = this db.collection('order_list').where({ _id: e.id }) .get({ success(res) { that.setData({ content: res.data[0] }) } }) } [代码] 审核后更新该条预约的状态（通过或不通过），这个时候因为权限问题，就需要在云函数中调用 update 的方法。 [代码]const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() exports.main = async (event, context) => { var docid = event.docid var state = event.state var reply = event.reply try { return await db.collection('order_list').doc(docid).update({ data: { state: state, reply: reply } }) } catch (e) { console.log(e) } } [代码] [图片] 三、统计界面 关键词：聚合 聚合是云开发一种对数据批处理的操作。聚合操作可以将数据分组，然后对每组数据执行多种批处理操作，最后返回结果，以实现统计的功能。 [代码]GetData: function () { var that = this db.collection('order_all') .aggregate() .match({ _id: _.gte(that.data.time1) //统计开始时间 }) .match({ _id: _.lte(that.data.time2) //统计截止时间 }) .group({ _id: null, people: $.sum('$people'), group: $.sum('$group') }) .end() .then(function (res) { that.setData({ people: res.list[0].people, group: res.list[0].group }) }) } [代码] [图片] 四、订阅消息 关键词：云函数 预约成功或失败后，结果会通过模板消息通知到用户。10月12日，微信团队发布了《小程序模板消息能力调整通知》，订阅消息正式上线。笔者也第一时间更新了用户的通知形式。 [图片] 引导用户开启订阅消息，这里也注意到了基础库的要求，对低版本的用户会作相应提醒。 [代码] <view bindtap="RequestSubscribeMessage"> <view >审核进度通知</view> <switch disabled checked="{{subscribeMessageCheck}}"></switch> </view> //index.js RequestSubscribeMessage: function () { var that = this wx.requestSubscribeMessage({ tmplIds: [template_ID], //订阅消息 success(res) { if (res[app.globalData.template_ID] == 'accept') { that.setData({ subscribeMessageCheck: true }) } }, fail: function (err) { console.log(err) } }) } [代码] 管理员审核后触发云函数，调用 subscribeMessage.send 发送订阅消息。 [代码]const cloud = require('wx-server-sdk') cloud.init() exports.main = async (event, context) => { var openId = event.openId var value1 = event.value1 var value2 = event.value2 var templateId = event.templateId try { const result = await cloud.openapi.subscribeMessage.send({ touser: openId, page: 'pages/order/user/history', data: { name1: { value: value1 }, date3: { value: value2 } }, templateId: templateId }) console.log(result) return result } catch (err) { console.log(err) return err } } [代码] 总结 作为云开发的第一批用户，也是业余的编程爱好者（本专业汉语言文学），云开发帮助我解决了很多小程序开发上的问题，有效提高了编程的效率，也让我有机会将许许多多头脑中有趣的想法、通过小程序编译成现实！