精选专栏：《》

  推荐专栏：《算法研究》

#### 防伪水印——左手の明天 ####

大家好，我是左手の明天！好久不见

今天更新小程序云开发

最新修订：至2024年5月27日，左手之明日已发布第332篇独立撰写的博文。

 更新于专栏：小程序开发

#### 防伪水印——左手の明天 ####

事件构成了视图层与逻辑层之间的交互途径，每当用户进行点击、轻触或长按操作，并选中了与事件相关联的小程序组件，便将激活该事件，进而执行逻辑层中预定的事件处理程序。

小程序的视图部分是通过WXML和WXSS进行编写的，并由相应的组件负责呈现。这一层将逻辑层处理过的数据转化为可视化的内容，并将视图层触发的事件传递给逻辑层。逻辑层在接收到数据后进行相应的处理，并将处理结果返回给视图层，同时也会接收视图层的事件反馈。

1 页面滚动

以开发者工具创建一个新的页面，并在app.json配置文件的第一行新增该页面配置，由于它位于首位，因此将自动成为小程序的首页。接着，将以下代码段输入到相应的.wxml文件中。

滚动到页面指定位置 滚动到页面顶部（返回顶部）

这里的type属性仅作为weui提供的样式引入，而函数的名称则可以自行设定。接下来，我们需要在相应的js文件中，为每个函数名添加对应的事件处理函数。

在.js文件中的Page对象定义内部（与data属性、方法：：()等处于同一级别），请输入以下代码：

scrollToTop() { wx.pageScrollTo({ scrollTop: 0, duration: 300 }) }, scrollToPosition() { wx.pageScrollTo({ scrollTop: 6000, duration: 300 }) },

用户点击该组件后，页面相应的Page部分会触发对应的事件处理函数。编译并保存后，观察页面是否出现了滚动效果。这种效果的实现原理在于，()和()这两个函数实质上均调用了小程序的滚动API wx.()，而该API的详细参数说明，可以在技术文档中查阅。

滚动API技术文档：wx.( )

官方文件中明确指出，wx.()的功能在于使页面滚动至指定位置，且提供选择器和滚动距离两种方法来实现定位。

那么，我们该如何使视图滚动至特定选择器的所在位置呢？在此之前，我们已为视图分配了ID和选择器。只需对先前函数的配置进行如下调整（请注意：若你是新增而非修改，则可能存在函数名冲突的问题，或者你也可以选择给函数取一个不同的名字）：

scrollToTop() { wx.pageScrollTo({ duration: 3000, selector:".pagetop" }) }, scrollToPosition() { wx.pageScrollTo({ duration: 300, selector:"#pageblock" }) },

在组件上仅设置了事件绑定而没有在文件中编写对应的事件处理函数时，浏览器的控制台可能会显示错误信息，提示缺少事件处理函数。例如，它可能会指出“未找到名为xxx的处理函数”或类似的提示。

别以为只有部件能绑定事件，记得我们小程序中的技术文档吗？在公共属性部分，你会发现所有组件都具备bind* / *这样的属性，它的类型正是bind*的一种。换句话说，小程序中的所有组件都能通过这种方式来触发事件处理函数，实现滚动等效果。用实例来演示只是为了让大家更容易理解。

在命名规范方面，项目名、函数名以及变量等均需遵循简洁且富有语义化的原则。对于函数名的命名，建议采用驼峰式命名法，即首字母小写，后续每个单词的首字母大写，形似骆驼的驼峰。例如，函数名可以像这样命名：例如、，以此类推。

2 消息提示框

消息提示框是移动端应用程序、H5页面以及小程序中经常采用的交互式界面。在编写.wxml代码时，需要：

点击弹出消息对话框

在js里输入以下代码：

toastTap() { wx.showToast({ title: '购买成功', icon: 'success', duration: 2000 }) },

消息提示技术文档：wx.( )

进行图标修改和属性添加的尝试，观察其呈现出的不同效果，并思考在哪些应用程序的具体使用场景中，你曾遇到过类似的通知信息。

3 模态对话框 3.1、点击按钮弹出模态对话框

