微信小程序组件使用手册地址:

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。可以在组件手册中学习更多功能哦。

微信小程序组件学习 -- 注册页面的更多相关文章

  1. 微信小程序组件学习中

    一.轮播图 wxml代码: <swiper indicator-dots="true" autoplay="true" duration="10 ...

  2. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  3. 微信小程序开发07-列表页面怎么做

    接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...

  4. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  5. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  6. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  7. 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

    通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...

  8. 微信小程序生命周期、页面生命周期、组件生命周期

    1. 生命周期 App(全局) 位置:项目根目录app.js文件 App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(optio ...

  9. 微信小程序入门学习

    前(che)言(dan): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋 ...

随机推荐

  1. Java线程的并发工具类

    Java线程的并发工具类. 一.fork/join 1. Fork-Join原理 在必要的情况下,将一个大任务,拆分(fork)成若干个小任务,然后再将一个个小任务的结果进行汇总(join). 适用场 ...

  2. golang 写文件--详细解释

    1,不覆盖指定的文件 先看代码怎么写,下面再具体解释. func writeToFile(msg string) { f, err := os.OpenFile("/home/mingbai ...

  3. SSM动态展示分页

    这个作业属于哪个课程 2021春软件工程实践|S班(福州大学) 这个作业要求在哪里 作业具体要求 这个作业的目标 个人技术 参考文献 ... 目录 技术概述 技术详述 问题和解决过程 总结 参考文献 ...

  4. excel用函数去掉单元格内容中的括号,并只保留单元格里面的内容

    1.substitute(需要执行替换操作的单元格,需要替换的字符,替换后的字符,有多个需要替换的字符可以指定替换的第几个) 例如:aab--substitute("aab",&q ...

  5. SQLite Encryption(加密)新姿势

    什么是SQLite? SQLite是一个C语言实现的小型.快速.自包含.高可靠性.功能全面的SQL数据库引擎. 起因: 刚好项目上有个需求,需要使用VS2019+.Net famework 4.6.1 ...

  6. hdu 6030 矩阵快速幂

    大致题意: 一条长度为n的项链,由红色珠子和蓝色珠子(分别用1和0表示)组成,在连续的素数子段中,红色珠子的个数不能少于蓝色珠子.问组成这个项链有多少种方案,求方案数模1000000007 分析: 首 ...

  7. 《面试八股文》之kafka21卷

    微信公众号:moon聊技术 关注选择" 星标 ", 重磅干货,第一 时间送达! [如果你觉得文章对你有帮助,欢迎关注,在看,点赞,转发] 大家好,我是moon,最新一篇面试八股文系 ...

  8. css文字动画(自动换文字)

    html: <div class="content"> <div class="content__container"> <p c ...

  9. mysql导入脚本

    #登陆 mysql -u root -p #创建数据库 CREATE DATABASE `gps` CHARACTER SET utf8 COLLATE utf8_general_ci; #选择数据库 ...

  10. mysql 更换主键

    p.p1 { margin: 0; font: 12px "Helvetica Neue" } span.s1 { font: 12px ".PingFang SC&qu ...