小程序内置组件

Text文本组件

Text 组件用于显示文本, 类似于 span 标签, 是行内元素

decode可以解析的有   < > & '    

<text user-select>{{message}}</text>
<text decode>&gt;</text>

Button按钮组件

Button 组件用于创建按钮，默认块级元素

<button size="mini" type="default">default</button>
<button size="mini" type="warn">warn</button>
<button size="mini" type="primary">primary</button>
<button size="mini" plain>plain</button>
<button size="mini" disabled>disabled</button>
<button size="mini" loading>loading</button>
<button size="mini" hover-class="active">按钮</button>

open-type

<button size="mini" type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo">用户信息</button>
<button size="mini" type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机号码</button>

view视图组件

视图组件（块级元素，独占一行，通常用作容器组件）

Image媒体组件

Image 组件用于显示图片

• 其中 src 可以是本地图片，也可以是网络图片
• mode 属性使用也非常关键，详情查看官网：
  • https://developers.weixin.qq.com/miniprogram/dev/component/image.html
  • 注意：image 组件默认宽度 320 px、高度 240 px

<image src="/assets/zznh.png" mode="widthFix" />

补充一个 API，wx.chooseMedia

<button bind:tap="onChooseImage">选择照片</button>
<image src="{{chooseImageUrl}}" mode="aspectFit"/>
<script>
  onChooseImage() {
    wx.chooseMedia({
      mediaType: 'image'
    }).then(res => {
      const imagePath = res.tempFiles[0].tempFilePath
      this.setData({ chooseImageUrl: imagePath })
    })
  }
</script>

scroll-view视图组件

注意事项：

• 实现滚动效果必须添加 scroll-x 或者 scroll-y 属性（只需要添加即可，属性值相当于为 true 了）
• 垂直方向滚动必须设置 scroll-view 一个高度

<scroll-view class="container scroll-x" scroll-x enable-flex>
  <block wx:for="{{viewColors}}" wx:key="*this">
    <view class="item" style="background: {{item}};">{{item}}</view>
  </block>
</scroll-view>
<style>
.container {
  background-color: orange;
  height: 150px;
}
.item {
  width: 100px;
  height: 100px;
  color: white;
  flex-shrink: 0;
}
.scroll-x {
  display: flex;
}
</style>

公共属性

基础组件

input组件

<input type="text" model:value="{{message}}" />