为了使界面看起来更加简洁明了，您可以采用快捷键Ctrl+/(在Mac系统中为+/)来对wxml文件中的代码进行注释处理，而js文件中的函数则无需进行注释操作。

在开发者工具中持续向.wxml文件中输入代码，此次操作将涉及调用小程序的模态框功能（需注意，该模态框的名称可依据命名规范自行设定，只需在js文件中编写相应的事件处理函数，即可实现对API的调用）。

显示模态对话框

然后再在.js中输入以下代码：

modalTap() { wx.showModal({ title: '学习声明', 开发小程序的过程颇具趣味，我已下定决心，每日都要坚持记录学习进度。 showCancel: true, confirmText: '确定', success(res) { if (res.confirm) { 控制台输出：“用户已点击确认按钮” } else if (res.cancel) { 控制台输出：“用户已选择取消操作” } } }) },

在保存并编译完毕后，需轻触模拟器界面上的特定按钮，随后将弹出一个对话框，我们将其称作模态对话框。

模态对话框技术文档：wx.( )

3.2、千变万化之API

查阅API的技术手册，需掌握该API所具备的属性，弄清这些属性各自所表达的具体意义，明确属性的数据类型（这一点尤为关键），并了解其预设的默认数值以及可接受的取值范围。

通过为API现有的属性赋予不同的数值，API呈现的内容将呈现出多样化的面貌；至于具体的应用方式，则需要你根据实际的小程序开发项目来灵活运用。

在哪些应用程序、小应用、以及H5页面中，你能够发现模态框的存在？这些模态框通常在何种情境下显现，它们又承担着怎样的功能？你能否尝试模仿这些模态框，来编写一些配置信息呢？

2.3、.log日志打印

在点击模态框中的取消或确定按键后，需关注开发者工具中的调试器日志输出内容。若点击取消按键，系统将显示“用户点击了取消”的提示；而若点击确定按键，则会显示“用户点击了确定”的信息。这些打印输出的结果均由上方代码段生成。

success(res) { if (res.confirm) { 控制台输出：“用户已按下确认键” } else if (res.cancel) { 控制台输出：“用户已选择取消操作” } }

这段代码的解读是怎样的呢？除了对“.log('用户点击了确定')”这部分内容我们已经有所了解，可以理解之外，对于“res”这个变量，以及“res.”和“res.”后面的内容，我们可能就不太明白了。它们是从何而来呢？我们可以通过使用“.log()”方法来打印相关信息。为了更好地理解这段代码，我们可以在其中添加一些打印语句。

success(res) { console.log(res) if (res.confirm) { console.log(res) 在点击确认操作完成后，控制台将输出信息：“res.confirm的值显示为：”接着是res.confirm的具体内容。 在点击确认操作完成后，控制台将输出信息：“res.cancel的值在此时为：”接着显示res.cancel的具体内容。 } else if (res.cancel) { console.log(res) console.log('用户点击了取消') 在点击取消操作后，控制台输出信息显示：“res.confirm的值在此时为：”加上res.confirm的具体内容。 在点击取消操作后，控制台将输出信息：“res.cancel的值显示为：”紧跟着显示res.cancel的具体内容。 } }

编译完成后，需点击模态框中的取消与确定按键，观察打印出的具体结果。若点击确认键，且res变量的值为真，则执行if语句块中的代码；若res变量的值为真，则直接执行res变量对应的语句。此外，在模态对话框的技术文档中，wx.()部分同样提到了回调函数的相关说明。

4 手机振动

手机振动接口分为两类，即持续振动和短暂振动。这两种接口的编写方式基本一致。为了展示其效果，以下以持续振动为例，在.wxml文件中输入以下代码：

长振动

然后再在.js里添加与之对应的事件处理函数：

vibrateLong() { wx.vibrateLong({ success(res) { console.log(res) }, fail(err) { console.error(err) }, complete() { console.log('振动完成') } }) },

完成编译操作后，请点击预览功能，随后用手机进行扫描，以便亲自感受那强烈的振动体验。

长振动技术文档：wx.()

