微信小程序广告页源码，小程序广告弹窗页面开发

　　小程序广告页面一般是以弹窗的形式出现，但是开发者们对于微信小程序广告页的制作还不太了解，今天小编为大家带来了微信小程序广告页源码，希望能够对大家有所帮助。

　　小程序API接口如下：

　　从官方给出的代码示例来看，想当简单，就像一个asert，并不能看出弹窗的真实需求。所以今天小编就写了一个弹窗小程序教程，供大家学习参考。

　　首页我们先看一下动态的效果图：

　　点击进入弹窗演示页面

　　当然了，重点不在于此。index.wxml的代码如下：

　　弹窗标题

　　标题

　　标题

　　标题

　　标题

　　备注

　　确定

　　index.wxss的代码如下：

　　.btn {

　　width: 80%;

　　padding: 20rpx 0;

　　border-radius: 10rpx;

　　text-align: center;

　　margin: 40rpx 10%;

　　background: #000;

　　color: #fff;

　　}

　　/*mask*/

　　.drawer_screen {

　　width: 100%;

　　height: 100%;

　　position: fixed;

　　top: 0;

　　left: 0;

　　z-index: 1000;

　　background: #000;

　　opacity: 0.5;

　　overflow: hidden;

　　}

　　/*content*/

　　.drawer_box {

　　width: 650rpx;

　　overflow: hidden;

　　position: fixed;

　　top: 50%;

　　left: 0;

　　z-index: 1001;

　　background: #FAFAFA;

　　margin: -150px 50rpx 0 50rpx;

　　border-radius: 3px;

　　}

　　.drawer_title{

　　padding:15px;

　　font: 20px "microsoft yahei";

　　text-align: center;

　　}

　　.drawer_content {

　　height: 210px;

　　overflow-y: scroll; /*超出父盒子高度可滚动*/

　　}

　　.btn_ok{

　　padding: 10px;

　　font: 20px "microsoft yahei";

　　text-align: center;

　　border-top: 1px solid #E8E8EA;

　　color: #3CC51F;

　　}

　　.top{

　　padding-top:8px;

　　}

　　.bottom {

　　padding-bottom:8px;

　　}

　　.title {

　　height: 30px;

　　line-height: 30px;

　　width: 160rpx;

　　text-align: center;

　　display: inline-block;

　　font: 300 28rpx/30px "microsoft yahei";

　　}

　　.input_base {

　　border: 2rpx solid #ccc;

　　padding-left: 10rpx;

　　margin-right: 50rpx;

　　}

　　.input_h30{

　　height: 30px;

　　line-height: 30px;

　　}

　　.input_h60{

　　height: 60px;

　　}

　　.input_view{

　　font: 12px "microsoft yahei";

　　background: #fff;

　　color:#000;

　　line-height: 30px;

　　}

　　input {

　　font: 12px "microsoft yahei";

　　background: #fff;

　　color:#000 ;

　　}

　　radio{

　　margin-right: 20px;

　　}

　　.grid { display: -webkit-box; display: box; }

　　.col-0 {-webkit-box-flex:0;box-flex:0;}

　　.col-1 {-webkit-box-flex:1;box-flex:1;}

　　.fl { float: left;}

　　.fr { float: right;}

　　index.js的代码如下：

　　Page({

　　data: {

　　showModalStatus: false

　　},

　　powerDrawer: function (e) {

　　var currentStatu = e.currentTarget.dataset.statu;

　　this.util(currentStatu)

　　},

　　util: function(currentStatu){

　　/* 动画部分 */

　　// 第1步：创建动画实例

　　var animation = wx.createAnimation({

　　duration: 200, //动画时长

　　timingFunction: "linear", //线*

　　delay: 0 //0则不延迟

　　});

　　// 第2步：这个动画实例赋给当前的动画实例

　　this.animation = animation;

　　// 第3步：执行第一组动画

　　animation.opacity(0).rotateX(-100).step();

　　// 第4步：导出动画对象赋给数据对象储存

　　this.setData({

　　animationData: animation.export()

　　})

　　// 第5步：设置定时器到指定时候后，执行第二组动画

　　setTimeout(function () {

　　// 执行第二组动画

　　animation.opacity(1).rotateX(0).step();

　　// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象

　　this.setData({

　　animationData: animation

　　})

　　//关闭

　　if (currentStatu == "close") {

　　this.setData(

　　{

　　showModalStatus: false

　　}

　　);

　　}

　　}.bind(this), 200)

　　// 显示

　　if (currentStatu == "open") {

　　this.setData(

　　{

　　showModalStatus: true

　　}

　　);

　　}

　　}

　　})

　　以上就是微信小程序广告页源码了，参照微信小程序商店提供的教程和操作需要的代码，你就能开发一个小程序弹窗，具体的广告内容只要往里填充就好了。

　　微信小程序商店源码，微信小程序应用商店源码

　　微信小程序怎么领取优惠券?微信小程序优惠券源码

　　微信小程序自定义组件开发源码