微信小程序引导用户添加小程序动画页

1、实现效果

2.实现原理

2.1 动画效果

css动画：animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

设置上面三段内容不同的动画时长，最后一段文字动画时长最长。

.show_box .show_item:nth-child(1) {animation: fadeIn-left 1s;
}.show_box .show_item:nth-child(2) {animation: fadeIn-left 2s;
}.show_box .show_item:nth-child(3) {animation: fadeIn-left 3s;
}

动画效果为，从0到100的过程，可见度由0到1（opacity），translate3d 的x方向由-100%到0（transform）。

from {opacity          : 0;-webkit-transform: translate3d(-100%, 0, 0);transform        : translate3d(-100%, 0, 0);}to {opacity          : 1;-webkit-transform: translate3d(0, 0, 0);transform        : translate3d(0, 0, 0);}

2.2 判断是否弹框

wx.getStorageSync（‘key’）
wx.setStorageSync(“key”, value);需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象

当用户首次进入该小程序页面，弹出引导添加小程序，当用户点击‘记住了，我去试试’按钮时，存入一个key值到页面缓存中，当用户下一次进入时候，先判断缓存中是否有该key，若有key值不展示该引导弹框，反之提示用户。

3.实现代码

<view hidden="{{isShow}}"><view class="mask"></view><view class="show_box"><view class="flex show_item"><view class="box_index">1</view><view class="flex-row">点击右上角<view class="show_jiao flex-row"><view></view></view></view></view><view class="flex show_item"><view class="box_index">2</view><view>点击"添加到我的小程序"</view></view><view class="flex show_item"><view class="box_index">3</view><view>回到微信首页下拉列表中，找到我的小程序，打开苏苏的demo</view></view><view class="show_btn" catchtap="setEnter">记住了,我去试试</view></view>
</view>

.show_box {top       : 20%;position  : fixed;width     : 100%;z-index   : 1111;box-sizing: border-box;padding   : 30px;color     : #fff;font-size : 25rpx;
}.show_box .show_item {margin-bottom: 50rpx;
}.show_box .show_item:nth-child(1) {animation: fadeIn-left 1s;
}.show_box .show_item:nth-child(2) {animation: fadeIn-left 2s;
}.show_box .show_item:nth-child(3) {animation: fadeIn-left 3s;
}.show_box .show_jiao {border        : 1px dashed #fff;width         : 95rpx;height        : 40rpx;margin-left   : 20px;text-align    : center;vertical-align: top;border-radius : 20rpx;font-size     : 30px;
}.show_box .show_jiao view {width        : 13rpx;height       : 13rpx;background   : #fff;border-radius: 50%;box-shadow   : 22rpx 0rpx #fff, -22rpx 0 #fff;margin       : 0 auto;
}.show_box .box_index {font-size    : 20rpx;flex-shrink  : 0;color        : #fff;line-height  : 40rpx;width        : 40rpx;height       : 40rpx;text-align   : center;border-radius: 50%;background   : #e4a451;margin-right : 20rpx;
}.show_box .show_btn {border       : 1px dashed #fff;width        : 70%;animation    : fadeIn 7s;font-size    : 30rpx;line-height  : 72rpx;text-align   : center;border-radius: 44rpx;margin       : 12% auto 0 auto;color        : #fff;
}/* 动画 */@-webkit-keyframes fadeIn-left {from {opacity          : 0;-webkit-transform: translate3d(-100%, 0, 0);transform        : translate3d(-100%, 0, 0);}to {opacity          : 1;-webkit-transform: none;transform        : none;}
}@keyframes fadeIn-left {from {opacity          : 0;-webkit-transform: translate3d(-100%, 0, 0);transform        : translate3d(-100%, 0, 0);}to {opacity          : 1;-webkit-transform: translate3d(0, 0, 0);transform        : translate3d(0, 0, 0);}
}@-webkit-keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}/* 遮罩 */
.mask {position                   : fixed;z-index                    : 1000;top                        : 0;right                      : 0;left                       : 0;bottom                     : 0;background                 : rgba(0, 0, 0, .6);-webkit-transition-duration: .3s;transition-duration        : .3s;
}

