最近按照教程完成入门级别小程序的开发，作为这系列的最后一节，我主要对开发过程中使用的组件与布局进行进一步的整理，以组件为主。组件与页面布局（一）主要是介绍了开源LinUI组件库与小程序内置组件的使用；并引入flex布局。传送门如下：组件与页面布局(一)

开发过程中使用到的小程序功能

• 首先在.wxml文件中绑定tap事件和回调函数toast

• 然后在.js中定义函数toast，引入轻提示框如下

• 与轻提示类似,首先在.wxml文件中绑定tap事件和回调函数modal

• 然后在.js中定义函数modal，引入模态对话框框如下，本例使用async-await处理对话框响应的事件，也可以使用success回调函数实现该功能。

• 得到的模态对话框效果图如下

• 得到的响应事件结果如下

• 首先在.wxml文件中绑定tap事件和回调函数sheet

• 然后在.js中定义函数sheet，引入菜单如下

• 触发事件显示的菜单如下

• 点击某一项触发success回调事件结果如下。其中tapIndex对应定义itemList的数组序号

• 与上述对话框类似，下面显示.js中定义函数wait

• 在app.json中配置选项卡即可

• 在.json文件中定义即可

• 也可在.js文件中进行动态设置，本例在onReady钩子中设置标题为变量title-test的值

小程序还有许多原生的功能，需要更加深入地学习与应用，以下仅对最近接触到的功能进行简单列举

• 图片预览：先定义事件，并在.js文件中的事件回调函数中添加语句

• 滑动组件：在.wxml以下定义沿x轴滑动的组件

在开发过程中应该有组件的思想，小程序中万物都是组件，相同逻辑的元素建议抽离成组件进行使用

自定义组件的创建和引入

页面可通过自定义属性向组件传值

• 首先在自定义组件的.js页面中的属性定义变量test

• 在自定义组件的.wxml页面中渲染变量test

外部样式类-在页面设置自定义组件的样式

• 首先在自定义组件的.js中定义

• 最终即可在页面中设置自定义组件的样式，效果图如下

自定义事件-在页面设置自定义组件的事件回调函数

• 首先将组件中的某个元素绑定tap事件，本例在组件.wxml的image元素绑定事件回调函数为changImg

• 随后在组件的.js中定义事件回调，并抛出一个自定义事件imgtap

• 最后在页面的.js文件中定义回调函数tapImg

• 最终显示的效果如下，便完成自定义事件的学习

页面布局推荐主要以flex布局为主，下面就简单列举下自己在写布局中的一些知识点。css还是需要多码代码看效果，自然就能够理解

-在页面的.wxss中添加代码

• z-index定义层级，叠加关系
• 元素设置position:absolute，会相对于离元素最近的position父元素进行定位，若均没设置则默认相对于窗口进行定位。但是不设定top，bottom,left,right时，则该元素还是在原来的位置，只不过会被当前在文档流的元素覆盖位置

至此便完成微信小程序入门的学习啦，完结撒花～～～

内置对象Request来使用。

进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

什么是微信小程序微信小程序是一种不需下载安装即可使用的应用，他实现了应用“触手可及”的梦想。用户扫一扫或者搜一下即可打开应用，也提现了“用完即走”的理念。用户不用关心是否安装太多应用的问题，应用将无处不在又随时可用，但又“无需安装卸载”。微信上才能使用微信小程序和原生App的比较