评论

视频教程,中级篇5:掌握微信小程序高频组件

原文链接:https://mp.weixin.qq.com/s/5hgaFORW3wrmkyyFsZBDXQ

从这篇文章你可以学到:
1、view组件
2、button组件、点击
3、image组件
4、form表单组件、提交
5、input组件

链接:(提取码:uo03 )
https://pan.baidu.com/s/1Yew86du4IWTXhanyu4GUMg

视频内容精要

一、view组件

组件的开发必须由一个<组件标签>开始和一个</组件标签>结束。
view组件是小程序开发中最常用的组件,常用于页面的布局。

二、button组件

button组件是用户和小程序交互最频繁使用的组件。

button组件的 type 属性可以使用微信小程序内置的样式,保证和微信风格的统一;当然也可以自己定义样式。

点击button按钮可以实现分享好友、打开客服、获取用户信息等,都是通过open-type属性来实现的。

bindtap属性是绑定用户点击事件,就是当用户点击的时候会触发js中的一个函数,我们可以在函数中定义自己的逻辑。

如果想实现点击button按钮实现form表单提交,需要用到form-type属性。

三、image组件

image组件比较重要的一点是,src的路径可以是相对路径(如果有服务器是https路径),相对路径指的是当前 .wxml 文件所在的目录和图片所在的目录的相对层级。… (两个点)表示向上一个层级,/(一个斜杠)表示向下一个层级。自己尝试把图片文件移动个位置,体验一下就明白了。

如果图片比较大,展示的时候可以用mode属性来处理宽高比,让图片显示的更舒服。(详细配置参考文档)

四、form表单组件

视频中讲解了如何通过form表单组件和input组件实现用户登录传值。(有的模拟器对于输入框的展示不是很友好)

form表单的 bindsubmit 属性实现了表单的提交,通过函数的参数获取表单提交的值。值就是来自 input 的name属性,这个一定要注意。取值的时候是通过javascript 面向对象的语法取值的,类似于page中的data,通过 .(点)语法进行取值。

要学会通过console打印数据的结构和值,加深理解微信小程序数据构造。

最后一次编辑于  03-01  
点赞 1
收藏
评论