微信官方地址：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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。