【微信小程序】02 常用标签组件

轮播标签：

     轮播图

     <swiper>

      <!-- 轮播项 -->

      <swiper-item>1</swiper-item>

      <swiper-item>2</swiper-item>

      <swiper-item>3</swiper-item>

      <swiper-item>4</swiper-item>

      <swiper-item>5</swiper-item>

     </swiper>

默认是可以直接拖拽滑动的，但是不会自己滚动，且不循环

嵌入图片进行轮播处理：

     轮播图

     <swiper>

      <!-- 轮播项 -->

      <!-- widthFix 宽度修复 -->

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

     </swiper>

设置指示点：

     <swiper indicator-dots>

      <!-- 轮播项 -->

      <!-- widthFix 宽度修复 -->

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

     </swiper>

默认的指示点是黑色的，这个效果很明显是看不见的：

可以设置指示点的颜色：

     <swiper indicator-dots indicator-color="white">

      <!-- 轮播项 -->

      <!-- widthFix 宽度修复 -->

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

     </swiper>

这样明显多了

设置选中的指示点颜色：

     轮播图

     <swiper indicator-dots indicator-color="white" indicator-active-color="skyblue">

      <!-- 轮播项 -->

      <!-- widthFix 宽度修复 -->

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

     </swiper>

如果要指示点不完全覆盖图片，可以使用rgba着色：

实现自动播放，和切换间隔设置：

     <swiper indicator-dots indicator-color="white" indicator-active-color="skyblue" autoplay interval="2000">

      <!-- 轮播项 -->

      <!-- widthFix 宽度修复 -->

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

     </swiper>

实现重复循环（轮播）：

     <swiper indicator-dots indicator-color="white" indicator-active-color="skyblue" autoplay interval="2000"circular>

      <!-- 轮播项 -->

      <!-- widthFix 宽度修复 -->

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

     </swiper>

更改轮播方向，垂直轮播：

垂直轮播的指示点是在右边这里了

     <swiper indicator-dots indicator-color="white" indicator-active-color="skyblue" autoplay interval="2000" circular vertical>

      <!-- 轮播项 -->

      <!-- widthFix 宽度修复 -->

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

     </swiper>

设置前后间距，故意露出前后的预展示：

     <swiper

      indicator-dots

      indicator-color="white"

      indicator-active-color="skyblue"

      autoplay

      interval="2000"

      circular

      vertical

      previous-margin="10"

      next-margin="10"

      >

      <!-- 轮播项 -->

      <!-- widthFix 宽度修复 -->

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

      <swiper-item><image src="https://images2.alphacoders.com/116/thumb-1920-1161073.jpg" mode="widthFix"></image></swiper-item>

     </swiper>

表单组件：

按钮：

     <button type="primary">按钮</button>

     <button type="default">按钮</button>

     <button type="warn">按钮</button>

发现下面两个样式太丑了

视频是说app/json设置了这个样式

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs",

    "pages/pageA/pageA",

    "pages/pageB/pageB"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "Weixin",

    "navigationBarTextStyle":"black"

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

因为这个影响的

删除之后：

设置禁用状态：

<button type="primary" disabled="true">按钮4</button>

设置加载状态：

<button type="primary" loading="true">按钮4</button>

‘

设置微信开放能力，但是调试工具是不支持此功能的：

  <!-- 微信开放功能 -->

  <button open-type="contact">联系客服</button>

表单基本使用：

  <!-- 表单设置 -->

  <form

    bindreset="resetMethod"

    bindsubmit="submitMethod"

  >

  <button form-type="submit">提交表单</button>

  <button form-type="reset">重置表单</button>

  </form>

属性 bindXXXX用于绑定执行的事件

复选框 checkbox:

  <checkbox value="" checked="true">选中</checkbox>

  <checkbox value="" >未选中</checkbox>

官方实例：

