微信小程序align_微信小程序自定义新用户引导界面

效果展示

Demo代码

wxml

          添加「海轰Pro」小程序 坚持每天学习              1点击右上角                    2点击“添加我的小程序”              3回到微信首页下拉聊天列表，              3从“我的小程序”里打开“海轰Pro”                                          我的小程序            海轰Pro                      我的小程序            小程序              记住了  我去试试测试界面

wxss

.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

//index.js//获取应用实例const app = getApp()Page({  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){    console.log("s")      wx.setStorage({        key: 'loadOpen',        data: 'OpenTwo'      })      this.setData({        isTiptrue:false      })    },})

备注 学习于 ： union.com/article-6554-1.html Demo源代码已同步微信小程序： 海轰Pro