微信小程序点击弹出层怎么开发

　　很多人向小编询问关于微信小程序点击弹出层的开发方法，接下来小编就给大家带来了教程，参照教程就能进行小程序点击弹出层的开发了。

　　今天根据网上的教程搭建了微信小程序框架，然后看文档做了一个简单的小应用。

　　小程序项目的目录是这个样子的:

　　app.js、app.json、app.wxss是全局文件，必不可少的文件。定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。

　　app.js文件代码:

　　App({

　　onLaunch: function () {

　　console.log('小程序已启动')

　　},

　　onShow: function () {

　　console.log('小程序显示')

　　},

　　onHide: function () {

　　console.log('小程序隐藏')

　　},

　　globalData: {

　　hasLogin: false

　　}

　　})

　　app.json文件代码：

　　{

　　"pages": [

　　"page/first/first"

　　],

　　"window": {

　　"navigationBarTextStyle": "black",

　　"navigationBarTitleText": "我的第一个小程序",

　　"navigationBarBackgroundColor": "#fbf9fe",

　　"backgroundColor": "#fbf9fe"

　　},

　　"debug": true

　　}

　　app.json中pages起到设置页面路径的作用。

　　app.wxss是样式文件，就跟css文件一样，里面暂时就没写代码了，不影响。

　　然后是first文件夹下的文件

　　first.js文件是微信小程序逻辑文件，就好比是框架中的控制器;first.json是配置文件，一些文件的路径需要些在里面;first.wxml就好比是html文件;first.wxss就好比是html的css文件。

　　first.js文件代码：

　　var status = true;

　　Page({

　　toastShow: function(event) {

　　console.log("触发了点击事件，弹出toast")

　　status = false

　　this.setData({status:status})　　　　//setData方法可以建立新的data属*，从而起到跟视图实时同步的效果

　　},

　　toastHide:function(event){

　　console.log("触发bindchange，隐藏toast")

　　status =true

　　this.setData({status:status})

　　},

　　data:{

　　status:status　　　　　　　　　　　　//data里面的属*可以传递到视图

　　}

　　})

　　first.wxml文件代码：

　　点击弹出toast

　　这是toast

　　这是status的值:{{status}}

　　提示：

　　toast标签的duration属*说明：hidden设置false后，触发bindchange的延时，单位毫秒。在本应用中，点击了button后，触发bindtap的绑定事件toastShow：将status设置为false，也就是显示toast。随后过了3秒钟，触发了toast标签中bindchange的绑定事件toastHide，将status设置为true，也就是隐藏toast。

　　first.wxss文件代码：

　　.myStyle{

　　color:cyan;

　　text-align: center

　　}

　　微信小程序弹出loading层的两种方法：直接在代码里控制，在wxml文件里布局弹窗loading层，利用条件渲染，在js代码里控制是否显示loading层。

　　直接在代码里控制

　　js代码

　　showLoading:function(){

　　wx.showToast({

　　title: '加载中',

　　icon: 'loading'

　　});

　　},

　　cancelLoading:function(){

　　wx.hideToast();

　　}

　　在wxml文件里布局弹窗，利用条件渲染，在js代码里控制是否显示

　　文档地址:微信小程序商店

　　wxml代码

　　加载中

　　js

　　data: {

　　showLoading:true

　　},

　　showLoading:function(){

　　this.setData({

　　showLoading:true

　　})

　　},

　　cancelLoading:function(){

　　this.setData({

　　showLoading:false

　　})

　　看完以上资料，大家对于微信小程序点击弹出层的开发了解了吗?参照以上教程和相应的代码，相信大家在进行设置的时候都会觉得简单。

　　微信小程序浮动层弹出的方法

　　微信小程序弹出菜单怎么开发?

　　微信小程序弹出层的开发和使用