<view class="container">

  <view class="page-body">

    <view class="page-section page-section-gap">

      <view class="page-section-title">默认样式</view>

      <label class="checkbox">

        <checkbox value="cb" checked="true"/>选中

      </label>

      <label class="checkbox">

        <checkbox value="cb" />未选中

      </label>

    </view>

    <view class="page-section">

      <view class="page-section-title">推荐展示样式</view>

      <view class="weui-cells weui-cells_after-title">

        <checkbox-group bindchange="checkboxChange">

          <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">

            <view class="weui-cell__hd">

              <checkbox value="{{item.value}}" checked="{{item.checked}}"/>

            </view>

            <view class="weui-cell__bd">{{item.name}}</view>

          </label>

        </checkbox-group>

      </view>

    </view>

  </view>

</view>

js:

Page({

  onShareAppMessage() {

    return {

      title: 'checkbox',

      path: 'page/component/pages/checkbox/checkbox'

    }

  },

  data: {

    items: [

      {value: 'USA', name: '美国'},

      {value: 'CHN', name: '中国', checked: 'true'},

      {value: 'BRA', name: '巴西'},

      {value: 'JPN', name: '日本'},

      {value: 'ENG', name: '英国'},

      {value: 'FRA', name: '法国'}

    ]

  },

  checkboxChange(e) {

    console.log('checkbox发生change事件，携带value值为：', e.detail.value)

    const items = this.data.items

    const values = e.detail.value

    for (let i = 0, lenI = items.length; i < lenI; ++i) {

      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {

        if (items[i].value === values[j]) {

          items[i].checked = true

          break

        }

      }

    }

输入项 Input：

<view class="page-body">

  <view class="page-section">

    <view class="weui-cells__title">可以自动聚焦的input</view>

    <view class="weui-cells weui-cells_after-title">

      <view class="weui-cell weui-cell_input">

        <input class="weui-input" auto-focus placeholder="将会获取焦点"/>

      </view>

    </view>

  </view>

  <view class="page-section">

    <view class="weui-cells__title">控制最大输入长度的input</view>

    <view class="weui-cells weui-cells_after-title">

      <view class="weui-cell weui-cell_input">

        <input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />

      </view>

    </view>

  </view>

  <view class="page-section">

    <view class="weui-cells__title">实时获取输入值：{{inputValue}}</view>

    <view class="weui-cells weui-cells_after-title">

      <view class="weui-cell weui-cell_input">

        <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>

      </view>

    </view>

  </view>

  <view class="page-section">

    <view class="weui-cells__title">控制输入的input</view>

    <view class="weui-cells weui-cells_after-title">

      <view class="weui-cell weui-cell_input">

        <input class="weui-input"  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />

      </view>

    </view>

  </view>

  <view class="page-section">

    <view class="weui-cells__title">控制键盘的input</view>

    <view class="weui-cells weui-cells_after-title">

      <view class="weui-cell weui-cell_input">

        <input class="weui-input"  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />

      </view>

    </view>

  </view>

  <view class="page-section">

    <view class="weui-cells__title">数字输入的input</view>

    <view class="weui-cells weui-cells_after-title">

      <view class="weui-cell weui-cell_input">

        <input class="weui-input" type="number" placeholder="这是一个数字输入框" />

      </view>

    </view>

  </view>

  <view class="page-section">

    <view class="weui-cells__title">密码输入的input</view>

    <view class="weui-cells weui-cells_after-title">

      <view class="weui-cell weui-cell_input">

        <input class="weui-input" password type="text" placeholder="这是一个密码输入框" />

      </view>

    </view>

  </view>

  <view class="page-section">

    <view class="weui-cells__title">带小数点的input</view>

    <view class="weui-cells weui-cells_after-title">

      <view class="weui-cell weui-cell_input">

        <input class="weui-input" type="digit" placeholder="带小数点的数字键盘"/>

      </view>

    </view>

  </view>

  <view class="page-section">

    <view class="weui-cells__title">身份证输入的input</view>

    <view class="weui-cells weui-cells_after-title">

      <view class="weui-cell weui-cell_input">

        <input class="weui-input" type="idcard" placeholder="身份证输入键盘" />

      </view>

    </view>

  </view>

  <view class="page-section">

    <view class="weui-cells__title">控制占位符颜色的input</view>

    <view class="weui-cells weui-cells_after-title">

      <view class="weui-cell weui-cell_input">

        <input class="weui-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />

      </view>

    </view>

  </view>

</view>

JS：

Page({

  data: {

    focus: false,

    inputValue: ''

  },

  bindKeyInput: function (e) {

    this.setData({

      inputValue: e.detail.value

    })

  },

  bindReplaceInput: function (e) {

    var value = e.detail.value

    var pos = e.detail.cursor

    var left

    if (pos !== -1) {

      // 光标在中间

      left = e.detail.value.slice(0, pos)

      // 计算光标的位置

      pos = left.replace(/11/g, '2').length

    }

    // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置

    return {

      value: value.replace(/11/g, '2'),

      cursor: pos

    }

    // 或者直接返回字符串,光标在最后边

    // return value.replace(/11/g,'2'),

  },

  bindHideKeyboard: function (e) {

    if (e.detail.value === '123') {

      // 收起键盘

      wx.hideKeyboard()

    }

  }

})

开关按钮 Switch：

<view class="page">

    <view class="page__hd">

        <text class="page__title">switch</text>

        <text class="page__desc">开关</text>

    </view>

    <view class="page__bd">

        <view class="section section_gap">

            <view class="section__title">type="switch"</view>

            <view class="body-view">

                <switch checked="{{switch1Checked}}" bindchange="switch1Change"/>

            </view>

        </view>

        <view class="section section_gap">

            <view class="section__title">type="checkbox"</view>

            <view class="body-view">

                <switch type="checkbox" checked="{{switch2Checked}}" bindchange="switch2Change"/>

            </view>

        </view>

    </view>

</view>

JS:

var pageData = {

  data: {

    switch1Checked: true,

    switch2Checked: false,

    switch1Style: '',

    switch2Style: 'text-decoration: line-through'

  }

}

for (var i = 1; i <= 2; ++i) {

  (function (index) {

    pageData[`switch${index}Change`] = function (e) {

      console.log(`switch${index}发生change事件，携带值为`, e.detail.value)

      var obj = {}

      obj[`switch${index}Checked`] = e.detail.value

      this.setData(obj)

      obj = {}

      obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through'

      this.setData(obj)

    }

  })(i)

}

Page(pageData)

Icon 提示图标：

<view class="container">

  <view class="icon-box">

    <icon class="icon-box-img" type="success" size="93"></icon>

    <view class="icon-box-ctn">

      <view class="icon-box-title">成功</view>

      <view class="icon-box-desc">用于表示操作顺利完成</view>

    </view>

  </view>

  <view class="icon-box">

    <icon class="icon-box-img" type="info" size="93"></icon>

    <view class="icon-box-ctn">

      <view class="icon-box-title">提示</view>

      <view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>

    </view>

  </view>

  <view class="icon-box">

    <icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>

    <view class="icon-box-ctn">

      <view class="icon-box-title">普通警告</view>

      <view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>

    </view>

  </view>

  <view class="icon-box">

    <icon class="icon-box-img" type="warn" size="93"></icon>

    <view class="icon-box-ctn">

      <view class="icon-box-title">强烈警告</view>

      <view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view>

    </view>

  </view>

  <view class="icon-box">

    <icon class="icon-box-img" type="waiting" size="93"></icon>

    <view class="icon-box-ctn">

      <view class="icon-box-title">等待</view>

      <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>

    </view>

  </view>

  <view class="icon-box">

    <view class="icon-small-wrp">

      <icon class="icon-small" type="success_no_circle" size="23"></icon>

    </view>

    <view class="icon-box-ctn">

      <view class="icon-box-title">多选控件图标_已选择</view>

      <view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>

    </view>

  </view>

  <view class="icon-box">

    <view class="icon-small-wrp">

      <icon class="icon-small" type="circle" size="23"></icon>

    </view>

    <view class="icon-box-ctn">

      <view class="icon-box-title">多选控件图标_未选择</view>

      <view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>

    </view>

  </view>

  <view class="icon-box">

    <view class="icon-small-wrp">

      <icon class="icon-small" type="warn" size="23"></icon>

    </view>

    <view class="icon-box-ctn">

      <view class="icon-box-title">错误提示</view>

      <view class="icon-box-desc">用于在表单中表示出现错误</view>

    </view>

  </view>

  <view class="icon-box">

    <view class="icon-small-wrp">

      <icon class="icon-small" type="success" size="23"></icon>

    </view>

    <view class="icon-box-ctn">

      <view class="icon-box-title">单选控件图标_已选择</view>

      <view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>

    </view>

  </view>

  <view class="icon-box">

    <view class="icon-small-wrp">

      <icon class="icon-small" type="download" size="23"></icon>

    </view>

    <view class="icon-box-ctn">

      <view class="icon-box-title">下载</view>

      <view class="icon-box-desc">用于表示可下载</view>

    </view>

  </view>

  <view class="icon-box">

    <view class="icon-small-wrp">

      <icon class="icon-small" type="info_circle" size="23"></icon>

    </view>

    <view class="icon-box-ctn">

      <view class="icon-box-title">提示</view>

      <view class="icon-box-desc">用于在表单中表示有信息提示</view>

    </view>

  </view>

  <view class="icon-box">

    <view class="icon-small-wrp">

      <icon class="icon-small" type="cancel" size="23"></icon>

    </view>

    <view class="icon-box-ctn">

      <view class="icon-box-title">停止或关闭</view>

      <view class="icon-box-desc">用于在表单中，表示关闭或停止</view>

    </view>

  </view>

  <view class="icon-box">

    <view class="icon-small-wrp">

      <icon class="icon-small" type="search" size="14"></icon>

    </view>

    <view class="icon-box-ctn">

      <view class="icon-box-title">搜索</view>

      <view class="icon-box-desc">用于搜索控件中，表示可搜索</view>

    </view>

  </view>

</view>

JS:

Page({

  data: {

    iconSize: [20, 30, 40, 50, 60, 70],

    iconColor: [

      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'

    ],

    iconType: [

      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'

    ]

  }

})

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	类型	默认值	必填	说明	最低版本
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的颜色，同css的color	1.0.0

进度条 Progress:

<view class="progress-box">

  <progress percent="20" show-info stroke-width="3"/>

</view>

<view class="progress-box">

  <progress percent="40" active stroke-width="3" />

  <icon class="progress-cancel" type="cancel"></icon>

</view>

<view class="progress-box">

  <progress percent="60" active stroke-width="3" />

</view>

<view class="progress-box">

  <progress percent="80" color="#10AEFF" active stroke-width="3" />

</view>

属性设置：

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	类型	默认值	必填	说明	最低版本
percent	number		否	百分比0~100	1.0.0
show-info	boolean	false	否	在进度条右侧显示百分比	1.0.0
border-radius	number/string	0	否	圆角大小	2.3.1
font-size	number/string	16	否	右侧百分比字体大小	2.3.1
stroke-width	number/string	6	否	进度条线的宽度	1.0.0
color	string	#09BB07	否	进度条颜色（请使用activeColor）	1.0.0
activeColor	string	#09BB07	否	已选择的进度条的颜色	1.0.0
backgroundColor	string	#EBEBEB	否	未选择的进度条的颜色	1.0.0
active	boolean	false	否	进度条从左往右的动画	1.0.0
active-mode	string	backwards	否	backwards: 动画从头播；forwards：动画从上次结束点接着播	1.7.0
duration	number	30	否	进度增加1%所需毫秒数	2.8.2
bindactiveend	eventhandle		否	动画完成事件	2.4.1

【微信小程序】02 常用标签组件的更多相关文章

微信小程序(3)——常用的组件
view: view是小程序中的视图容器之一,似于html中的<div>标签 <view class="section"> <view class=& ...
使用wepy开发微信小程序01——常用的组件
1.axio.js 'use strict' import axios from 'axios' import wepyAxiosAdapter from 'wepy-plugin-axios/dis ...
[小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
微信小程序(二十)-UI组件(Vant Weapp)-01按装配置
1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...
【微信小程序】常用组件及自定义组件
(一) 常用标签组件你可以理解为传统页面开发时候的各种标签,例如 div span 等等,我这里只说一些常用的,这样就能能搭建出一个基本的页面了,但是如果想要更加美观以及拥有更好的体验,就需要 XS ...
微信小程序基本介绍及组件
创建项目微信开发工具深入介绍 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 基本项目目录 1. 配置 ...
微信小程序开发05-日历组件的实现
接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是 ...
微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题
1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...
微信小程序_(表单组件)checkbox与label
微信小程序组件checkbox官方文档传送门微信小程序组件label官方文档传送门 Learn 一.checkbox组件二.label组件与checkbox组件共用一.checkbox组件 ...

随机推荐

C# 利用Autofac批量接口注入依赖【学习记录】
背景: 本人在一位大佬的Colder框架中看到了这个接口注入,然后呢就想学习一下ioc思想与di设计模式.此写法给我的感觉就是非常的优雅 ,优雅永不过时.关于接口注入的概念和ioc和di具体是什么 ...
vue自定义指令 - directive
https://cn.vuejs.org/v2/guide/custom-directive.html 除了核心功能默认内置的指令,Vue也允许注册自定义指令.有的情况下,对普通 DOM 元素进行底层 ...
一款.NET开源、免费、实用的多功能原神工具箱（改善桌面端玩家的游戏体验）
前言今天大姚给大家分享一款.NET开源(MIT License).免费.实用的多功能原神工具箱,旨在改善桌面端玩家的游戏体验:胡桃工具箱. 工具箱介绍胡桃工具箱是一款.NET开源(MIT Lice ...
springboot3时代创建springboot2程序项目
springboot3时代创建springboot2程序项目目前,IDEA,springboot 官网,都不能创建基于JDK8(JDK1.8)的springboot程序了. 解决办法: 1. 先在官 ...
java.lang.NoClassDefFoundError: com/google/gson/GsonBuilder
Exception in thread "main" java.lang.NoClassDefFoundError: com/google/gson/GsonBuilder 解决方 ...
Zenlayer如何将万台设备监控从Zabbix迁移到Flashcat
作为全球首家以超连接为核心的云服务商,Zenlayer 致力于将云计算.内容服务和边缘技术融合,为客户提供全面的解决方案.通过构建可靠的网络架构和高效的数据传输,Zenlayer 帮助客户实现更快速. ...
哈啰面试：说说Dubbo运行原理？
Dubbo 是一款高性能.轻量级的开源 RPC(远程过程调用)框架,主要用于构建分布式服务和微服务架构.那 Dubbo 又是如何运行的呢?让我们一起来看. 1.核心组件要说 Dubbo 运行流程就不 ...
springboot+security自定义登录-1-基础-自定义用户和登录界面
为何学习spring security? 理由如下: 1)虽然可以不用,但难免部分客户又要求 2)某种程度上,security还是不错的,譬如csrf,oauth等等,省了一些功夫. 3)虽然spri ...
Markdown常用语法详解
背景知识什么是html html是一种网页标记语言.我们平常见到的那么好看的网页就是通过html语言来编写的. html语言举例: <h1>hello world</h1> ...
写给rust初学者的教程（三）：闭包、智能指针、并发工具
这系列RUST教程一共三篇.这是最后一篇,介绍RUST语言的进阶概念.主要有闭包.智能指针.并发工具. 上一篇:写给rust初学者的教程(二):所有权.生存期 closure "闭包&quo ...