小程序页面

是进入某个页面的时候会执行的页面入口，定义了页面初始数据，生命周期钩子函数，事件处理函数等。

参数说明

函数名	说明
data	页面的初始数据
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是 scroll-view 滚到底），常用于下拉下一页数据。具体注意事项
onTabItemTap	点击 tab 时触发，参数为 Object
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 bz.navigateBack

注册页面

使用 vue 规范注册页面

 //index.vue
export default {
    data() {
        return  {
            text: "This is page data."
        }
    },
    onLoad: function(options) {
        // 页面创建时执行
    },

    onShow: function() {
        // 页面出现在前台时执行
    },

    onReady: function() {
        // 页面首次渲染完毕时执行
    },

    onHide: function() {
        // 页面从前台变为后台时执行
    },

    onUnload: function() {
        // 页面卸载时执行
    },

    onPullDownRefresh: function() {
        // 触发下拉刷新时执行
    },

    onReachBottom: function() {
        // 页面触底时执行
    },

    onPageScroll: function() {
        // 页面滚动时执行
    }
},

data

data 数据是页面第一次渲染使用的初始数据。页面加载时，data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串、数字、布尔值、对象、数组。

示例代码

 <!-- index.vue -->
<template>
    <view>{{text}}</view>
    <view>{{array[0].msg}}</view>
 </template>

 <script>
	export default {
		data() {
			return {
                text: 'init data',
                array: [{msg: '1'}, {msg: '2'}]
            }
        }
    }
 </script>

页面事件处理

可遵循 vue 事件规范

 <!-- index.vue -->
<template>
    <view @click="viewClick">click me</view>
 </template>

 <script>
	export default {
		method: {
            viewClick () { 
                console.log('view click') 
            } 
        }
    }
 </script>

更新页面渲染

可遵循 vue data 数据更新规范

MVVM, 通过 MVVM 的语法把一个变量绑定到标签上，我们称为数据绑定。使用 vue 的数据绑定方式解决 js 和 dom 界面交互的问题

更改 data 中的数据，即可触发视图更新

页面分享配置

onShareAppMessage(Object object)
当用户点击页面内转发按钮（bzml/vue中使用button组件，设置属性open-type="share"），或者点击右上角菜单“分享”按钮时，会回调该方法，用户可以在该方法内自定义分享内容。

参数

名称	类型	描述
from	String	转发事件来源。button：页面内转发按钮；menu：右上角转发菜单。

自定义分享内容

注意事项：

3.10.0支持

此事件处理函数需要 return 一个 Object，用于自定义转发内容，返回内容的结构如下

名称	类型	是否必填	描述	默认值
title	String	必填	分享标题	当前小程序名字
path	String	必填	移动端打开小程序加载的页面，如果不支持移动端需传空字符串('')，否则会默认为当前分享页面的路径	小程序当前页面
PCPath	String	选填	PC端打开小程序加载的页面，不支持可传空字符串	无
PCMode	String	选填	PC端打开小程序加载的模式，若需要在PC端打开小程序，则必须传PCMode字段 可选值 window-semi: 独立小窗 appCenter: 工作台 window: 独立大窗口 sidebar-semi: 侧边栏	无
imageUrl	String	选填	自定义分享图,目前仅支持网络图片路径，图片大小建议不超过16:9	无
success	function	选填	分享成功的回调	无
fail	function	选填	分享失败的回调	无

success的返回值res里有个data数据

名称	类型	描述
data	array	选择会话列表

data数组的每个数据都是一个Object类型，结构如下

名称	类型	描述
id	string	3.10.0： 单聊：返回加密的bosshi userid 机器人：返回加密的bosshi userid 群聊：返回加密的bosshi群聊id 示例：89EDAB2A519AB20BDAFC43864D2957D91 3.11.0+： 单聊：返回开放平台openid 机器人：返回加密的bosshi userid（开放平台目前没有属于机器人的openid） 群聊：返回开放平台openChatId 示例：ou_aea5df288c71a47af6ccd786c05be939
chatType	string	会话类型：0单聊,1群聊
userType	string	3.11.0支持 单聊用户类型 chatType为0返回 0：用户 1：机器人

示例代码

onShareAppMessage: function (opt) {
    console.log(opt);
    return Object.assign({}, this.data.shareData, {
        title: opt.from === 'button' ? 'button share' : 'menu share',
        path: '/page/API/pages/share/share?a=b&from=' + opt.from,
        PCPath: '/page/API/pages/share/share?a=b&from=' + opt.from,
        PCMode: 'sidebar-semi',
        success (res) {
            console.log('success', res)
        },
        fail (err) {
            console.error(err);
        }
    })
}

选区事件

功能建设中