微信小程序如何自定义新用户引导页
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38194393/article/details/89495786
根据不同的需求,现在出现了给小程序添加新用户引导页面。
设计流程:指引用户点击右上角,将本小程序添加到我的小程序。点击“去试试”后不再显示。前提是新用户或者首次打开。
设计图:
实现步骤:
1》思路:在小程序首页生命周期函数中,加入条件判断。在用户点击【记住了,我去试试】事件上增加缓存信息。
2》用这个缓存在用户每次打开小程序的时候来判断是否显示
页面的代码:
<view class='page-cont'> <view class='top'> <image src='{{cdnPath}}img/firstOpen/topjiantou.png'></image> <view class='p_one'>添加友途车服小程序,解决更多养车问题</view> </view> <view class='cont'> <view class='cont-p'> <view class='text'><text>1</text></view><view>点击右上角</view> <image src='{{cdnPath}}img/firstOpen/more@2x.png'></image> </view> <view class='cont-p'> <view class='text'><text>2</text></view><view>点击“添加我的小程序”</view> </view> <view class='cont-p'> <view class='text'><text>3</text></view><view>回到微信首页下拉聊天列表,</view> </view> <view class='cont-p-lib'> <view class='text' style='opacity:0;'><text>3</text></view><view>从“我的小程序”里打开“友途车服VIP”</view> </view> <view class='cont-p-three'> <image src='{{cdnPath}}img/firstOpen/jiantou.png'></image> <view class='right' style='background:url({{cdnPath}}img/firstOpen/bg.png) no-repeat center; background-size: 100% 100%;'> <view class='left-p'> <view class='title'>我的小程序</view> <image src='{{cdnPath}}img/firstOpen/logo@2x.png'></image>友途车服VIP</view> <view class='left-p'> <view class='title' style='opacity:0;'>我的小程序</view> <view style='color:#4C4C4E;width:27px;height:27px;border-radius:50%;background:#4C4C4E;'></view>小程序</view> </view> </view> </view> <view class='bottom' bindtap='closeThis'>记住了 我去试试</view> </view>
样式代码:
.page-cont,.shadow-box{ position: fixed; width: 100%; height: 100%; left: 0; right: 0; bottom: 0; z-index: 99999; background-color: rgba(22, 23, 24, 0.5); } .page-cont .top{ width:100%; display:flex; flex-direction: column; } .page-cont .top image{ width:32px; height:41px; margin:4% 0 4% 77%; } .page-cont .top .p_one{ float:right; width:80%; font-size:28rpx; line-height:72rpx; color:#fff; background:#27C084; text-align:center; border-radius:34rpx; margin: 0 0 0 15%; } .page-cont .cont{ width:100%; margin-top:30rpx; display:flex; flex-direction:column; } .page-cont .cont .cont-p{ width:80%; margin-left:5%; margin-top:30rpx; display:flex; color:#fff; font-size:30rpx; line-height:72rpx; } .page-cont .cont .cont-p .text{ color:#fff; font-size:30rpx; line-height:40rpx; width:40rpx; height:40rpx; text-align:center; border-radius:50%; background:#27C084; margin-right:20rpx; margin-top:16rpx; display:flex; flex-direction:column; } .page-cont .cont .cont-p image{ width:41px; height:28px; margin:8rpx 0 0 20rpx; border:1px dashed #fff; } .page-cont .cont .cont-p-lib{ width:90%; margin-left:5%; display:flex; color:#fff; font-size:30rpx; } .page-cont .cont .cont-p-lib .text{ color:#fff; font-size:30rpx; line-height:40rpx; width:40rpx; height:40rpx; text-align:center; border-radius:50%; background:#27C084; margin-right:20rpx; margin-top:16rpx; display:flex; flex-direction:column; } .page-cont .cont .cont-p-three{ width:80%; margin-left:10%; margin-top:30rpx; display:flex; align-items: center; color:#fff; font-size:30rpx; line-height:72rpx; } .page-cont .cont .cont-p-three image{ width:41px; height:32px; margin-right:20rpx; } .cont-p-three .right{ width:120px; height:79px; border:1px dashed #fff; display:flex; text-align:center; } .cont-p-three .right{ font-size:18rpx; line-height:46rpx; color:#FFF; } .cont-p-three .right .left-p{ display:flex; flex-direction: column; flex:1; text-align:center; align-items:center; } .cont-p-three .right .left-p image{ width:27px; height:27px; } .page-cont .bottom{ width:60%; font-size:30rpx; line-height:72rpx; text-align:center; border-radius:44rpx; border:1px solid #fff; margin:10% auto 0 auto; color:#fff; }
JS中的主要代码:
data:{ isTiptrue: true, }, onLoad: function (query) { let firstOpen = wx.getStorageSync("loadOpen") console.log("是否首次打开本页面==",firstOpen) if (firstOpen == undefined || firstOpen == '') { //根据缓存周期决定是否显示新手引导 this.setData({ isTiptrue: true, }) } else { this.setData({ isTiptrue: false, }) } }, closeThis(e){ wx.setStorage({ key: 'loadOpen', data: 'OpenTwo' }) this.setData({ isTiptrue:false }) },
版权声明:本文为CSDN博主「沉默的小猴子」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_38194393/article/details/89495786
今日事今日毕