微信小程序知识点（中）

1.对象扩展运算符

    前面我们已经介绍过数组的拓展运算符，对象的扩展运算符 …也有类型的作用，它可以取出对象里所有可遍历的属性，拷贝到新的对象中。为了可以看得更加清楚，我们可以进行打印对比。

<!--wxml-->
<form bindsubmit="submitContact">
	<view>姓氏</view>
	<input name="lastName" />
	<view>名字</view>
	<input name="firstName" />
	<view>手机号</view>
	<input name="mobilePhoneNumbe" />
	<view>微信号</view>
	<input name="weChatNumber" />
	<button type="primary" form-type="submit">创建联系人</button>
	<button type="default" form-type="reset">重置</button>
</form>
<!--js-->
submitContact:function(e) {
	const formData = e.detail.value
	console.log('打印formData对象',formData)
	console.log('扩展运算符打印', { ...formData })
},

    尽管打印的结果好像并没有区别，但是formData是一个变量，我们把对象赋值给了它，打印它的结果就是一个对象了，而 { …formData }本身就是一个对象，相当于把formData对象里的属性和值给拷贝到了新的对象里面。

2.input在form表单中绑定事件处理函数与独立绑定事件处理函数

    input绑定事件单处理函数的方式有两种:

• 当input在form表单里面时，input无需绑定事件处理函数（需要增加name属性），只需要在form表单里绑定事件处理函数就可以，通过在form表单里增加的事件处理函数中的e.detail.value.name获取该标签的值。
• input标签也可以通过独立绑定事件处理函数来获取input输入的值，在对应的事件处理函数中通过e.detail.value获取输入值。
  

<!--wxml-->
<form bindsubmit="submitContact">
	<view>姓氏</view>
	<input name="lastName" />
	<button type="primary" form-type="submit">提交</button>
</form>
<input bindinput="testInput" placeholder="请输入"></input>
<!---js->
 submitContact:function(e) {
    console.log(e.detail.value.lastName)
  },
  testInput(e){
    console.log(e.detail.value)

    注意在<form></form>里的switch、input、checkbox、slider、radio、picker等组件都需要有name，这样用户在每个组件填写的相应值可以通过const {name} = e.detail.value取出(此处的name值为wxml中相应组件的name值)。
　　这些组件都有自己的value值，也就是这些组件单独使用时不需要name就可以在事件对象的detail里取到value值，而组合使用时，则必须加name才能取到值，大家可以把name都取消掉

3.粘贴板

粘贴板功能大约分为三步：

• 首先获取输入的内容
• 其次将内容使用wx.setClipboardData函数复制到黏贴板中。
• 使用wx.getClipboardData函数将粘贴板中的内容复制出来。

<!--页面.wxml-->
<input type="text" name="copytext" value="{
  {initvalue}}" bindinput="valueChanged"></input>
<input type="text" value="{
  {pasted}}"></input>
<button type="primary" bindtap="copyText">复制</button>
<button bindtap="pasteText">粘贴</button>
<!--页面.js->
data: {
	initvalue: '填写内容复制',
	pasted: '这里会粘贴复制的内容',
},
valueChanged(e) {
	this.setData({
		initvalue: e.detail.value
	})
},
<!--复制数据到粘贴板中-->
copyText() {
	wx.setClipboardData({
		data: this.data.initvalue,
	})
},
<!--将粘贴板中的内容复制出来-->
pasteText() {
	const self = this
	wx.getClipboardData({
		success(res) {
			self.setData({
				pasted: res.data
			})
		}
	})
},

４.数据验证

    用户是可以随意在表单里填写和提交任意内容的，我们需要提前验证数据的合法性，通过数据验证和“行为验证”可以减轻服务器的压力。
　　表单验证可以确保用户是否以正确的格式填写了表单数据，比如用户填写的是否是电话号码（比如有且只有11位等）、用户名是否符合要求（比如不能包含字符）、必填项是否为空、密码是否过于简单（比如至少包含大写字母、字符和数字等）。

4.1 小程序端校验

    小程序端校验是指在把用户填写的数据上传到数据库或传递给云函数之前，会先在小程序端校验用户输入的数据是否正确，如果验证不通过，为了交互体验，会弹出一些错误提示提醒用户。小程序端校验的方式有两种，一种是表单组件的内置校验，比如input、textarea的最大输入长度maxlength，内置校验虽然更简单性能更高，不过所能做的很有限；还有一种就是自定义JavaScript校验逻辑来校验。

4.2服务端校验

    云开发的服务端校验则是将用户填写的数据传递给云函数，然后经过云函数的JavaScrip校验逻辑校验通过了之后才更新到数据库，如何数据没有通过校验，会return返回错误信息到小程序端。服务端校验由于请求的链路比较长，体验比小程序端校验会差一些。
　　小程序端校验可以减轻服务器压力，让用户能够更快的获得校验的反馈，不过小程序端校验对于一些恶意用户来说，他们仍然可以更改网络请求绕过小程序端校验的逻辑，使用服务端校验更加安全。比如投票小程序就经常会出现被刷票的情况，如果使用服务端校验除了可以再次校验用户填写的数据格式（阻止绕过小程序端校验的情况）外，还可以限制用户的openid以及ip等。虽然仍然不能避免刷票（阻止不了真人刷票），但是提升了安全的等级。在实际的项目开发中，一般会同时使用小程序端校验与服务端校验的组合校验方式以更好的保证数据的正确性与安全性。

5.组件间的通信方式

6. WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在 组件模板和样式 章节中介绍.
7. 事件：用于子组件向父组件传递数据，可以传递任意数据。
8. 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法．

6.小程序端如何加载第三方NPM模块

    此处，我们以第三方模块数据验证validator为例，这些第三方模块都已经封装好了，我们直接使用即可，具体步骤如下：

• 在开发者工具上右键小程序根目录miniprogram，然后选择“在终端中打开”，然后在终端里输入命令npm install validator@latest，命令执行完会在miniprogram文件夹生成一个node_modules文件夹.
• 点击开发者工具菜单栏里的“工具”，在弹窗中选择“构建npm”，这个命令会将node_modules里的模块构建到miniprogram_npm文件夹里（node_modules文件夹可以删除了，避免占用位置）。
• 在需要使用表单验证的小程序页面的js文件里输入如下代码引入并验证模块是否安装成功

const validator  = require('./../../miniprogram_npm/validator/index')
const v1 = validator.isEmail('foo@bar.com'); //'foo@bar.com'是否是邮箱
const v2 = validator.isMobilePhone('185623478773','zh-CN')//18562347877是否是中国大陆的电话号码
console.log([v1,v2])

7.禁止当前页面转发

如果想禁止当前页面转发，实现方式很简单，就是将当前页面的js文件中的如下代码删除即可：

<!--删除js页面的该函数就可以禁止该页面转发-->
onShareAppMessage: function () {

}

8.NodeJS

8.1NodeJS内置模块

内置模块不需要我们使用npm install下载，就可以直接使用require引入：

const fs = require('fs')
const path = require('path')
const url = require(&#