# 6、实现页面逻辑

页面搭建完成后，我们就需要定义该页面的变量以及函数方法了。我们需要实现的效果是：用户输入个人签名内容，并点击确定后，展示到个人信息的个人签名中目标效果：

# 了解页面变量以及页面生命周期

	export default {
		data() {
			return {
				inputSign: '',
				sign: '',
				avatarUrl: 'https://histatic.zhipin.com/front/images/qhnjyfpEWkKXSjfV4LD2MG_500x500.png'
			}
		},
		onLoad() {
			console.log(getApp().globalData)
		},
		methods: {
			confirm() {
                console.log('点击了确定按钮')
			}
		}
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

export对象代表该页面的处理逻辑。定义了页面初始数据，生命周期函数，事件处理函数等。

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

例如我们上一步中定义的inputSign,sign,avatarUrl

页面生命周期函数：onLoad函数代表页面加载时处理，其他更多的生命周期函数可参考文档页面生命周期。

小程序生命周期和页面生命周期是不同的概念。小程序生命周期可参见小程序App；小程序中每个页面的生命周期可参见页面生命周期

页面事件函数：在script模块中组件可以绑定一些事件，这些事件的处理函数就需要在js文件中定义。

例如我们上一步中在按钮中绑定的confirm方法。

更多页面处理逻辑，例如分享配置、页面组件选区事件监听的使用方法可参见文档小程序页面。

# 撰写页面 JS 逻辑

请将以下代码拷贝到script模块中:

    export default {
        data() {
            return {
                inputSign: '',
                sign: '',
                avatarUrl: 'https://histatic.zhipin.com/front/images/qhnjyfpEWkKXSjfV4LD2MG_500x500.png'
            }
        },
        onLoad() {
            console.log(getApp().globalData)
        },
        methods: {
            confirm() {
                this.sign = this.inputSign
                this.inputSign = ''
            }
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Ctrl+S 保存后在IDE模拟器中可看到已经可以运行并达到示例的效果。你也可以直接点接开发者工具中的预览，通过BossHi客户端扫码查看客户端中的效果。

# 代码解析

# 定义页面变量

找到script模块中的data代码，定义了页面中的变量，以及页面加载时的初始值

// 页面变量
data() {
    return {
        inputSign: '', // 用户输入的临时变量
        sign: '', // 用户签名
        avatarUrl: 'https://histatic.zhipin.com/front/images/qhnjyfpEWkKXSjfV4LD2MG_500x500.png' // 用户头像地址
    }
}

1
2
3
4
5
6
7
8

# 实现输入签名操作

1、获取个人签名输入框中输入的内容

在template模块中可以看到我们将textarea组件的v-modal指令绑定了inputSign字段。查看textarea组件的说明文档，可以看到 v-modal指令的含义：能够双向绑定data中的变量。

<textarea class="input-area" v-model="inputSign" name="" id="" cols="30" rows="10"></textarea>

因为双向绑定的原理，框架将自动将用户输入的内容绑定到您设置的逻辑变量中，当然如果有其他要求，您也可以通过@blur或@change等事件自定义处理用户的逻辑变量。

2、用户点击确定时，将inputSign的内容展现在个人信息中，在template模块中可以看到，我们将个人签名部分绑定了变量sign

<view class="user-sign">{{sign}}</view>

当页面初始化时候，个人签名部分将展示页面变量的初始值，即 “”（空值）

sign: ''

在template模块中确定按钮绑定了方法confirm，因此当用户点击“确定”按钮时，将会触发confirm方法。

confirm() {
    this.sign = this.inputSign
    this.inputSign = ''
}

1
2
3
4

这段代码的含义是将页面变量inputSign中的值赋值到页面变量sign中，当inputSign的值发生变化后，系统将会自动更新页面中个人签名组件中展示的文本内容。因此实现了用户输入个人签名并点击确定后，更新个人信息的功能。

← 5、绘制个人签名页 7、预览与调试 →