微信小程序的引导页代码如何实现?

微信小程序开发教程分享】在做小程序开发的过程中会遇到各种各样的问题,其中就有引导页面这一功能模块,接下来小编给大家分享下这一块怎么实现的以及一个思路吧!

一、引导页

下面给大家看看效果图是啥样的呢!

<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>的引导页代码如何实现?

其实就是和轮播图差不多,就是当用户滑动到最后一页的时候显示跳转页面就是了。

二、代码分析

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

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

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

<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>的引导页代码如何实现?

第二步:接下来在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.js
Page({
	/**
	 * 页面的初始数据
	 */
	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
 

到此这篇关于微信小程序的引导页实现代码的文章就介绍到这了,更多相关微信小程序的引导页内容,请搜索我们以前的文章或继续浏览相关文章,希望大家以后多多支持我们!

 

来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:如何轻松玩转微信小程序的拖拽功能?这      下一篇:很抱歉没有了