> 文档中心 > 怎么写-微信小程序的引导页

怎么写-微信小程序的引导页


微信小程序的引导页

前一段时间写了一个微信小程序的项目,其中就有引导页面这一功能模块,接下来给大家说一下这一块的怎么实现的以及一个思路吧!
在这里插入图片描述

一、引导页
下给大家康康效果图是啥样舍的呢!!

在这里插入图片描述
其实就是和轮播图差不多,就是当用户滑动到最后一页的时候显示跳转页面就完事了。

二、代码分析

第一步:先找到小程序目录下面的app.json然后在“pages”配置好页面

{"pages": ["pages/guidance/guidance", // 配置引导页面"pages/index/index",// 这是跳转以后的Home页面],}

这是在小程序的pages的目录里面就得到了

怎么写-微信小程序的引导页

第二步:接下来在guidance.json里面进行小程序页面header的配置

{  "usingComponents": {},  "navigationStyle": "custom"}
注释一下:Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。

第三步: 在guidance.wxml里面写代码 在这里我就把轮播也给大家分享一下

<swiper class="banner_box" bindchange="fike" indicator-dots="{{true}}" indicator-active-color='#fff'>    <swiper-item  class="img_b" wx:for="{{ banners }}" wx:key="id">     <image class="img_log" src="{{item.picUrl}}"></image>     </swiper-item>    </swiper><!-- button按钮  --><view class="skip" bindtap="skip"><!-- 可以更据guidance.js 下标判断到最后一页显示button按钮点击跳转  --><button bindtap="getIndex"  wx:if="{{ swiperCurrent+1 == swiperMaxNumber }}">跳过</button></view> 
注释:swiper:1、在小程序中只能当作滑块视图容器。2、其中只可放置swiper-item组件,否则会导致未定义的行为。bindchange:current 改变时会触发 change 事件,event.detail = {current, source}indicator-dots:是否显示面板指示点indicator-active-color='#fff':当前选中的指示点颜色swiper-item:仅可放置在swiper组件中,宽高自动设置为100%。
属性 类型 默认值 必填 说明
item-id string 该 swiper-item 的标识符

微信官方文档链接:https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html

第四步:是不是改写样式了

.banner_box {width: 100%;height: 100vh;position: relative;}.img_b,.img_log {width: 100%;height: 100%;}.skip{position: absolute;left: 0;right: 0;bottom: 86rpx;}button {width: 185rpx;height: 67rpx;font-size: 28rpx;line-height: 67rpx;background-color: #32CD32;color: #fff;}

第五步: js逻辑操作

// 这里是我当时引入的封装好的接口const wxapi = require('../../api/urls.js');// pages/guidance/guidance.jsPage({/** * 页面的初始数据 */data: {banners:[], // 轮播swiperCurrent: 0,  // 引导页的下标  0 swiperMaxNumber: 3  // 引导页的下标  3},fike(e) {this.setData({swiperCurrent: e.detail.current});},/** * 生命周期函数--监听页面加载 */onLoad: function (options) {var arr = [];// 在这里进行数据请求 wxapi.banners().then( res => {res = res.data;res.forEach(item =>{if (item.type == 'app') {arr.push(item)}});// 把数据更新到页面上this.setData({banners:arr})})},getIndex() {// wx.switchTab():跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,//这里的tabBar是底下的导航栏指定的页面,wx.switchTab({url:"/pages/index/index"})},})

accomplish

在这里插入图片描述
小程序的引导页 就写完了,大家那块还有疑惑可以在评论区进行留言,我会及时给大家进行答复。