微信小程序总结（下）

上文请参照 https://blog.****.net/weixin_43917993/article/details/86360285
我们接着总结~

八、生命周期

• 在app.js中定义了一些生命周期的方法
  
• 在page中定义的生命周期方法
  
• 打开小程序后会依次执行onLoad，onReady和onShow方法。前后台切换会分别执行onHide和onShow方法。
  当小程序页面销毁时会执行 onUnload方法

九、弹窗

• 显示消息提示框

    wx.showToast({
        title: '弹窗标题', //弹窗的标题
        icon: 'success', //默认的图标，如果定义image则不显示默认。支持"success","loading"
        image: '../warn.png',  //自定义的图标
        duration: 2000,  //持续的时间
        success:function(){},  //接口调用成功
        fail:function(){},  //接口调用失败
        complete:function(){}  //接口调用结束
    })
    // 若显示图标，则 title 文本最多显示7个汉字长度。若不显示图标，则 title 文本最多可显示两行

• 关闭消息提示框

    wx.hideToast()

• 显示模态框

    wx.showModal({ 
    title: '删除图片', 
        content: '确定要删除该图片？', 
        showCancel: true,  //是否显示取消按钮 
        cancelText:"否",  //默认是“取消” 
        cancelColor:'skyblue',  //取消文字的颜色 
        confirmText:"是",  //默认是“确定” 
        confirmColor: 'skyblue',  //确定文字的颜色 
        success: function (res) { 
            if (res.cancel) {   //点击取消,默认隐藏弹框 
            } else {   //点击确定 
            } 
        }, 
        fail: function (res) { },  //接口调用失败的回调函数 
        complete: function (res) { },  //接口调用结束的回调函数（调用成功、失败都会执行） 
    })

• 显示操作菜单

    wx.showActionSheet({ 
        itemList: ['列1','列2','列3'],  //显示的列表项 
        success: function (res) {  //res.tapIndex点击的列表项 
        }, 
        fail: function (res) { }, 
        complete:function(res){ } 
    })

十、loading

• 显示loading

    wx.showLoading({
        title:'加载中',  //提示的内容
        mask:false,  //是否显示透明蒙层，防止触摸穿透
        success(){}, //成功的回调函数，es6写法
        fail(){}, //失败的回调函数
        complete(){}  //调用结束的回调函数
    })

• 关闭loading

    wx.hideLoading();

十一、下拉刷新

• 在配置文件里加上

    {
        "enablePullDownRefresh": true, //开启下拉刷新
        "backgroundColor": "#f0145a" //设置背景颜色，如果不设置背景颜色，就看不见下拉刷新的加载动画了，因为加载动画和背景色颜色一样
    }

• 下拉刷新的函数

    onPullDownRefresh() {
        wx.showNavigationBarLoading() //在标题栏中显示加载
    }

• 停止下拉刷新

  wx.stopPullDownRefresh()  

十二、发送请求

• 一般写法，更详细的请参照官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/wx.request.html

    wx.request({
        url: 'test.php', // 仅为示例，并非真实的接口地址
        data: {
            x: '',
            y: ''
        },
        header: {
            'content-type': 'application/json' // 默认值
        },
        success(res) {
            console.log(res.data)
        }
    })

• 在这里说明一种规范，所有的请求应该写在某一个文件里，这样便于测试和修改。
• 例如，app.js文件是管理全局的一个文件，我们就在app.js中先定义一个常量，作为所有请求的共用部分

    const basePath="https://www.baidu.com/"
    //再定义一个全局的json，用来配置具体的请求
    App({
        globalData:{
            login:basePath+"common/login"
        }
    })

这样定义就完成了，接下来是在具体的请求中调用（ .js 文件）

    const app = getApp();
    Page({
        onShow(){
            wx.request({
            url: app.globalData.login, // 调用app.js中的值
            data: {
                x: '',
                y: ''
            },
            header: {
                'content-type': 'application/json' 
            },
            success(res) {
                console.log(res.data)
            }
            })
        }
    })