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

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. js正则中文

    hi,大家好 今天跟小伙伴们浅谈以下如何用正则表示中文以及如何去运用.众所周知中文在计算机中是不能进行存储的.那我们是以什么办法让我们和计算机进行更好的沟通呢?常用的几种中文编码格式utf-8编码ut ...

  2. Linux常见信号介绍

    1.信号 首先信号我们要和信号量区分开来,虽然两者都是操作系统进程通信的方式.可以简单的理解,信号是用来通知进程发生了什么需要做什么,信号量一般是用作进程同步(pv操作) 2.常见信号量 (以下数字标 ...

  3. centos7安装kubernetes1.18.5

    一.设置hosts 修改主机名 [root@localhost kubernetes]# hostnamectl set-hostname master69 四台服务器安装kebernetes,一个m ...

  4. VueJs(16)---Nuxt引入mavon-editor插件实现markdown功能

    Vue引入mavon-editor插件实现markdown功能 说明 mavon-editor是一款基于Vue的markdown编辑器,因为当前项目是采用Nuxt,所以这里所展示的教程是针对Nuxt引 ...

  5. 『动善时』JMeter基础 — 51、使用JMeter测试WebService接口

    目录 1.什么是WebService 2.WebService和SOAP的关系 3.什么是WSDL 4.测试WebService接口前的准备 (1)如何判断是WebService接口 (2)如何获取W ...

  6. 对volatile的理解--从JMM以及单例模式剖析

    请谈谈你对volatile的理解 1.volitale是Java虚拟机提供的一种轻量级的同步机制 三大特性1.1保证可见性 1.2不保证原子性 1.3禁止指令重排 首先保证可见性 1.1 可见性 概念 ...

  7. 一、.Net Core 依赖注入详解及Autofac使用

    .NET中的依赖注入实际上帮助我们解耦了我们的代码,是控制反转和依赖反转原则的具体实现. .Net Core的依赖注入的好处: 1. application 更稳定,容易维护和演化: 2. 实现细节的 ...

  8. hdu 1540 Tunnel Warfare 线段树 区间合并

    题意: 三个操作符 D x:摧毁第x个隧道 R x:修复上一个被摧毁的隧道,将摧毁的隧道入栈,修复就出栈 Q x:查询x所在的最长未摧毁隧道的区间长度. 1.如果当前区间全是未摧毁隧道,返回长度 2. ...

  9. 什么是forward和include?

    请求包含的例子 第一个Servlet (DispatcherServlet) @Override protected void doGet(HttpServletRequest req, HttpSe ...

  10. kafka错误集锦

    javax.management.InstanceAlreadyExistsException: kafka.consumer:type=FetchRequestAndResponseMetrics, ...