微信小程序添加全景实例

你好！也许这是你第一次想在小程序添加全景，也有可能不是第一次。但是本Girl 添加全景有着很深的印象，特意用文章记录下来，方便自己记住，下面就来了解本Girl添加全景的惨痛经历吧。

本Girl在小程序添加实景，是利用微信小程序跳转外链web-view用法来实现的，当然很多网友这时候会想，怎么不是直接写在小程序里面的，当然，我也很想写在小程序里面，但是本Girl不是大神，所以只能外链了。所以能参考的就参考，参考不了的本Girl也是无能为力了。

步骤一（应该准备的东西）

（1）Krpano全景插件
可以去官网看看：http://www.krpano360.com/

（2）服务器（需https）
利用插件，合成全景场景以后，需要上传到服务器上，并且是https ，因为小程序在线上的版本都是需要使用https的请求，http的使用只能在本地调试环境中使用

（3）小程序开发工具
初步建立简单的小程序页面，页面中添加web-view 标签，如下。web-view会自动占满整个页面，所以别妄想放点什么标题之类的东西了。src的链接就写你全景场景的https链接就可以了

<view class="page-section page-section-gap"><web-view src="http://yizhiyilai.cn/vtour/tour.html"></web-view>
</view>

（4）小程序公众平台后台配置

配置服务器域名
配置业务域名
注意：
1.个人和海外类型小程序没有办法对接web-view
2.要使用小程序的web-view 进行外链接H5，一定要配置业务域名（一定得配置，不配置不行），不然会报以下错误，如图

（4）如果以上都完成，就测试看看吧

注意：
添加全景的krpano 插件有一个小问题，就是在微信小程序中跳转的页面会提示“网页包含违法或违规内容，被多人投诉。。。。”, 这个问题我在苹果手机上没有遇到，但是安卓手机就有遇到

出现原因：

这个问题是由于KRPano项目中的webvr.js文件访问了远程的一个链接导致的：

https://d8d913s460fub.cloudfront.net/krpanocloud/webvr_localstorage.html?v=4

这个链接用来保存用户的webvr设置信息。

解决方案
1.在项目里找到plugins文件夹下的webvr.xml文件

2.删除webvr.loadsettings()即可

提示：删除webvr.loadsettings()将会导致用户无法保存和载入webvr配置信息，正常情况下，影响比较小。

这时候如果更新完webvr.xml 文件，小程序点击链接还是提示 “已停止访问该网页”，那是因为小程序缓存没有清，微信缓存最好也清一下，多试几次就可以了

谢谢大家

微信小程序添加全景实例相关推荐

微信小程序——添加广告
微信小程序--添加广告要想在微信小程序中加入广告,首先要在微信小程序后台开通流量主流量主需要满足:1.累计独立访问(uv)不低于1000:2.有严重违规的小程序不与开通. 广告主要有:banner ...
微信小程序添加插屏广告
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
如何在微信小程序添加漂流瓶_漂流在数海中
如何在微信小程序添加漂流瓶 This summer I helped a client automate several Excel sales reports, comparing sales fo ...
微信小程序SDK使用实例
介绍大家在做移动端应用开发的时候都会不满足于APP客户端,小程序的应用也越来越广泛了. 现在我们开发了一套kintone在微信小程序上的SDK.基于这个SDK大家就可以做适用于自己的微信小程序了. ...
微信小程序——添加按钮格式
微信小程序--添加按钮步骤一:在wxml文件中添加按钮代码(图后提供可复制代码) <button class = "button_cat">炸炸呼呼</butt ...
python操作微信小程序云端数据库_微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序...
微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序浏览量:1120 时间:2020-04-06
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法
微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法参考文章: (1)微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法 (2)https://www.cnblogs.com/ ...
微信小程序制作课程表_微信小程序实现课程表实例
前言感谢! 承蒙关照~微信小程序实现课程表实例效果图: 小程序代码如下 wxml: {{bj}} {{name}} 8:00 语文语文数学数学语文 9:00 语文语文数学数学语文 ...

微信小程序添加全景实例

微信小程序添加全景实例

微信小程序添加全景实例相关推荐

最新文章

热门文章