框架

框架中封装好的可以直接使用的内置函数

Page()函数

作用:	注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等

参数:	Object对象
	data属性,作为页面的初始数据状态
    onShareAppMessage()方法 分享功能

示例代码

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

Page({
    // 响应式数据
    data: {
        text: 'init data',
        array: [{msg: '1'}, {msg: '2'}]
    }
    // 方法
    changeText(){
    	console.log(window) // 这种写法是错误的,没有window
    	console.log(this) // this指向指向当前页面的配置对象(Page函数体内部对象)
	}
})

分享钩子

onShareAppMessage()

用于分享功能

执行时机:系统左上角的三个点分享

分享功能,在页面,点击右上角的三个角时触发

监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
onShareAppMessage(params)
参数:
    params.from	区分系统分享还是自定义按钮分享menu是系统,button是自定义内容
    
返回值: 返回一个对象
	title		转发卡片标题
    path		转发卡片跳转路径
    imageUrl	转发卡片预览图片

使用案例

/pages/detail/detail.js

Page({
    //详情页面生命周期函数onLoad
    onLoad(options) {
        console.log(options);
    },
    //系统左上角的三个点分享
    onShareAppMessage(params) {
        //params对象:from区分事件源 
        //menu:左上角三个按钮
        //button:自定义按钮
        if (params.from == 'menu') {
            //分享自定义内容
            return {
                title: '我来自系统三个点',
                path: "/pages/detail/detail",
                imageUrl: ''
            }
        }else{
            return {
                title: '自定义按钮分享',
                path: "/pages/detail/detail",
                imageUrl: '' 
            }
        }
    }
})

/pages/detail/detail.wxml

<!--pages/detail/detail.wxml-->
<view>我是详情</view>
<!-- 通过设置属性 open-type 为自定义转发按钮 -->
<button type="primary" size="mini" open-type="share">分享内容</button>

/pages/index/index.wxml

<view class="home">
    <view class="title">首页</view>
    <view>{{name}}</view>
    <image src="https://2216847528.oss-cn-beijing.aliyuncs.com/asset/20241118104045.png" 
        style="transform:rotate({{deg}}deg)"
        class="avatar"
    />
    <view>声明式导航</view>
    <navigator url="/pages/detail/detail">
        <text class="iconfont icon-baomirenyuan" style="font-size: 80rpx;"></text>
    </navigator>
    <view>编程式导航</view>
    <button type="primary" size="mini" bind:tap="goDetail">
        <text class="iconfont icon-baomirenyuan"></text>
    </button>
</view>

/pages/index/index.js

//通过Page方法创建页面   App->Page
Page({
    //页面数据
    data: {
        name: '结城sakuna',
        deg:0,
    },
    //编程式导航按钮回调
    goDetail(){
        //编程式导航页面跳转
        //navigateTo:A->B，但是A页面不会销毁(不能跳转到tabbar页面)
        //redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
        wx.redirectTo({
          url: '/pages/detail/detail?a=1&b=2',
        })
    },
})

页面生命周期钩子

onLoad		生命周期回调—监听页面加载
onShow		生命周期回调—监听页面显示
onReady		生命周期回调—监听页面初次渲染完成
onHide		生命周期回调—监听页面隐藏
onUnload	生命周期回调—监听页面卸载

使用案例

/pages/detail/detail.js

Page({
    //详情页面生命周期函数onLoad
    onLoad(options) {
        console.log(options);
    },
    //系统左上角的三个点分享
    onShareAppMessage(params) {
        //params对象:from区分事件源 
        //menu:左上角三个按钮
        //button:自定义按钮
        if (params.from == 'menu') {
            //分享自定义内容
            return {
                title: '我来自系统三个点',
                path: "/pages/detail/detail",
                imageUrl: ''
            }
        }else{
            return {
                title: '自定义按钮分享',
                path: "/pages/detail/detail",
                imageUrl: '' 
            }
        }
    }
})

/pages/detail/detail.wxml

<!--pages/detail/detail.wxml-->
<view>我是详情</view>
<!-- 通过设置属性 open-type 为自定义转发按钮 -->
<button type="primary" size="mini" open-type="share">分享内容</button>

/pages/index/index.wxml

<view class="home">
    <view class="title">首页</view>
    <view>{{name}}</view>
    <image src="https://2216847528.oss-cn-beijing.aliyuncs.com/asset/20241118104045.png" 
        style="transform:rotate({{deg}}deg)"
        class="avatar"
    />
    <view>声明式导航</view>
    <navigator url="/pages/detail/detail">
        <text class="iconfont icon-baomirenyuan" style="font-size: 80rpx;"></text>
    </navigator>
    <view>编程式导航</view>
    <button type="primary" size="mini" bind:tap="goDetail">
        <text class="iconfont icon-baomirenyuan"></text>
    </button>
</view>

/pages/index/index.js

//通过Page方法创建页面   App->Page
Page({
    //页面数据
    data: {
        name: '结城sakuna',
        deg:0,
    },
    //编程式导航按钮回调
    goDetail(){
        //编程式导航页面跳转
        //navigateTo:A->B，但是A页面不会销毁(不能跳转到tabbar页面)
        //redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
        wx.redirectTo({
          url: '/pages/detail/detail?a=1&b=2',
        })
    },
})

页面滑动钩子

onPageScroll()

onPageScroll()
监听用户滑动页面事件

参数 Object object

属性	类型	说明
scrollTop	Number	页面在垂直方向已滚动的距离（单位px）

//通过Page方法创建页面   App->Page
Page({
    //页面数据
    data: {
        name: '结城sakuna',
        deg:0,
    },
    //编程式导航按钮回调
    goDetail(){
        //编程式导航页面跳转
        //navigateTo:A->B，但是A页面不会销毁(不能跳转到tabbar页面)
        //redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
        wx.redirectTo({
          url: '/pages/detail/detail?a=1&b=2',
        })
    },
    // 监听页面滚动
    onPageScroll(event){
        console.log(event) // 返回一个像素位置
    }
})

监听滚动到底事件

onReachBottom()

// 监听到底函数
onReachBottom(() => {
	if (status.value == "more") {
		page.value++
		getCourse()
	}
})

setData()函数

用于页面响应式数据,类似于 react中的setState

调用者:指向当前页面的配置对象(Page函数体内部对象)
this.setData()
参数：对象{},对象中的属性和属性值会替换旧的属性和属性值
返回值：无

handle(){
    // 这种不是响应式数据,需要使用 setData函数设置 数据状态才是响应式
    console.log(this.data.msg += 1) // this 指向当前页面的配置对象(Page函数体内部对象)
    const newMsg = this.data.msg + 1;
    // 设置响应式数据
    this.setData({
        msg:newMsg
    })
}