在详尽的长振动技术文件中，我们再次发现了API中的三个重要回调函数：成功、失败和完成。当在模拟器上点击按钮，我们能够观察到日志信息的输出。这些信息会被输出至控制台，若长振动功能无法启动，通常是因为手机权限设置不当。

根据长振动代码的参考和短振动技术文档的内容，设计一个短振动的实例，以亲身体验并对比两者的差异。

5 弹出操作菜单

弹出菜单技术文档：wx.( )

下面我们来了解一下操作操作，在.wxml输入以下代码

弹出操作菜单

然后再在.js里添加与之对应的事件处理函数：

actionSheetTap() { wx.showActionSheet({ itemList中包含了以下选项：添加照片、删除照片、更新照片以及查询更多。 success(e) { console.log(e.tapIndex) } }) },

在模拟器中进行保存操作后，您只需轻触按钮，便会弹出一个功能丰富的操作菜单，其中包括添加照片、删除照片、更新照片以及查询更多等选项。然而，点击这些选项时，系统并未作出响应。对此，我们需在后续编写事件处理函数以实现相应的功能。

点击操作菜单的不同选项后，系统会反馈不同的数字，这一结果由回调函数中的e值决定。查阅官方文档可知，用户所点击的按钮序号，按照从上至下的顺序排列，并以0为起始，与数组序号相对应。这一机制为我们日后根据不同菜单选项执行相应操作提供了便利。

在(e){}的回调函数执行过程中，需.log(e)以输出e的值，同时使用.log(e.)来观察e对象的详细信息，观察这两次打印的结果。

6 页面路由

页面路由这一概念至关重要，它涵盖了多种操作方式，包括开启新页面、实现页面回退、切换Tab标签页以及进行页面重定向等。

关于页面路由这一概念，建议大家查阅相关技术文档。页面路由，简而言之，就是对页面链接进行管理，通过不同的URL链接展示各异的内容与页面信息。后续章节中，我们将详细阐述页面路由的相关知识，大家无需急于一时全部理解透彻。

6.1、组件与页面路由API

此前，我们已对组件进行了学习，在其技术文档中，我们能够查找到open-type属性及其有效选项。同时，在微信小程序的API列表左侧，我们可以观察到五个不同的API接口。这些API之间存在着如下的对应关系：

页面路由API

open-type值

含义

请关闭当前页面，并切换至应用中的特定页面。然而，请注意，您不能直接跳转至指定页面。

请保留当前页面，并切换至应用中的特定页面，但请注意，此操作不包括跳转至指定的那一页。

关闭当前页面，返回上一页面或多级页面。

跳转到 页面，并关闭其他所有非 页面

关闭所有页面，打开到应用内的某个页面

也就是说，组件能够实现的功能，通过调用小程序或路由API同样可以实现。组件的内容是固定不变的，而小程序则能够提供变化的数据。

6.2、跳转到新页面与Tab页

我们可以在之前创建的home.wxml里输入以下代码：

保留页面并跳转 跳转到组件Tab页 关闭当前页面跳转

然后在home.js文件里添加以下代码：

navigateTo() { wx.navigateTo({ 该链接指向的地址为：/pages/home/imgshow/imgshow，请勿进行修改。 }) }, switchTab() { wx.switchTab({ url: "/pages/list/list", }) }, redirectTo() { wx.redirectTo({ 该链接指向的地址为：/pages/home/imgshow/imgshow，请勿修改。 }) },

在保存操作完成后，您只需在开发者工具的模拟器中点击相应按钮，便能够成功实现页面与Tab页之间的切换功能。我们之前已经讨论过，这实际上是小程序中所有组件共有的属性。只要组件绑定了页面路由切换的事件处理函数，那么组件本身的重要性就相对降低了。换句话说，链接跳转的功能已经不再仅仅是组件的专属了。

请留意此处URL的路径设定，我们采用的是基于小程序根目录的绝对路径。由于app.json文件本身位于根目录，因此在配置项前无需添加斜杠“/”，这样我们便能够利用相对路径以及当前取值，同时对于API中大量参数的字符串赋值，无论是使用单引号还是双引号，都不会对结果产生影响。