微信小程序——首次使用显示“添加到我的小程序”

话不多说，先上代码

.wxml

<cover-view class = "guideBackground" wx:if = "{{isTiptrue}}">          <cover-view class = "guideInfo">    <cover-view class = "guideText"> 点击右上角 </cover-view>    <cover-view class = "curcleL"></cover-view>    <cover-view class = "curcleM"></cover-view>    <cover-view class = "curcleL"></cover-view>    <cover-view class = "guideText"> 添加到我的小程序 </cover-view></cover-view><cover-view class = "guideClose" bindtap = "closeGuide">    <cover-view class = "closeText"> × </cover-view>  </cover-view>
</cover-view>

.wxss

.guideBackground {  width: 80%;  height: 70rpx;  z-index: 99999;  position: fixed;  top: 0;  border-radius:35rpx;  margin-top: 20rpx;  margin-left: 10%;  margin-right: 10%;  background-color: rgba(22, 23, 24, 0.5);  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;
}.guideInfo {  width: 90%;  height: 100%;  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;
}
.guideClose {  width: 10%;  height: 100%;  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;
}
.closeText {  font-size: 100%;  color: white;  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;  width: 100%;
}
.guideText {  font-size: 80%;  color: white;  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;  margin-left: 20rpx; margin-right: 20rpx;
}
.curcleL {  height: 8rpx;  width: 8rpx;  border-radius: 4rpx;  background-color:white;
}
.curcleM {  height: 12rpx;  width: 12rpx;  margin-left: 8rpx;  margin-right: 8rpx;  border-radius: 6rpx;  background-color:white;
}

.js：将以下程序分别对应地添加到你的首页代码中

Page({data: {    // data中添加变量isTiptrue: true},onLoad: function () {// onLoad中添加以下代码let firstOpen = wx.getStorageSync("loadOpen")    if (firstOpen == undefined || firstOpen == '') { // 根据缓存周期决定是否显示新手引导      this.setData({ isTiptrue: true })    } else {      this.setData({ isTiptrue: false })    },// Page中添加关闭引导closeGuide: function (e) {    wx.setStorage({      key: 'loadOpen',      data: 'OpenTwo'    })    this.setData({ isTiptrue: false }) },})

效果预览

.
.
.
.
.
.
.
.
.
.
.
…
.
.
.

微信小程序——首次使用显示“添加到我的小程序”相关推荐

仿360安全桌面,管理应用程序,可自行添加自己喜欢的应用程序
主要思想就是: 1.Listview中large的显示(即应用程序的exe文件存放位置,单击即可执行): 2.所有添加应用程序的存储与读取,这里面是用简单的流文件进行存储应用程序的完整路径: 3.获取 ...
液晶12864汉字显示程序及显示顺序正常的C语言程序
嵌入式开发实践系列文章 - 目录https://zhangsz.blog.csdn.net/article/details/123701482 前言液晶12864显示汉字程序,调试发现两个汉字行中间 ...
小森生活显示无可用服务器,《小森生活》无可用游戏服务器解决教程无可用网关服务器怎么办...
导读小森生活无可用网关服务器是什么意思?怎么解决?小森生活无可用网关服务器这个提示在进入游戏中会出现哦,很多玩家都无法正常进入游戏怎么解决呢,现在就来告诉给大家详细解决方法吧~ 小森生活无可用游戏 ...
小蜜脚本显示服务器关闭了链接,小蜜脚本怎么老出现错误报告鼠标连点选中区域...
改变image的picture属性可实现画面的变化,利用move命令可实现画面的移动可以看出服务端发送FIN包距离上一个请求的时间大概是23秒,也就是AWS S3服务端的Keepalive时间大致为 ...
Java语言程序设计基础篇-第10版-第一部分-程序设计基础）
Java程序语言设计(基础篇)-第10版第一部分程序设计基础第1章计算机.程序和Java概述 1.1 引言程序设计就是创建(或者开发)软件,软件也称为程序. 简言之,软件包含了指令,告诉计算 ...
windows模拟微信小程序_Windows 版微信新版本内测！小程序可以直接添加到电脑桌面了...
微信小程序在手机端的体验已经非常流畅了.手机端小程序入口多,用户对应该在哪里找到小程序,怎样关闭小程序,怎样搜索小程序等问题都已经养成了自己的使用习惯.但换到电脑端来看,一切就全然不同. 「你收到了一 ...
微信公众号发送小程序卡片_微信公众号里怎么添加小程序-如何在微信[[公众号]]添加小程序卡片-微信关联小程序...
参考官方Demo 1.进入公众号,选择「关联小程序」后,微信公众号运营者用手机扫码进行认证,并输入小程序的AppID即可. 2.腾讯地图+小程序appID:wx7643d5f831302ab0 3. ...
微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称代码仓库地址一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序完成开发者注 ...
制作esp32-cam拍照上传，微信小程序照片显示的监控小车
前期配件准备 ESP32-CAM开发环境配置程序下载连接小车控制台查看图片微信小程序的开发 1.前期配件准备小车套件(网上购买即可,较为方便的选择) ESP32-CAM (推荐安信可,外加T ...

微信小程序——首次使用显示“添加到我的小程序”

微信小程序——首次使用显示“添加到我的小程序”相关推荐

最新文章

热门文章