超详细,wepy小程序如何引入第三方插件wxPano

微信官方地址：wxPano | 小程序插件 | 微信公众平台

效果在最下面！

第一步：

在微信小程序管理后台拉到最下面，设置——第三方服务——添加插件输入wxPano

第二步：在app.wpy中添加

 plugins: {wxPano: {version: '2.1.4',provider: 'wx386c038238531f87',},},

注意：添加完成后小程序开发工具会出现添加了一个插件信息

第三步：在需要使用的页面中添加

usingComponents: {pano: 'plugin://wxPano/pano',},

var wxPano = requirePlugin('wxPano')

这里是重案例拷贝过来的,下面照样贴下代码就ok了

 <template>
<view><pano panolist="{{panolist}}" entryid="{{entrypanoid}}" entryname="{{entrypanoname}}" width="320" height="240" key="{{key}}" autoinit="{{false}}"><cover-view style="position: fixed;top:80%;width:100%;text-align:center;"><cover-view style="width:50%;text-align:center;float:left;" bindtap="covertap">跳转全景图</cover-view><cover-view style="width:50%;text-align:center;float:left;" bindtap="setCameraLookAt">切换视角</cover-view><cover-view style="width:50%;text-align:center;float:left;" bindtap="enableTouch">打开触摸</cover-view><cover-view style="width:50%;text-align:center;float:left;" bindtap="disableTouch">关闭触摸</cover-view><cover-view style="width:50%;text-align:center;float:left;" bindtap="getPanoInfo">获取当前全景信息</cover-view></cover-view></pano>
</view>
</template>

var wxPano = requirePlugin('wxPano')
export default class CaseDetail extends wepy.page {config = {usingComponents: {pano: 'plugin://wxPano/pano',},}components = {}mixins = []data = {krpanoList: ['https://game.flyh5.cn/resources/game/wechat/szq/krpano/krpano_01.jpg','https://game.flyh5.cn/resources/game/wechat/szq/krpano/krpano_02.jpg','https://game.flyh5.cn/resources/game/wechat/szq/krpano/krpano_03.jpg','https://game.flyh5.cn/resources/game/wechat/szq/krpano/krpano_04.jpg',],}onReady() {wxPano.onReady = function() {//wxPano初始化完成后会触发此事件}wxPano.config({panolist: [{name: 'xindamen',src: 'https://www.aiotforest.com/pano2048-1024.jpg',infospots: [//信息标记{type: 'modal',modal: {title: 'wxPano',content: '欢迎使用wxPano',},position: { x: 0.092, y: 0.434 },size: 1,icon: 'info',bindcamera: true,bindsize: 0.5,bindicon: 'info',bindopacity: 0.75,bindposition: { x: 0.5, y: 0.75 },},{type: 'page',page: function() {wx.navigateTo({url: 'ar',success(evt) {console.log(evt)},})},position: { x: 0.437, y: 0.447 },size: 1,icon: 'info',},],},],request: wx.request,loader: 'GLLoader',entryname: 'xindamen',})
}
//---------------------------------------------covertap() {var panoId = wxPano.addPano({name: 'dongdamen',src: 'https://www.aiotforest.com/pano-1-2048-1024.jpg',infospots: [{type: 'pano',entryname: 'xindamen',position: { x: 0.695, y: 0.503 },size: 1,icon: 'arrow',},{type: 'modal',modal: {title: '东大门',content: '对面有公交站和唐家湾轻轨站',},position: { x: 0.092, y: 0.434 },size: 1,icon: 'info',},],})wxPano.navigateMethod({type: 'pano',entryname: 'dongdamen',})}setCameraLookAt() {wxPano.setCameraLookAt({x: 0.5,y: 0.5,})}enableTouch() {wxPano.enableTouch()}disableTouch() {wxPano.disableTouch()}getPanoInfo() {console.log(wxPano.getPanoInfo())}

效果如图：

超详细,wepy小程序如何引入第三方插件wxPano相关推荐

组件的生命周期，小程序如何引入第三方ui框架
笔记组件开发的三要素 properties //相当于vue中的props接收属性 triggerEvent//相当于vue中是$emit slot//和vue是类似的slot 1.可以通关slot ...
[超详细]微信小程序使用iconfont教程及解决真机无法显示问题
1.在iconfont官网创建自己的项目选择自己需要的图标加入'购物车',然后在'购物车'页面点击添加至项目,没有项目的话点击新建项目. 2.把我的项目下载到本地,复制小程序项目中并引用我的项目入 ...
超详细微信小程序自定义组件
一.创建组件 1.在根目录下自定义一个components文件夹,用来存放自定义的组件. 2.再针对每一个组件创建一个文件夹,用来存放这个组件相关的文件. 3.在指定组件的文件夹中右键->新建C ...
小程序服务商申请入口_[小程序开发服务商]第三方小程序（服务商）｜微信开放文档...
# 第三方微信小程序(服务提供商) 微信企业版的第三方服务提供商还可以开发小程序并关系到第三方应用,公布以后就可以让公司受权安裝并应用第三方微信小程序的登陆步骤与公司建造运用一些差别,关键差别是js ...
快手小程序计划引入三方服务商：服务开发者需超过10人
快手电商推出跟播助手精准流量匹配模式新榜讯 5月25日,快手电商上线跟播助手精准流量匹配模式,平台算法会根据跟播助手-待上车列表的下三个商品匹配对应流量至直播间,以帮助上车对应商品承接精准流量,提升 ...
快速入门 WePY 小程序
一.WePY介绍 WePY 是腾讯参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性. 二.WePY 使用 1.WePY的安装或更新都 ...
msp430流水灯c语言程序,超详细msp430示例程序汇编.doc
超详细msp430示例程序汇编一.基础_实验[10个] 1.入门试验:LED闪烁(1个) 2.时钟实验:设置MCLK.ACLK.SMCLK(1个) 3.低功耗实验:设置低功耗模式(1个) 4.IO端 ...
PHP使用weui,微信小程序WeUI引入
引入组件通过 useExtendedLib 扩展库的方式引入 1.报错Component is not found in path "miniprogram_npm/weui-minip ...
uniapp开发小程序，引入腾讯兔小巢插件，兔小巢页面导航头部样式错乱问题
uniapp开发小程序,引入腾讯兔小巢插件,导航头部样式错乱问题 uniapp开发小程序,引入腾讯兔小巢插件,导航头部样式错乱问题 uniapp开发微信小程序,所有页面头部导航都是自定义的,引入腾讯兔 ...

超详细,wepy小程序如何引入第三方插件wxPano

微信官方地址：wxPano | 小程序插件 | 微信公众平台

效果在最下面！

第一步：

在微信小程序管理后台拉到最下面，设置——第三方服务——添加插件输入wxPano

第二步：在app.wpy中添加

注意：添加完成后小程序开发工具会出现添加了一个插件信息

第三步：在需要使用的页面中添加

这里是重案例拷贝过来的,下面照样贴下代码就ok了

效果如图：

超详细,wepy小程序如何引入第三方插件wxPano相关推荐

最新文章

热门文章