微信小程序组件学习 -- 注册页面
微信小程序组件使用手册地址:
1. 百度搜索“微信公众平台”,扫码登录之后,点击帮助文档里面的普通小程序。

2. 接着选择“开发”--》“组件”

3. 左侧可以根据需要查询自己需要使用的控件

那么接下来就写一个简单的注册页面。
1. New Folder(reg) --> New Page(reg)

2. 修改reg.wxml文件
<!--miniprogram/pages/reg/reg.wxml-->
<view class="fnt-weight">注册信息填写</view> <view>
<icon type="info"></icon>
<text> 用户名:</text>
</view>
<input placeholder="请输入"></input> <view>
<icon type="info"></icon>
<text> 密码:</text>
</view> <input password placeholder="请输入密码"></input>
<button type="primary">提交</button>
<button type="warn">重填</button>
注册信息填写的样式在reg.wxss文件中
/* miniprogram/pages/reg/reg.wxss */
.fnt-weight{
font-weight:bold;
}
可以看到只是加粗了字体。
效果图:

标题还是“我的微信”,如果想让标题变成当前页面的标题,那么需要修改reg.json,否则会使用app.json中的标题
{
"usingComponents": {},
"navigationBarTitleText": "用户注册"
}
效果图:

这就是一个简单的注册页面了,只用了几个基本的组件:icon, button, text, input。可以在组件手册中学习更多功能哦。
微信小程序组件学习 -- 注册页面的更多相关文章
- 微信小程序组件学习中
一.轮播图 wxml代码: <swiper indicator-dots="true" autoplay="true" duration="10 ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序开发07-列表页面怎么做
接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...
- 微信小程序js学习心得体会
微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...
- 微信小程序组件设计规范
微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序
通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...
- 微信小程序生命周期、页面生命周期、组件生命周期
1. 生命周期 App(全局) 位置:项目根目录app.js文件 App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(optio ...
- 微信小程序入门学习
前(che)言(dan): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋 ...
随机推荐
- Java线程的并发工具类
Java线程的并发工具类. 一.fork/join 1. Fork-Join原理 在必要的情况下,将一个大任务,拆分(fork)成若干个小任务,然后再将一个个小任务的结果进行汇总(join). 适用场 ...
- golang 写文件--详细解释
1,不覆盖指定的文件 先看代码怎么写,下面再具体解释. func writeToFile(msg string) { f, err := os.OpenFile("/home/mingbai ...
- SSM动态展示分页
这个作业属于哪个课程 2021春软件工程实践|S班(福州大学) 这个作业要求在哪里 作业具体要求 这个作业的目标 个人技术 参考文献 ... 目录 技术概述 技术详述 问题和解决过程 总结 参考文献 ...
- excel用函数去掉单元格内容中的括号,并只保留单元格里面的内容
1.substitute(需要执行替换操作的单元格,需要替换的字符,替换后的字符,有多个需要替换的字符可以指定替换的第几个) 例如:aab--substitute("aab",&q ...
- SQLite Encryption(加密)新姿势
什么是SQLite? SQLite是一个C语言实现的小型.快速.自包含.高可靠性.功能全面的SQL数据库引擎. 起因: 刚好项目上有个需求,需要使用VS2019+.Net famework 4.6.1 ...
- hdu 6030 矩阵快速幂
大致题意: 一条长度为n的项链,由红色珠子和蓝色珠子(分别用1和0表示)组成,在连续的素数子段中,红色珠子的个数不能少于蓝色珠子.问组成这个项链有多少种方案,求方案数模1000000007 分析: 首 ...
- 《面试八股文》之kafka21卷
微信公众号:moon聊技术 关注选择" 星标 ", 重磅干货,第一 时间送达! [如果你觉得文章对你有帮助,欢迎关注,在看,点赞,转发] 大家好,我是moon,最新一篇面试八股文系 ...
- css文字动画(自动换文字)
html: <div class="content"> <div class="content__container"> <p c ...
- mysql导入脚本
#登陆 mysql -u root -p #创建数据库 CREATE DATABASE `gps` CHARACTER SET utf8 COLLATE utf8_general_ci; #选择数据库 ...
- mysql 更换主键
p.p1 { margin: 0; font: 12px "Helvetica Neue" } span.s1 { font: 12px ".PingFang SC&qu ...