小程序实例制作微信-微信小程序添加全景实例-微信小程序实例-即速应用

小程序实例制作微信-微信小程序添加全景实例-微信小程序实例

浏览量：2216 时间：2020-03-20 来源：莫小闲H

微信小程序添加全景实例
1.你好！也许这是你第一次想在小程序添加全景，也有可能不是第一次。但是本Girl添加全景有着很深的印象，特意用文章记录下来，方便自己记住，下面就来了解本Girl添加全景的惨痛经历吧。
2.本Girl在小程序添加实景，是利用微信小程序跳转外链web-view用法来实现的，当然很多网友这时候会想，怎么不是直接写在小程序里面的，当然，我也很想写在小程序里面，但是本Girl不是大神，所以只能外链了。所以能参考的就参考，参考不了的本Girl也是无能为力了。
3.步骤一（应该准备的东西）
4.（1）Krpano全景插件可以去官网看看：http://www.krpano360.com/
5.（2）服务器（需https）利用插件，合成全景场景以后，需要上传到服务器上，并且是https，因为小程序在线上的版本都是需要使用https的请求，http的使用只能在本地调试环境中使用
6.（3）小程序开发工具初步建立简单的小程序页面，页面中添加web-view标签，如下。web-view会自动占满整个页面，所以别妄想放点什么标题之类的东西了。src的链接就写你全景场景的https链接就可以了
viewclass="page-sectionpage-section-gap"web-viewsrc="http://yizhiyilai.cn/vtour/tour.html"/web-view/view
7.（4）小程序公众平台后台配置
配置服务器域名配置业务域名注意：1.个人和海外类型小程序没有办法对接web-view2.要使用小程序的web-view进行外链接H5，一定要配置业务域名（一定得配置，不配置不行），不然会报以下错误，如图
8.（4）如果以上都完成，就测试看看吧
9.注意：添加全景的krpano插件有一个小问题，就是在微信小程序中跳转的页面会提示“网页包含违法或违规内容，被多人投诉。。。。”,这个问题我在苹果手机上没有遇到，但是安卓手机就有遇到
10.
11.出现原因：
12.这个问题是由于KRPano项目中的webvr.js文件访问了远程的一个链接导致的：
13.https://d8d913s460fub.cloudfront.net/krpanocloud/webvr_localstorage.html?v=4
14.这个链接用来保存用户的webvr设置信息。
15.解决方案1.在项目里找到plugins文件夹下的webvr.xml文件
16.2.删除webvr.loadsettings()即可
17.提示：删除webvr.loadsettings()将会导致用户无法保存和载入webvr配置信息，正常情况下，影响比较小。
18.这时候如果更新完webvr.xml文件，小程序点击链接还是提示“已停止访问该网页”，那是因为小程序缓存没有清，微信缓存最好也清一下，多试几次就可以了
19.谢谢大家