Page({/*** 页面的初始数据*/data: {isShow: false},/*** 生命周期函数--监听页面加载*/onLoad(options) {let flag = wx.getStorageSync("hasEnter");if (flag) {this.setData({isShow: true})}},setEnter() {this.setData({isShow: true})wx.setStorageSync("hasEnter", true);},
})

4.更多小程序相关，关注公众号苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序引导用户添加小程序动画页相关推荐

c语言编程微信公众号图片直播,如何以图片的形式在微信公众号文章中添加小程序...
如何以图片的形式在微信公众号文章中添加小程序微信公众号中想要将自己的小程序也放进去,宣传宣传,该怎么添加?下面百分网小编带大家一起来看看详细操作教程,感兴趣的朋友一起学习吧!!!想了解更多相关信息请 ...
微信小程序弹出用户授权弹窗，微信小程序引导用户授权，获取位置经纬度
我们在开发小程序时,有些操作必须让用户授权.比如我们获取用户位置,需要用户授权位置信息.授权操作我们需要给用户弹窗提示,在用户禁用某些权限时,又要引导用户去设置页开启相应权限.我们这里就以获取经纬度为 ...
微信公众号发送小程序卡片_微信公众号里怎么添加小程序-如何在微信[[公众号]]添加小程序卡片-微信关联小程序...
参考官方Demo 1.进入公众号,选择「关联小程序」后,微信公众号运营者用手机扫码进行认证,并输入小程序的AppID即可. 2.腾讯地图+小程序appID:wx7643d5f831302ab0 3. ...
微信公众号文章/菜单添加小程序时路径如何获取？
公众号文章添加素材时或者在公众号菜单可以添加小程序了:添加后用户点击可以一键跳转小程序任何界面,小程序路径获取您可以前往天天外链把路径发送给天天外链即可快速获取小程序路径. 除了公众号文章以及公众号菜 ...
微信公众号消息如何添加小程序链接
一选择一个消息二输入信息内容然后三选择某个小程序估计是精确搜索,所以输入的小程序名称要全搜索并选择之后,会自动填充小程序的appid 选择小程序路径和填写跳转路径点击的文字,最后确定即可 ...
小程序引导用户下载APP
因为小程序里面是无法跳转第三方商店虽然可以实现跳转应用宝下载页(利用<web-view>可以实现跳转到下载该APP的应用宝地址,当用户点击普通下载时是没有问题的,当用户安装了应用宝,点击 ...
微信公众号计算机编程,微信公众号群发文章怎么添加小程序？-电脑教程
2017年4月20日微信发布公告称,微信公众平号群发文章支持添加小程序功能,这对于推广小程序来说,无疑是不错的途径.那么微信公众号群发文章怎么添加小程序?以下是华强电子网带来的详细教程. 微信公众号群 ...
微信公众号发送小程序卡片_微信公众号群发文章支持添加小程序卡片
2017年4月20日微信发布公告称,微信公众平号群发文章支持添加小程序功能,这对于推广小程序来说,无疑是不错的途径.那么微信公众号群发文章怎么添加小程序?下面爱站技术频道的小编带来的详细教程. 微信公 ...
php微信外卖多店点餐小程序,微信外卖点餐小程序怎么制作?按这个步骤来就行...
秋分已过,气温早已逐渐降温了,针对许多宅男宅女而言,又来到一个醒来靠胆量外出靠吸引力的季节,那么微信点餐就不可或缺了,因此,做餐馆的小伙伴们使用点餐小程序的话,就能吸引到大批的用户.那么微信外卖点餐小 ...

微信小程序引导用户添加小程序动画页

1、实现效果

2.实现原理

2.1 动画效果

2.2 判断是否弹框

3.实现代码

4.更多小程序相关，关注公众号苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序引导用户添加小程序动画页相关推荐

最新文章

热门文章

微信小程序引导用户添加小程序动画页

1、实现效果

2.实现原理

2.1 动画效果

2.2 判断是否弹框

3.实现代码

4.更多小程序相关，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序引导用户添加小程序动画页相关推荐

最新文章

热门文章

4.更多小程序相关，关注公众号苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！