版權(quán)聲明:本文為博主原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接和本聲明。
本文鏈接:https://blog.csdn.net/qq_38194393/article/details/89495786
根據(jù)不同的需求,現(xiàn)在出現(xiàn)了給小程序添加新用戶引導頁面。
設計流程:指引用戶點擊右上角,將本小程序添加到我的小程序。點擊“去試試”后不再顯示。前提是新用戶或者首次打開。
設計圖:
實現(xiàn)步驟:
1》思路:在小程序首頁生命周期函數(shù)中,加入條件判斷。在用戶點擊【記住了,我去試試】事件上增加緩存信息。
2》用這個緩存在用戶每次打開小程序的時候來判斷是否顯示
頁面的代碼:
<view class='page-cont'><view class='top'><image src='{{cdnPath}}img/firstOpen/topjiantou.png'></image><view class='p_one'>添加友途車服小程序,解決更多養(yǎng)車問題</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 == '') { //根據(jù)緩存周期決定是否顯示新手引導this.setData({isTiptrue: true,})} else {this.setData({isTiptrue: false,})}},closeThis(e){wx.setStorage({key: 'loadOpen',data: 'OpenTwo'})this.setData({isTiptrue:false})},
版權(quán)聲明:本文為CSDN博主「沉默的小猴子」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_38194393/article/details/89495786
聯(lián)系客服