简介720全景云系统是一套面向中小开发者与企业用户的全景内容创作及多端发布方案解决全景场景制作、小程序与PC端同步展示的落地难题。压缩包共2716个文件大小124.56MB主要包含PHP后端逻辑、JS前端交互、PNG/GIF图片资源、CSS样式及HTML页面同时提供krpano相关的bat批处理、xml配置文件与工具脚本便于完成全景拼接、加密与部署。目前已有724人学习下载。系统内置生成小程序的能力附带源码可自由定制并包含PC端版本及图文安装教程覆盖服务器配置、数据库设置、源码部署等关键环节。整套资源适合需要快速上线720°全景展示的房产、旅游、教育及电商场景也便于开发者二次开发与功能扩展。1. 720全景云系统到底解决了什么从一张全景图到一条业务闭环做720全景这几年我拆过的“全景系统”压缩包不少但真正把小程序端和PC端串起来、能给客户直接交付的并不多。这套720全景云系统是少数我从解压跑到真机预览没断过的资源。它解决的核心问题很现实全景图拍好、拼好之后怎么变成客户手机上能直接看、能标注热点、能统计访问的小程序同时让管理员在PC端改内容。大部分做全景业务的人卡在“图做完了不知道怎么交付”这套系统正好把最后一公里补齐了。它适合三类人接门店、楼盘、展馆全景展示外包的开发者需要在公司内部快速搭一套全景内容管理后台的团队以及正在学微信小程序开发想拿一个完整全栈案例练手的人。如果你是这三类之一这篇文章就是按我实际部署的路径写的跟着走就行。2. 系统架构拆解小程序端、PC端与全景编辑器的分工逻辑在动手安装之前先花几分钟把这套系统的模块边界搞清楚。很多人在安装阶段翻车不是因为命令敲错而是不知道每个目录对应什么、改错了文件。这类云系统的常见落点是PC端负责内容管理和数据存储小程序端负责展示和交互中间通过接口通信。下面按我拆过的类似资源把三个模块的角色和责任范围讲清楚。2.1 三个模块的角色划分谁在干活谁在展示这套系统从功能上看可以拆成三个独立模块。小程序端是访客直接看到的部分主要做三件事拉取项目列表、加载全景图、渲染热点。它本身不该承担复杂的后台逻辑只负责把云端的数据用合适的方式展示出来。真正干重活的是PC端管理后台管理员在这里创建全景项目、上传全景图、设置初始视角、添加热点标注、修改项目名称和分类。第三个模块是数据库所有项目信息和热点坐标都存在这里小程序端每次打开都是实时请求接口拿最新数据而不是把全景图写死在代码里。这种“PC管理小程序展示数据库存储”的三角结构是全景类小程序的通用做法。它带来的直接好处是业务人员不需要碰代码在PC端上传一张新全景图小程序端刷新就能看到。如果你给客户交付的是“全景看房”“全景门店”“全景展厅”这类项目这个分工能让客户自己维护内容你只需要在交付时把环境搭好。2.2 为什么必须用“云系统”而不是本地生成方案我见过有人把全景图直接打包进小程序代码里一个项目五六个场景每个场景一张4K全景图小程序主包直接超限。微信小程序主包体积限制是2MB而一张等距柱状投影的全景图即便是压缩过的JPEG也经常在1MB到3MB之间。更别说全景图还需要场景切换、热点加载全塞进本地包既超体积也无法实现内容更新。这套云系统的做法是全景图存储到服务器小程序端通过接口拿到图片URL列表按需加载。图片只有在小程序需要展示时才从服务器拉取这样小程序包体积被控制在合理范围内同时PC后台随时可以替换图片不用重新发版。微信小程序官方对request域名和downloadFile域名有强制校验正好适合这种“图片放云端、前端只做渲染”的架构。我在部署这类资源时习惯先把这套“云端存图、接口取数”的思路跟客户讲明白后续排查问题会省很多口舌。2.3 技术栈的边界判断PHP后台怎么带小程序前端打开压缩包之后第一件事是分辨后端用了什么语言。这套资源常见的落点是PC后台用PHPMySQL小程序端用原生微信小程序开发前后端通过JSON格式的REST接口通信。如果你拿到的版本后端是Java或Node.js安装思路完全一样只是配置文件的写法不同。判断方法很简单看PC后台目录里有没有index.php或composer.json看数据库文件是不是.sql结尾。PHP方案在虚拟主机和小型服务器上部署成本最低这也是这类全景系统默认选它的原因。小程序端通常是原生开发可以直接导入微信开发者工具这也是最稳妥的查看方式。如果你更习惯uni-app可以拿到前端源码后自己迁移但刚上手时建议先跑通原生版本不要一上来就改技术栈。3. 从压缩包到跑通全流程环境配置与安装的分步操作这一章是你动手的第一步。我按“解压→识别目录→准备环境→导入数据库→改配置→启动服务→导入小程序”的顺序走一遍。每一步都给出命令和参数说明你照着执行就能把系统跑在本地或服务器上。3.1 解压压缩包先看清目录结构再动手拿到720全景云系统 可生成小程序带PC端安装教程.zip之后先在服务器或本地电脑上建一个工作目录再解压。Windows用户直接用右键解压Linux服务器用命令行mkdir -p /data/www/panos cd /data/www/panos unzip 720全景云系统 可生成小程序带PC端安装教程.zip -d panos cd panos ls -la这里的-d panos指定解压到panos子目录避免压缩包内的文件直接散落在工作目录里。解压完成后用ls -la查看目录结构。我拆过的同类型压缩包解压后通常会有这几类内容PC后台源码目录、小程序前端目录、数据库SQL文件、安装说明文档。如果你看到的目录名不是完全一致不用慌按功能对应即可。提示如果解压过程中出现中文文件名乱码是因为压缩包内文件名是GBK编码而系统默认UTF-8。Linux下可以用unzip -O GBK参数解决Windows下用Bandizip或7-Zip选择“自动检测编码”再解压。3.2 环境准备PHP、MySQL、Nginx的版本与配置要求跑PHP后台最常见的组合是LNMP或LAMP。以我常用的配置为例组件推荐版本关键配置项PHP7.2 或 7.4开启pdo_mysql、fileinfo、openssl扩展MySQL5.7 或 8.0字符集用utf8mb4关闭ONLY_FULL_GROUP_BY如遇SQL报错Nginx1.18配置伪静态规则PHP请求转发给php-fpmApache2.4开启mod_rewrite允许.htaccess覆盖我一般会在本地用宝塔面板或小皮面板一键安装这套环境然后再把源码放进去。如果你是服务器部署记得PHP的upload_max_filesize和post_max_size需要调大因为PC后台要接收全景图上传默认的2MB根本不够。建议upload_max_filesize256Mpost_max_size300M。检查PHP扩展是否开启用下面的命令php -m | grep -E pdo_mysql|fileinfo|openssl如果输出里缺少pdo_mysql说明PHP连不上MySQL需要在PHP配置里启用对应扩展。这一步是安装阶段最常见的拦路虎先确认它再往后走。3.3 导入数据库与配置文件修改把代码和数据库连起来环境准备好之后先把数据库文件导入。在MySQL命令行里执行mysql -uroot -p --default-character-setutf8 database/pano_cloud.sql这条命令会把SQL文件导入到MySQLSQL内部一般会自己创建数据库并写入初始数据。导入后用mysql -uroot -p -e show databases;确认pano_cloud数据库已经出现。如果导入时报编码错误把SQL文件另存为UTF-8无BOM格式再执行一次。接下来是核心步骤修改PC后台的数据库连接配置。PHP项目通常在config目录下有一个数据库配置文件需要改成你自己的数据库用户名和密码// pc-admin/config/database.php return [ host 127.0.0.1, port 3306, dbname pano_cloud, user root, pass 你的数据库密码, charset utf8mb4 ];这里的host如果是本机就用127.0.0.1如果数据库和Web服务不在同一台服务器需要改成数据库服务器的内网IP。dbname必须和SQL文件里创建的库名一致。改完保存然后在浏览器访问PC后台地址如果能打开登录页说明后端已经跑通了。这个环节最容易混淆的是改完配置发现页面报500错误先看PHP错误日志而不是反复改代码。日志路径常见的是/www/wwwroot/项目目录/runtime/log或/var/log/php-fpm.log里面会明确告诉你是连不上数据库还是某个文件没权限。3.4 导入小程序前端微信开发者工具的配置要点后端跑通之后处理小程序端。用微信开发者工具导入压缩包中的小程序目录导入时要注意AppID先用自己的测试号等后面真要发布时再替换成客户的小程序AppID。导入后第一件事是修改接口地址配置。小程序端通常有一个config.js或utils/request.js文件里面的BASE_URL要改成PC后端的域名或IP// mini-program/config.js module.exports { BASE_URL: https://panos.example.com/index.php, IMG_URL: https://panos.example.com/uploads };BASE_URL是接口请求地址IMG_URL是全景图的资源访问地址。开发阶段如果后端跑在本地BASE_URL可以填局域网IP比如http://192.168.1.10/index.php。但微信开发者工具默认要求HTTPS本地联调时要在开发者工具的“详情→本地设置”里勾选“不校验合法域名、web-view业务域名、TLS版本以及HTTPS证书”否则请求直接失败。这个选项只是开发阶段用的真机预览和上线前一定要取消勾选改成在微信公众平台配置合法域名这个坑后面专章讲。改完配置点击编译小程序首页如果能显示出PC后台创建的全景项目列表整条链路就算通了。4. 小程序端生成真机预览标题、导航栏与全景数据的调整参数系统跑通只是第一步真正让客户满意的是小程序端的细节打开小程序看到的标题是什么、顶部导航栏高度在刘海屏上是否遮挡、每个场景怎么切换、热点标注怎么点。这一章把这些细节的参数和调整方法讲透。4.1 从PC后台创建项目到小程序端预览的完整流程我建议你在PC后台完整创建两个全景项目用真实数据跑通全流程。操作步骤是登录PC后台→创建全景项目→填写项目名称和分类→上传全景图→设置初始视角→添加热点标注→保存并发布。每一步在后台都有对应表单上传全景图时注意系统一般要求等距柱状投影图宽高比必须是2:1比如4096×2048像素。如果上传非标准格式有些版本会自动裁切或拉伸导致画面变形。全景图上传完成后设置初始视角是最容易忽略的一步你要指定用户打开这个场景时先看到哪个方向通常是朝门口或朝主要展示区域。这个值会以yaw水平角度、pitch垂直角度、fov视野范围三个参数保存到数据库。小程序端拿到项目数据后用wx.request请求项目详情接口接口返回的JSON里包含全景图URL、初始视角参数、热点列表。前端拿到数据后渲染到页面用户进入场景看到的第一个画面就是初始视角。这套流程里PC后台是“写”小程序端是“读”职责非常干净。4.2 头部标题与顶部导航栏高度的配置方法小程序头部标题有两层全局默认标题在app.json的window节点里配置每个页面可以单独覆盖。以这套系统的常见结构为例{ pages: [pages/index/index, pages/pano/pano], window: { navigationBarTitleText: 全景展厅, navigationBarBackgroundColor: #111827, navigationBarTextStyle: white, navigationStyle: default } }navigationBarTitleText是标题文字navigationBarBackgroundColor是头部背景色navigationBarTextStyle只有两个可选值white或black。这里有个颜色细节背景色是深色时标题文字必须用白色否则对比度不够。全景展示页面我建议用深色背景因为全景场景通常亮度较高白色导航栏会在视觉上割裂沉浸感。顶部导航栏高度这块Android和iOS不同机型上有差异尤其是带刘海屏的iPhone状态栏高度不是固定值。正确做法是用API动态计算而不是写死一个44px或64px。微信小程序里可以这样获取const winInfo wx.getWindowInfo(); const navHeight winInfo.statusBarHeight 44;statusBarHeight是状态栏高度44是导航栏的默认内容高度两者相加才是顶部总高度。如果页面用了自定义导航navigationStyle: custom布局时必须用这个动态值撑起顶部占位否则返回按钮会被状态栏压住。这个参数在任何涉及沉浸式全景页面的场景里都会用到提前处理好能省掉后面大量真机调试时间。4.3 动态设置小程序标题进入不同场景时改标题全景看房类小程序有个高频需求用户从项目列表点进不同楼盘或在一个楼盘里切换不同户型时顶部标题要跟着变。写死在app.json里不行要动态设置标题。// pages/pano/pano.js wx.setNavigationBarTitle({ title: projectInfo.name · sceneInfo.name });wx.setNavigationBarTitle是微信官方提供的动态改标题APItitle是字符串可以拼接项目名和场景名。我一般会在onLoad里拿到场景数据后立即调用这个方法而不是等用户操作才改。实际项目中“云看房”场景里标题显示“万科城市之光·A户型”比默认的“全景展厅”有价值得多用户能明确知道自己当前在哪个场景分享小程序给好友时卡片上显示的也是这个动态标题。需要注意wx.setNavigationBarTitle只能改当前页面的标题如果要在不同页面间联动需要配合全局状态管理或事件通知。另外一个限制是标题长度iOS上标题过长会被截断建议控制在12个汉字以内。4.4 全景图与热点标注的数据格式边界后端返回的热点数据字段设计直接决定前端好不好渲染。常见的字段结构如下{ hotspots: [ { id: 101, title: 客厅, yaw: 45.2, pitch: -5.6, fov: 90, icon: https://panos.example.com/icons/room.png, targetSceneId: 202, type: switch_scene } ] }yaw和pitch是热点的方位角表示全景球面上的位置fov是用户点击热点后视角缩放的视野范围值越小看得越近越聚焦targetSceneId表示点击这个热点要切换到哪个场景。前端拿到这个字段后用三维引擎或全景插件的API把热点投影到当前视角上。我在做全景项目时会给每个热点加一个type字段区分“切换场景”“显示文字”“跳转链接”三类行为。只做文字说明的热点不需要触发场景切换只弹出一个信息浮层跳转链接的热点则直接打开外部页面。这样定义好后PC后台上传热点时选择类型即可前端不用为每种业务场景改动代码。5. 踩坑排查全景黑屏、小程序白屏与数据不同步的三类高频故障环境跑通不等于能交付。我在这套系统的部署和二次开发里踩过的坑集中体现在四五个场景里每一个都把现象、原因和解决办法拆开说。这些经验直接决定你交付给客户时会不会翻车。5.1 全景图在小程序端一片黑屏PC端却正常显示现象PC后台能正常看到全景图小程序端进入场景后页面是黑的偶尔加载几张图就卡死。真机上尤其明显开发者工具里却正常。原因两个。第一全景图URL的域名不在微信小程序的downloadFile合法域名里图片请求被微信拦截导致全景图素材加载失败。第二全景图文件太大比如一张原图有10MB以上手机内存不足直接黑屏。开发者工具没这些问题是因为工具默认不校验域名而且电脑内存远比手机充裕。解决在微信公众平台的“开发设置→服务器域名”里把PC后台的域名同时加入request合法域名和downloadFile合法域名。图片体积方面上传前用工具把全景图压缩到2048×1024到4096×2048之间JPG格式质量参数压到80单张控制在2MB以内。我现在的习惯是PC后台保留原图另外生成一个“小程序专用压缩图”小程序端默认加载压缩图原图只给PC端预览用。5.2 小程序端白屏且接口报“不在以下 request 合法域名列表中”现象开发者工具里能正常跑点“真机预览”之后手机上打开小程序页面空白控制台报错提示域名不在合法域名列表中。原因开发者工具勾选了“不校验合法域名”选项所以本地调试一切正常。真机预览时微信强制走线上域名校验机制你后台没配域名或者域名没通过HTTPS校验请求直接被拦截前端拿不到数据页面渲染不出来。这个坑几乎所有小程序项目都会遇到不是这套系统独有的问题。解决三个步骤缺一不可。第一步PC后台接口必须走HTTPS确保证书完整微信要求TLS 1.2以上。第二步在微信公众平台配置request合法域名和downloadFile合法域名域名里不要带http://前缀只填域名本身。第三步改完域名配置后在开发者工具里清除缓存并重新编译因为工具会缓存旧的校验结果。如果配置完还是白屏用手机打开开发者工具里的“真机调试”在Network面板看具体哪个请求被拦截这一步能精确告诉你域名配置还差哪一项。5.3 PC后台改了数据小程序端不刷新还是旧内容现象在PC后台修改了项目名称、替换了全景图或增删了热点小程序端重新打开还是旧数据过一段时间才更新。原因两个层面。小程序端请求接口时微信会对同URL的GET请求做缓存如果接口没有加时间戳或随机参数第二次打开可能直接命中本地缓存。后端层面部分PHP框架或服务器配置了Redis或文件缓存后台修改操作只更新了数据库没有清空缓存。解决小程序端在请求项目列表和项目详情时URL上加一个t参数值取当前时间戳这样每次请求都是新URL强制绕过客户端缓存。后端方面在PC后台的“修改保存”逻辑里加一条缓存清理代码或者在Redis配置文件里把相关key的过期时间设置得很短比如60秒。我现在部署时会直接检查后台代码里有没有写缓存清除逻辑如果没有就自己补上这一步不做客户改完内容发现小程序没变会直接认为是系统坏了。6. 进阶玩法用访问数据反哺全景方案并留好二次开发口子系统稳定交付之后真正拉开差距的是它能不能为你的业务带来额外价值。全景小程序最容易产生的一种数据就是用户看了哪个场景、停留了多久、点了哪些热点。这套系统如果把这些数据记录并展示在PC后台你就能知道客户最关心哪个区域、哪些热点根本没人点对做展厅和门店优化非常有用。实现思路是在小程序端的场景切换和热点点击处埋点。进场时上报场景ID和开始时间离场时上报停留时长热点点击时上报热点ID。后端建两张表存原始记录按天汇总出报表统计维度说明对业务的意义场景PV每个场景被打开的次数判断哪个户型/区域最受欢迎平均停留时长用户在场景内看了多久判断全景图是否吸引人热点点击率热点被点击次数/场景PV判断标注位置和图标是否有效来源渠道用户从哪个入口进入小程序评估推广渠道质量这套数据统计做起来不复杂小程序端在wx.request里带上用户行为参数后端往数据库写记录PC后台用图表展示趋势。我在一个展厅项目里埋过这样的点发现客户在沙盘区域的停留时长是最短区的3倍后来把沙盘场景放到了小程序首页第一位次日留资量明显提升——数据反哺方案不是口号。二次开发方面我留两个你大概率会用的口子。第一个是热点跳转给热点增加jumpUrl字段支持跳转到小程序内其他页面或通过web-view嵌入H5详情页注意web-view需要配置业务域名且域名必须HTTPS。第二个是场景语音解说给每个场景加一个audioUrl字段前端在进入场景时自动播放语音讲解这个功能在文旅类项目里非常常见实现成本不高但客户感知很强。从这套系统的目录结构看这些都是在你熟悉后端字段和前端渲染逻辑后可以独立扩展的。回想我最早部署这套系统时的教训后端跑通当天我直接生成小程序码发给客户结果客户打开就是白屏原因就是合法域名没配。从那以后我每次部署720全景云系统都强制走一遍“开发者工具编译→清缓存→真机预览→关掉调试模式→客户手机扫码”的完整流程半小时的检查换来的是客户现场打开即用。同款式的小程序交付这个习惯帮我挡掉不止一次售后翻车。这套720全景云系统压缩包解压、配置、埋点、发布按这条路径走下来不会出大问题希望帮到你。本文还有配套的精品资源点击获取 720全景云系统部署指南：从环境配置到小程序真机预览全流程
简介720全景云系统是一套面向中小开发者与企业用户的全景内容创作及多端发布方案解决全景场景制作、小程序与PC端同步展示的落地难题。压缩包共2716个文件大小124.56MB主要包含PHP后端逻辑、JS前端交互、PNG/GIF图片资源、CSS样式及HTML页面同时提供krpano相关的bat批处理、xml配置文件与工具脚本便于完成全景拼接、加密与部署。目前已有724人学习下载。系统内置生成小程序的能力附带源码可自由定制并包含PC端版本及图文安装教程覆盖服务器配置、数据库设置、源码部署等关键环节。整套资源适合需要快速上线720°全景展示的房产、旅游、教育及电商场景也便于开发者二次开发与功能扩展。1. 720全景云系统到底解决了什么从一张全景图到一条业务闭环做720全景这几年我拆过的“全景系统”压缩包不少但真正把小程序端和PC端串起来、能给客户直接交付的并不多。这套720全景云系统是少数我从解压跑到真机预览没断过的资源。它解决的核心问题很现实全景图拍好、拼好之后怎么变成客户手机上能直接看、能标注热点、能统计访问的小程序同时让管理员在PC端改内容。大部分做全景业务的人卡在“图做完了不知道怎么交付”这套系统正好把最后一公里补齐了。它适合三类人接门店、楼盘、展馆全景展示外包的开发者需要在公司内部快速搭一套全景内容管理后台的团队以及正在学微信小程序开发想拿一个完整全栈案例练手的人。如果你是这三类之一这篇文章就是按我实际部署的路径写的跟着走就行。2. 系统架构拆解小程序端、PC端与全景编辑器的分工逻辑在动手安装之前先花几分钟把这套系统的模块边界搞清楚。很多人在安装阶段翻车不是因为命令敲错而是不知道每个目录对应什么、改错了文件。这类云系统的常见落点是PC端负责内容管理和数据存储小程序端负责展示和交互中间通过接口通信。下面按我拆过的类似资源把三个模块的角色和责任范围讲清楚。2.1 三个模块的角色划分谁在干活谁在展示这套系统从功能上看可以拆成三个独立模块。小程序端是访客直接看到的部分主要做三件事拉取项目列表、加载全景图、渲染热点。它本身不该承担复杂的后台逻辑只负责把云端的数据用合适的方式展示出来。真正干重活的是PC端管理后台管理员在这里创建全景项目、上传全景图、设置初始视角、添加热点标注、修改项目名称和分类。第三个模块是数据库所有项目信息和热点坐标都存在这里小程序端每次打开都是实时请求接口拿最新数据而不是把全景图写死在代码里。这种“PC管理小程序展示数据库存储”的三角结构是全景类小程序的通用做法。它带来的直接好处是业务人员不需要碰代码在PC端上传一张新全景图小程序端刷新就能看到。如果你给客户交付的是“全景看房”“全景门店”“全景展厅”这类项目这个分工能让客户自己维护内容你只需要在交付时把环境搭好。2.2 为什么必须用“云系统”而不是本地生成方案我见过有人把全景图直接打包进小程序代码里一个项目五六个场景每个场景一张4K全景图小程序主包直接超限。微信小程序主包体积限制是2MB而一张等距柱状投影的全景图即便是压缩过的JPEG也经常在1MB到3MB之间。更别说全景图还需要场景切换、热点加载全塞进本地包既超体积也无法实现内容更新。这套云系统的做法是全景图存储到服务器小程序端通过接口拿到图片URL列表按需加载。图片只有在小程序需要展示时才从服务器拉取这样小程序包体积被控制在合理范围内同时PC后台随时可以替换图片不用重新发版。微信小程序官方对request域名和downloadFile域名有强制校验正好适合这种“图片放云端、前端只做渲染”的架构。我在部署这类资源时习惯先把这套“云端存图、接口取数”的思路跟客户讲明白后续排查问题会省很多口舌。2.3 技术栈的边界判断PHP后台怎么带小程序前端打开压缩包之后第一件事是分辨后端用了什么语言。这套资源常见的落点是PC后台用PHPMySQL小程序端用原生微信小程序开发前后端通过JSON格式的REST接口通信。如果你拿到的版本后端是Java或Node.js安装思路完全一样只是配置文件的写法不同。判断方法很简单看PC后台目录里有没有index.php或composer.json看数据库文件是不是.sql结尾。PHP方案在虚拟主机和小型服务器上部署成本最低这也是这类全景系统默认选它的原因。小程序端通常是原生开发可以直接导入微信开发者工具这也是最稳妥的查看方式。如果你更习惯uni-app可以拿到前端源码后自己迁移但刚上手时建议先跑通原生版本不要一上来就改技术栈。3. 从压缩包到跑通全流程环境配置与安装的分步操作这一章是你动手的第一步。我按“解压→识别目录→准备环境→导入数据库→改配置→启动服务→导入小程序”的顺序走一遍。每一步都给出命令和参数说明你照着执行就能把系统跑在本地或服务器上。3.1 解压压缩包先看清目录结构再动手拿到720全景云系统 可生成小程序带PC端安装教程.zip之后先在服务器或本地电脑上建一个工作目录再解压。Windows用户直接用右键解压Linux服务器用命令行mkdir -p /data/www/panos cd /data/www/panos unzip 720全景云系统 可生成小程序带PC端安装教程.zip -d panos cd panos ls -la这里的-d panos指定解压到panos子目录避免压缩包内的文件直接散落在工作目录里。解压完成后用ls -la查看目录结构。我拆过的同类型压缩包解压后通常会有这几类内容PC后台源码目录、小程序前端目录、数据库SQL文件、安装说明文档。如果你看到的目录名不是完全一致不用慌按功能对应即可。提示如果解压过程中出现中文文件名乱码是因为压缩包内文件名是GBK编码而系统默认UTF-8。Linux下可以用unzip -O GBK参数解决Windows下用Bandizip或7-Zip选择“自动检测编码”再解压。3.2 环境准备PHP、MySQL、Nginx的版本与配置要求跑PHP后台最常见的组合是LNMP或LAMP。以我常用的配置为例组件推荐版本关键配置项PHP7.2 或 7.4开启pdo_mysql、fileinfo、openssl扩展MySQL5.7 或 8.0字符集用utf8mb4关闭ONLY_FULL_GROUP_BY如遇SQL报错Nginx1.18配置伪静态规则PHP请求转发给php-fpmApache2.4开启mod_rewrite允许.htaccess覆盖我一般会在本地用宝塔面板或小皮面板一键安装这套环境然后再把源码放进去。如果你是服务器部署记得PHP的upload_max_filesize和post_max_size需要调大因为PC后台要接收全景图上传默认的2MB根本不够。建议upload_max_filesize256Mpost_max_size300M。检查PHP扩展是否开启用下面的命令php -m | grep -E pdo_mysql|fileinfo|openssl如果输出里缺少pdo_mysql说明PHP连不上MySQL需要在PHP配置里启用对应扩展。这一步是安装阶段最常见的拦路虎先确认它再往后走。3.3 导入数据库与配置文件修改把代码和数据库连起来环境准备好之后先把数据库文件导入。在MySQL命令行里执行mysql -uroot -p --default-character-setutf8 database/pano_cloud.sql这条命令会把SQL文件导入到MySQLSQL内部一般会自己创建数据库并写入初始数据。导入后用mysql -uroot -p -e show databases;确认pano_cloud数据库已经出现。如果导入时报编码错误把SQL文件另存为UTF-8无BOM格式再执行一次。接下来是核心步骤修改PC后台的数据库连接配置。PHP项目通常在config目录下有一个数据库配置文件需要改成你自己的数据库用户名和密码// pc-admin/config/database.php return [ host 127.0.0.1, port 3306, dbname pano_cloud, user root, pass 你的数据库密码, charset utf8mb4 ];这里的host如果是本机就用127.0.0.1如果数据库和Web服务不在同一台服务器需要改成数据库服务器的内网IP。dbname必须和SQL文件里创建的库名一致。改完保存然后在浏览器访问PC后台地址如果能打开登录页说明后端已经跑通了。这个环节最容易混淆的是改完配置发现页面报500错误先看PHP错误日志而不是反复改代码。日志路径常见的是/www/wwwroot/项目目录/runtime/log或/var/log/php-fpm.log里面会明确告诉你是连不上数据库还是某个文件没权限。3.4 导入小程序前端微信开发者工具的配置要点后端跑通之后处理小程序端。用微信开发者工具导入压缩包中的小程序目录导入时要注意AppID先用自己的测试号等后面真要发布时再替换成客户的小程序AppID。导入后第一件事是修改接口地址配置。小程序端通常有一个config.js或utils/request.js文件里面的BASE_URL要改成PC后端的域名或IP// mini-program/config.js module.exports { BASE_URL: https://panos.example.com/index.php, IMG_URL: https://panos.example.com/uploads };BASE_URL是接口请求地址IMG_URL是全景图的资源访问地址。开发阶段如果后端跑在本地BASE_URL可以填局域网IP比如http://192.168.1.10/index.php。但微信开发者工具默认要求HTTPS本地联调时要在开发者工具的“详情→本地设置”里勾选“不校验合法域名、web-view业务域名、TLS版本以及HTTPS证书”否则请求直接失败。这个选项只是开发阶段用的真机预览和上线前一定要取消勾选改成在微信公众平台配置合法域名这个坑后面专章讲。改完配置点击编译小程序首页如果能显示出PC后台创建的全景项目列表整条链路就算通了。4. 小程序端生成真机预览标题、导航栏与全景数据的调整参数系统跑通只是第一步真正让客户满意的是小程序端的细节打开小程序看到的标题是什么、顶部导航栏高度在刘海屏上是否遮挡、每个场景怎么切换、热点标注怎么点。这一章把这些细节的参数和调整方法讲透。4.1 从PC后台创建项目到小程序端预览的完整流程我建议你在PC后台完整创建两个全景项目用真实数据跑通全流程。操作步骤是登录PC后台→创建全景项目→填写项目名称和分类→上传全景图→设置初始视角→添加热点标注→保存并发布。每一步在后台都有对应表单上传全景图时注意系统一般要求等距柱状投影图宽高比必须是2:1比如4096×2048像素。如果上传非标准格式有些版本会自动裁切或拉伸导致画面变形。全景图上传完成后设置初始视角是最容易忽略的一步你要指定用户打开这个场景时先看到哪个方向通常是朝门口或朝主要展示区域。这个值会以yaw水平角度、pitch垂直角度、fov视野范围三个参数保存到数据库。小程序端拿到项目数据后用wx.request请求项目详情接口接口返回的JSON里包含全景图URL、初始视角参数、热点列表。前端拿到数据后渲染到页面用户进入场景看到的第一个画面就是初始视角。这套流程里PC后台是“写”小程序端是“读”职责非常干净。4.2 头部标题与顶部导航栏高度的配置方法小程序头部标题有两层全局默认标题在app.json的window节点里配置每个页面可以单独覆盖。以这套系统的常见结构为例{ pages: [pages/index/index, pages/pano/pano], window: { navigationBarTitleText: 全景展厅, navigationBarBackgroundColor: #111827, navigationBarTextStyle: white, navigationStyle: default } }navigationBarTitleText是标题文字navigationBarBackgroundColor是头部背景色navigationBarTextStyle只有两个可选值white或black。这里有个颜色细节背景色是深色时标题文字必须用白色否则对比度不够。全景展示页面我建议用深色背景因为全景场景通常亮度较高白色导航栏会在视觉上割裂沉浸感。顶部导航栏高度这块Android和iOS不同机型上有差异尤其是带刘海屏的iPhone状态栏高度不是固定值。正确做法是用API动态计算而不是写死一个44px或64px。微信小程序里可以这样获取const winInfo wx.getWindowInfo(); const navHeight winInfo.statusBarHeight 44;statusBarHeight是状态栏高度44是导航栏的默认内容高度两者相加才是顶部总高度。如果页面用了自定义导航navigationStyle: custom布局时必须用这个动态值撑起顶部占位否则返回按钮会被状态栏压住。这个参数在任何涉及沉浸式全景页面的场景里都会用到提前处理好能省掉后面大量真机调试时间。4.3 动态设置小程序标题进入不同场景时改标题全景看房类小程序有个高频需求用户从项目列表点进不同楼盘或在一个楼盘里切换不同户型时顶部标题要跟着变。写死在app.json里不行要动态设置标题。// pages/pano/pano.js wx.setNavigationBarTitle({ title: projectInfo.name · sceneInfo.name });wx.setNavigationBarTitle是微信官方提供的动态改标题APItitle是字符串可以拼接项目名和场景名。我一般会在onLoad里拿到场景数据后立即调用这个方法而不是等用户操作才改。实际项目中“云看房”场景里标题显示“万科城市之光·A户型”比默认的“全景展厅”有价值得多用户能明确知道自己当前在哪个场景分享小程序给好友时卡片上显示的也是这个动态标题。需要注意wx.setNavigationBarTitle只能改当前页面的标题如果要在不同页面间联动需要配合全局状态管理或事件通知。另外一个限制是标题长度iOS上标题过长会被截断建议控制在12个汉字以内。4.4 全景图与热点标注的数据格式边界后端返回的热点数据字段设计直接决定前端好不好渲染。常见的字段结构如下{ hotspots: [ { id: 101, title: 客厅, yaw: 45.2, pitch: -5.6, fov: 90, icon: https://panos.example.com/icons/room.png, targetSceneId: 202, type: switch_scene } ] }yaw和pitch是热点的方位角表示全景球面上的位置fov是用户点击热点后视角缩放的视野范围值越小看得越近越聚焦targetSceneId表示点击这个热点要切换到哪个场景。前端拿到这个字段后用三维引擎或全景插件的API把热点投影到当前视角上。我在做全景项目时会给每个热点加一个type字段区分“切换场景”“显示文字”“跳转链接”三类行为。只做文字说明的热点不需要触发场景切换只弹出一个信息浮层跳转链接的热点则直接打开外部页面。这样定义好后PC后台上传热点时选择类型即可前端不用为每种业务场景改动代码。5. 踩坑排查全景黑屏、小程序白屏与数据不同步的三类高频故障环境跑通不等于能交付。我在这套系统的部署和二次开发里踩过的坑集中体现在四五个场景里每一个都把现象、原因和解决办法拆开说。这些经验直接决定你交付给客户时会不会翻车。5.1 全景图在小程序端一片黑屏PC端却正常显示现象PC后台能正常看到全景图小程序端进入场景后页面是黑的偶尔加载几张图就卡死。真机上尤其明显开发者工具里却正常。原因两个。第一全景图URL的域名不在微信小程序的downloadFile合法域名里图片请求被微信拦截导致全景图素材加载失败。第二全景图文件太大比如一张原图有10MB以上手机内存不足直接黑屏。开发者工具没这些问题是因为工具默认不校验域名而且电脑内存远比手机充裕。解决在微信公众平台的“开发设置→服务器域名”里把PC后台的域名同时加入request合法域名和downloadFile合法域名。图片体积方面上传前用工具把全景图压缩到2048×1024到4096×2048之间JPG格式质量参数压到80单张控制在2MB以内。我现在的习惯是PC后台保留原图另外生成一个“小程序专用压缩图”小程序端默认加载压缩图原图只给PC端预览用。5.2 小程序端白屏且接口报“不在以下 request 合法域名列表中”现象开发者工具里能正常跑点“真机预览”之后手机上打开小程序页面空白控制台报错提示域名不在合法域名列表中。原因开发者工具勾选了“不校验合法域名”选项所以本地调试一切正常。真机预览时微信强制走线上域名校验机制你后台没配域名或者域名没通过HTTPS校验请求直接被拦截前端拿不到数据页面渲染不出来。这个坑几乎所有小程序项目都会遇到不是这套系统独有的问题。解决三个步骤缺一不可。第一步PC后台接口必须走HTTPS确保证书完整微信要求TLS 1.2以上。第二步在微信公众平台配置request合法域名和downloadFile合法域名域名里不要带http://前缀只填域名本身。第三步改完域名配置后在开发者工具里清除缓存并重新编译因为工具会缓存旧的校验结果。如果配置完还是白屏用手机打开开发者工具里的“真机调试”在Network面板看具体哪个请求被拦截这一步能精确告诉你域名配置还差哪一项。5.3 PC后台改了数据小程序端不刷新还是旧内容现象在PC后台修改了项目名称、替换了全景图或增删了热点小程序端重新打开还是旧数据过一段时间才更新。原因两个层面。小程序端请求接口时微信会对同URL的GET请求做缓存如果接口没有加时间戳或随机参数第二次打开可能直接命中本地缓存。后端层面部分PHP框架或服务器配置了Redis或文件缓存后台修改操作只更新了数据库没有清空缓存。解决小程序端在请求项目列表和项目详情时URL上加一个t参数值取当前时间戳这样每次请求都是新URL强制绕过客户端缓存。后端方面在PC后台的“修改保存”逻辑里加一条缓存清理代码或者在Redis配置文件里把相关key的过期时间设置得很短比如60秒。我现在部署时会直接检查后台代码里有没有写缓存清除逻辑如果没有就自己补上这一步不做客户改完内容发现小程序没变会直接认为是系统坏了。6. 进阶玩法用访问数据反哺全景方案并留好二次开发口子系统稳定交付之后真正拉开差距的是它能不能为你的业务带来额外价值。全景小程序最容易产生的一种数据就是用户看了哪个场景、停留了多久、点了哪些热点。这套系统如果把这些数据记录并展示在PC后台你就能知道客户最关心哪个区域、哪些热点根本没人点对做展厅和门店优化非常有用。实现思路是在小程序端的场景切换和热点点击处埋点。进场时上报场景ID和开始时间离场时上报停留时长热点点击时上报热点ID。后端建两张表存原始记录按天汇总出报表统计维度说明对业务的意义场景PV每个场景被打开的次数判断哪个户型/区域最受欢迎平均停留时长用户在场景内看了多久判断全景图是否吸引人热点点击率热点被点击次数/场景PV判断标注位置和图标是否有效来源渠道用户从哪个入口进入小程序评估推广渠道质量这套数据统计做起来不复杂小程序端在wx.request里带上用户行为参数后端往数据库写记录PC后台用图表展示趋势。我在一个展厅项目里埋过这样的点发现客户在沙盘区域的停留时长是最短区的3倍后来把沙盘场景放到了小程序首页第一位次日留资量明显提升——数据反哺方案不是口号。二次开发方面我留两个你大概率会用的口子。第一个是热点跳转给热点增加jumpUrl字段支持跳转到小程序内其他页面或通过web-view嵌入H5详情页注意web-view需要配置业务域名且域名必须HTTPS。第二个是场景语音解说给每个场景加一个audioUrl字段前端在进入场景时自动播放语音讲解这个功能在文旅类项目里非常常见实现成本不高但客户感知很强。从这套系统的目录结构看这些都是在你熟悉后端字段和前端渲染逻辑后可以独立扩展的。回想我最早部署这套系统时的教训后端跑通当天我直接生成小程序码发给客户结果客户打开就是白屏原因就是合法域名没配。从那以后我每次部署720全景云系统都强制走一遍“开发者工具编译→清缓存→真机预览→关掉调试模式→客户手机扫码”的完整流程半小时的检查换来的是客户现场打开即用。同款式的小程序交付这个习惯帮我挡掉不止一次售后翻车。这套720全景云系统压缩包解压、配置、埋点、发布按这条路径走下来不会出大问题希望帮到你。本文还有配套的精品资源点击获取