微信小程序组件学习 -- 注册页面
微信小程序组件使用手册地址:
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): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋 ...
随机推荐
- 深入Netty逻辑架构,从Reactor线程模型开始
本文是Netty系列第6篇 上一篇文章我们从一个Netty的使用Demo,了解了用Netty构建一个Server服务端应用的基本方式.并且从这个Demo出发,简述了Netty的逻辑架构,并对Chann ...
- Java-Java8特性(更新中)
Java8新特性 之前零零散散写了很多java8的内容,今天做一个整理,也算是整理用到的内容,当然细化的话还有很多,只是说暂时用不到,为了面试的话已经够了 日期计算 Lambda表达式 函数式接口(比 ...
- Ubuntu 之 Esc and CapsLK
Ubuntu 更换 CapsLK 和 ESC 内容如下 // vim .xmodmap !! No Caps Lock clear lock !! Make Caps_lock an escape k ...
- MySQL基本sql语句总结
目录 约束 表操作 查看表结构与修改表名 修改字段名与字段数据类型 添加与删除字段 修改字段的排列位置 删除表的外键约束 增删改 插入数据 更新数据 删除数据 查询 单表查询 连接查询 子查询 视图 ...
- 使用docker搭建最新版本的gitea,并配置HTTPS访问
使用docker搭建最新版本的gitea,并配置HTTPS访问 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 之前有搭建 ...
- 为Centos系统打补丁
4.1.操作系统打补丁: 1.centos更新说明: centos 官方没有发布关于centos操作系统的补丁. centos 操作系统更新可以参考如下建议. 2.更新操作系统软件包,操作系统版本.内 ...
- 25、mysqlreport(my.cnf)调优工具
25.1.mysqlreport介绍: mysqlreport以很友好的方式显示 MySQL状态变.事实上,它几乎报告了所有的状态.不像 SHOW STATUS 只是在显示 了100多个状态值,mys ...
- 基于gitlab 打tag形成版本视图源码包和可执行包
实现步骤说明 第一步创建发布tag 创建的tag生成效果 第二步进入release 第三步到制品库去拷贝编译可执行包的下载地址 右键复制链接下载地址 编辑tag信息 填写编译后可执行文件的安装包 最终 ...
- MySQL不支持DELETE使用表别名?
最近做的需求经常和数据库在打交道, 因为系统页面上某些展示的字段并不是在前端写死的, 而是配置在数据库中, 这样的话便于维护和扩展. 于是遇到了一个MySQL中比较细节性的问题. 日常开发中不少程序员 ...
- 搭建Nexus3私服(含使用说明,支持CentOS、Windows)
官方文档 Nexus仓库介绍(支持maven.yum.docker私服等) 仓库分为三种: proxy:是远程仓库的代理.比如说在nexus中配置了一个central repository的proxy ...