原生微信小程序实现导航漫游（Tour）

效果：

小程序实现导航漫游

1、组件

miniprogram/components/tour/index.wxml

<!--wxml-->
<view class="guide" wx:if="{{showGuide}}"><view style="{{guideStyle}}" class="guide-box"><view class="tips guide-step-tips" style="{{tipPosition}}"><view class="text">{{ guideList[index].tips }}</view><view class="step-indicator"><text class="step-text">{{index + 1}}/{{guideList.length}}</text></view><view class="tool-btn"><text bind:tap="skip">跳过</text><view class="btn-group"><view class="prev" bind:tap="prev" wx:if="{{index > 0}}">上一步</view><view class="next" bind:tap="next">{{index === guideList.length - 1 ? '完成' : '下一步'}}</view></view></view></view><view class="arrow" style="{{arrowTop}}"></view></view><!-- 遮罩层，防止点击 --><view class="v-model"></view>
</view>

miniprogram/components/tour/index.ts 

// components/xky-guideStep/xky-guideStep.jsimport { handleChangeTourType } from "@/utils/util";// 添加必要的接口定义
interface GuideItem {el: string;width: number;height: number;left: number;top: number;style?: string;
}interface Step {name: string;guideList: GuideItem[];
}interface DomInfo {width: number;height: number;left: number;top: number;[key: string]: any;
}Component({/*** 组件的属性列表*/properties: {step: {type: Object,value: {} as Step,},},/*** 组件的初始数据*/data: {stepName: "step", //该提示步骤的名称，用于不在重复展示guideList: [] as GuideItem[],index: 0, // 当前展示的索引showGuide: true, // 是否显示引导guideStyle: "", // 默认样式arrowTop: "", //步骤提示三角形的定位tipPosition: "", //步骤提示的定位systemInfo: null as WechatMiniprogram.SystemInfo | null, //屏幕宽度高度等信息tipWidth: 200, //步骤提示默认的宽度},/*** 组件的方法列表*/methods: {// 展示新手提示viewTips(data: DomInfo | null, scrollTop: number) {let {systemInfo,tipWidth,index,guideList,arrowTop,tipPosition,guideStyle,} = this.data;if (data && systemInfo) {// 如果dom宽度大于或者等于窗口宽度,需要重新调整dom展示宽度let newWidth = systemInfo.windowWidth - 20;if (data.width >= newWidth) {data.width = newWidth;}// 如果距离左边为0,自动增加一点左边距if (data.left == 0) {data.left = 10;}let domRW = systemInfo.windowWidth - data.left;let left = 0;// 如果dom距离右边没有tips的宽度大的话,就要让tips向左便宜if (domRW < tipWidth) {left = domRW - tipWidth - 30;}// const index = index;// 步骤条展示的高度需要加上屏幕滚动的高度data.top += scrollTop;// 根据实际情况需要滚动到展示区域wx.pageScrollTo({scrollTop: data.top > 20 ? data.top - 20 : 0,duration: 100,});let obj = Object.assign(guideList[index], data);// 设置三角形高度let arrArrowTop = data.height + 9;arrowTop = "top:" + arrArrowTop + "px;";// 设置提示框定位tipPosition = "top:" + (arrArrowTop + 5) + "px;left:" + left + "px;";// 重新设置guideList的值guideList.splice(index, 1, obj);guideStyle = this.getStyle();this.setData({arrowTop,tipPosition,guideList,guideStyle,});} else {index += 1;this.setData({index,});this.getDomInfo();}},// 获取步骤提示的主要样式getStyle() {const { guideList, index } = this.data;const { width, height, left, top, style } = guideList[index];let newStyle = "width:" + width + "px;";newStyle += "height:" + height + "px;";newStyle += "left:" + left + "px;";newStyle += "top:" + top + "px;";newStyle +="box-shadow: rgb(33 33 33 / 80%) 0px 0px 0px 0px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px;";newStyle += style;return newStyle;},// 获取dom信息getDomInfo() {const { guideList, index } = this.data;const { el } = guideList[index];const query = wx.createSelectorQuery();setTimeout(() => {query.select(el).boundingClientRect();query.selectViewport().scrollOffset();query.exec( (res)=> {let data = res[0]; // #the-id节点的上边界坐标let scrollTop = res[1].scrollTop; // 显示区域的竖直滚动位置this.viewTips(data, scrollTop);});}, 10);},updateTourMap() {handleChangeTourType(this.data.stepName)},skip() {this.setData({showGuide: false,});this.updateTourMap()},// 添加上一步方法prev() {let { index } = this.data;if (index > 0) {index -= 1;this.setData({index});this.getDomInfo();}},// 下一步，修改显示文案next() {let { index, guideList } = this.data;if (index === guideList.length - 1) {this.setData({showGuide: false,});this.updateTourMap()} else {index += 1;this.setData({index,});this.getDomInfo();}},},lifetimes: {attached () {const { step } = this.properties;let { guideList, stepName } = this.data;guideList = step.guideList;stepName = step.name;this.setData({guideList,stepName,systemInfo: wx.getSystemInfoSync(),});const guide = wx.getStorageSync('tourMap');if (!guide || !guide[step.name]) {this.getDomInfo();} else {this.setData({showGuide: false,});}},detached () {// 在组件实例被从页面节点树移除时执行},},
});

miniprogram/components/tour/index.scss 

/* wxss */
.v-model {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 1000;
}
.guide {z-index: 1001;
}
.guide-box {position: absolute;z-index: 10001;transition: all 0.2s;}
.guide-box::before {content: '';height: 100%;width: 100%;border: 1px dashed #fff;border-radius: 8rpx;position: absolute;top: -8rpx;left: -8rpx;padding: 7rpx;
}
.arrow {height: 20rpx;width: 20rpx;background: #1cbbb4;position: absolute;top: 144rpx;left: 45%;transform: rotate(45deg);
}
.tips {width: 400rpx;background: linear-gradient(180deg, #1cbbb4, #0081ff);box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1);color: #fff;position: absolute;top: 152rpx;left: -50%;padding: 15rpx 20rpx;font-size: 28rpx;border-radius: 12rpx;
}
.tool-btn {display: flex;justify-content: space-between;align-items: center;padding-right: 0rpx;margin-top: 20rpx;
}/* 新增样式 */
.step-indicator {display: flex;justify-content: flex-end;margin-top: 10rpx;
}
.step-text {font-size: 24rpx;color: rgba(255, 255, 255, 0.8);
}
.btn-group {display: flex;align-items: center;
}
.prev {background: rgba(255, 255, 255, 0.2);height: 48rpx;width: 100rpx;text-align: center;border-radius: 8rpx;color: #fff;line-height: 48rpx;font-size: 24rpx;margin-right: 10rpx;
}
.next {background: #fff;height: 48rpx;width: 100rpx;text-align: center;border-radius: 8rpx;color: #666;line-height: 48rpx;font-size: 24rpx
}

miniprogram/components/tour/index.json 

{"component": true,"usingComponents": {}
}

miniprogram/utils/util.ts

/** 修改本地的Tour状态 */
export const handleChangeTourType = (tourName: string) => {const tourMap = wx.getStorageSync('tourMap') || {};tourMap[tourName] = true;wx.setStorageSync('tourMap', tourMap);
};

部分转载：微信小程序首次进入引导提示自定义组件-CSDN博客