小程序api（生命周期函数基础 api的交互 api路由 数据的修改与渲染 ）3月27日

今天学习了小程序的api基础，具体就是小程序的声明周期函数，api交互（消息框，对话框），api的路由，还有基础数据的渲染，修改。

周期函数

. onLoad 每次加载页面都会调用
. onReady 初次渲染的时候调用 之后再加载时就不会调用
. onHide 页面转入后台时调用
. onUnload 页面卸载时调用 意思就是长时间再后台进程杀死后

• 这里讲一下前后台 区别于通常程序员分类的前后天，小程序这里的前台就是展示的页面，后台就是关闭后保留在后台进程中

API交互

. wx.showToast 显示消息提示框

wx.showToast({
            //提示的内容
            title: '今天一天好心情！！',
            //提示框显示的图标  默认success 有loading none
            icon: 'loading',
            //自定义图标的本地路径，优先级高于title
            image: 'cry.png',
            duration: 6000,
            success() {
                setTimeout(function () {
                    wx.hideToast()
                }, 1000)
            }
        })

. wx.showModal 显示模态对话框

wx.showModal({
            title: '提示',
            content: '这是一个模态弹窗',
            // 是否显示取消按钮  默认显示  false的话就是一个确认按钮
            showCancel: true,
            cancelText: '去掉',
            cancelColor: '#33ddff',
            confirmText: 'sure',
            confirmColor: '#000000',
            success(res) {
                if (res.confirm) {
                    console.log('用户点击确定')
                } else if (res.cancel) {
                    console.log('用户点击取消')
                }
            }
        })

. wx.showLoading 显示加载框 必须与hideLoading同时使用

wx.showLoading({
            title: '加载中',
            success() {
                setTimeout(function () {
                    wx.hideLoading()
                }, 1000)
            },
        })

. wx.showActionSheet 显示操作栏

wx.showActionSheet({
            itemList: ['A', 'B', 'C'],
            success(res) {
                console.log(res.tapIndex)
            },
            fail(res) {
                console.log(res.errMsg)
            }
        })

路由

. wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab({
             url: '../index/index'
         })
        //需要在全局app.josn中新建tabbar
        "tabBar": {
        "list": [
            {
                "pagePath": "pages/1/1",
                "text": "首页"
            },
            {
                "pagePath": "pages/index/index",
                "text": "其他"
            }
        ]
    }

. wx.reLaunch 关闭所有页面返回到应用的某个页面

wx.reLaunch({
            url: '4'
        })

. wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.redirectTo({
            url: '4'
        })

. wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。

wx.navigateTo({
         url: '2',
     })
//在应用内在新建3个页面分别为2 3 4  然后在每个页面设置忘下一个页面跳转  在最后一页跳转到前3层 也就是第一层
setTimeout(function () {
            wx.navigateBack({
                delta: 3
            })
        }, 2000)

数据修改与渲染

. this.setData 小程序中的数据是单向绑定的，意思就是this.data只能读取，this.setData才能修改

this.setData({
        name: 'jiji'
    })

. wx:if 标签内的判断
. wx:for 循环

<view wx:if="{{ title }}">{{ title }} 有{{ number }}讲师</view>
<!-- wx:for是循环 -->
<!-- <view wx:for="{{ teacher }}" wx:key="">
    <view>-----------------------</view>
    <view>编号：{{ item.id }}</view>
    <view>姓名：{{ item.name }}</view>
    <view>年龄：{{ item.age }}</view>
</view> -->
<!-- 循环出来的元素item可以用wx:for-item改名字 index下标的名字也可以该  改他们的意义在于为了和下面的循环不重名 解决变量污染的问题 -->
<view wx:for="{{ teacher }}" wx:key="" wx:for-item="jj" wx:for-index="kk">
    <view>-----------------------</view>
    <view>编号：{{ jj.id }} 下标：{{ kk }}</view>
    <view>姓名：{{ jj.name }}</view>
    <view>年龄：{{ jj.age }}</view>
</view>