微信小程序——weui框架、icon默认图标、Cells文字标题箭头、form表单提交

1、weui框架

优势：

1. 不需要占体积
2. 同微信客户端一致的视觉效果
3. 性能比其他框架会好一点

weui框架的引用：
在app.json里面添加

  "useExtendedLib": {
    "weui": true    
    },

在需要使用的页面的json上添加，例如：

{
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog",
  }
}

2、icon默认图标

使用weui的框架里的图标，不需要导入图标图片，直接用代码就好。
效果图

在需要使用的页面的json上添加：

{
  "usingComponents": {
    "mp-icon": "weui-miniprogram/icon/icon"
  }
}

<mp-icon type="field" icon="add" color="black" size="{{25}}"></mp-icon>

若要使用其他的图标，可以查看：
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html

3、Cells文字标题箭头

效果图：

.json代码：

{
  "usingComponents": {
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
  }
}

.xml代码：

  //link表示带箭头
  <mp-cells ext-class="my-cells" title="带说明的列表项">
      <mp-cell value="标题文字" footer="说明文字" link></mp-cell>
    </mp-cells>

第二种效果图：

      <mp-cell  footer="说明文字"  link>
        <view style="display: inline-block; vertical-align: middle">单行列表</view>
        <mp-badge style="margin-left: 5px;" content="New" />
      </mp-cell>

4、form表单提交