上一篇 我们微信小程序代码结构和框架调用流程详解，大家对小程序基本框架以及有所了解。这篇文章重点讲解一下视图和文本显示在小程序中如何呈现。视图组件都要写在wxml文件中，类似于html语法。

view视图简介

view是小程序的显示组件类似于html中的div标签，我们可以指定css样式，存放数据显示等。
比如我们在页面上显示一个红色的hello world，可以这样写：

   <view class="content" style="color:red;">
       hello world
   </view>

form表单简介

表单，将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

当点击 <form> 表单中 form-type 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

form表单的提交和重置事件

• bindsubmit 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
• bindreset EventHandle 表单重置时会触发 reset 事件

form表单组件

• 文本 text

  
  
  text.png

• 按钮 button

  
  
  button.png

• 选择框 checkbox

  
  
  checkbox.png

• 输入框 input

  
  
  input.png

• 滚动选择器 picker

  
  
  picker.png

• 单选按钮 radio

  
  
  radio.png

• 滑动选择器 slider

  
  
  slider.png

• 开关选择器 switch

  
  
  switch.png