微信小程序 2__学习view, text，button，checkbox,radio,input,block标签

在微信小程序开发中， 

一 <view>标签 相当于html里的<div>标签，  每个<view>里面内容 自动占满一行，

     注意一个属性 text-indent: 2em;  表示首行缩进2个字符。

二  <text>标签相当于html里的<span>标签，

   但是   1. 增加了selectable属性： 长按文本是否可选。 如下图所示

                                                                    

      2. 增加了decode属性，表示转译转义字符，如下图所示，  将 &nbsp; 转译为空格                                                         

decode 可以解析的有nbsp, lt, gt, amp, apos, ensp, emsp。

三 button标签

样式语法 type:  primary/default/warn

表单格式的语法： form-type: submit, reset

open-type 语法： 获取用户信息： getUserInfo, 

                             获取用户的手机号（因为小程序在微信里，微信可绑定手机号）：getPhoneNumber,

                             获取微信客服 contact

四 checkbox 标签，radio标签

      checkbox 复选按钮， 具有开闭标签，  属性value可以填入真实的值

      radio 单选按钮， 具有开闭标签， 要实现单选效果必须在外围有<radio-group>, 属性value可以填入真实的值

     当然checkbox的外围可以加上<checkbox-group>标签， 在绑定数据时有用。

五 block标签

     block 可以选中整个页面， 标签 “块”， 本身不会被渲染到页面中， 只有其内部的标签会被渲染。

     block 标签不会导致换行。

六 input 标签

     input 输入框，  分为text, password, number，digit四种类型。

    它有一个属性placeholder， 表示默认的值， 当输入内容时，它会被替代,  place-class属性 表示引用wxss里面的样式。

    maxlength 表示最大输入长度。

以下为相关所有小程序代码 test.wxml

<!--pages/test/test.wxml-->
<!--<text>pages/test/test.wxml</text>-->
<view>Hello world</view>
<text selectable>你好</text><text decode>世界&nbsp;中国</text>

<button >点击我</button>
<button type="primary">primary 样式按钮</button>
<button type="default">default 样式按钮</button>
<button type="warn">warn 样式按钮</button>

<form bindsubmit="" bindreset="">
<button form-type="submit">submit</button>
<button form-type="reset">reset</button>
</form>
<button open-type="getUserInfo">获取用户信息</button>
<text>
因为小程序在微信里，微信可绑定手机号</text>
<button open-type="getPhoneNumber">获取用户的手机号</button>
<button open-type="contact">获取客服</button>

<checkbox value="1">香蕉</checkbox>
<checkbox value="2">苹果</checkbox>
<radio-group>
  <radio value="1">靓男</radio>
  <radio value="2">靓女</radio>
</radio-group>
<block>
  <view>Logo</view>
  <text style="margin-right:6px">首页</text>
  <text style="margin-right:6px">物品</text>
  <text style="margin-right:6px">购物车</text>
  <text style="margin-right:6px">订单</text>
  </block>
   <view></view>
   姓名：<input type="text" maxlength="10"   style="margin-top:5px"/>
  <view></view>
  密码： <input type="password"  style="margin-top:5px"/>
  密码也可以这样定义：<input password  style="margin-top:5px"/>
移动客服：<input type="number" placeholder="10086"  placeholder-class="ph-style"
 placeholder-style="color:red"/>
<input disabled="false" />

test.wxss:

/* pages/test/test.wxss */
.ph-style{
  border:1px silver solid
}

效果如图所示