微信小程序添加全景实例

微信小程序添加全景实例

你好！ 也许这是你第一次想在小程序添加全景，也有可能不是第一次。但是本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. 配置服务器域名
2. 配置业务域名
   注意：
   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 文件，小程序点击链接还是提示 “已停止访问该网页”，那是因为小程序缓存没有清，微信缓存最好也清一下，多试几次就可以了

谢谢大家