一，视图容器组件

1，view

和html里面的div用法差不多。
有自己的四个属性：

2，scroll-view可滚动视图区域

允许视图做横向的滚动或者纵向的滚动

纵向滚动：

具体代码：

<!--pages/headline/headline.wxml-->
<view class="section"><view class="section_title">纵向滚动</view><scroll-view scroll-y="true" style="height:200px; overflow:hidden" scroll-into-view="{{toView}}"scroll-top="{{scrollTop}}"><view id="green" style="width:100%;height:100px;background-color:green;"></view><view id="red" style="width:100%;height:100px;background-color:red;"></view><view id="yellow" style="width:100%;height:100px;background-color:yellow;"></view><view id="blue" style="width:100%;height:100px;background-color:blue;"></view></scroll-view><view class="btn-area"><button type="default" style="margin:10px;" bindtap="tap">点击我滚动到下一个颜色块</button><button type="default" style="margin:10px;" bindtap="tapMove">点击向下滚动加10px</button></view>
</view>//js部分代码：
// pages/headline/headline.jsgreen
var order=['red','yellow','blue','green','red']
Page({/*** 页面的初始数据*/data: {toView:'red',scrollTop:100},// 每次点击toview的值变成下一个颜色块tap(e){for(var i=0;i<order.length;i++){if(order[i] ===this.data.toView){this.setData({toView:order[i+1]})break}}console.log(this.data. toView)},// 每次点击scroll-top的值就会增加10pxtapMove(e){this.setData({scrollTop:this.data.scrollTop+10})console.log(this.data.scrollTop)}
})

横向滚动：

<view class="section"><view class="section_title">新闻频道横向滚动</view><scroll-view scroll-x="true" style="width:100%"><view style="white-space:nowrap"><view style="margin-right:10px; display:inline-block">推荐</view><view style="margin-right:10px; display:inline-block">新闻</view><view style="margin-right:10px; display:inline-block">体育</view><view style="margin-right:10px; display:inline-block">财经</view><view style="margin-right:10px; display:inline-block">八卦</view><view style="margin-right:10px; display:inline-block">历史</view><view style="margin-right:10px; display:inline-block">闲谈</view><view style="margin-right:10px; display:inline-block">新闻</view><view style="margin-right:10px; display:inline-block">体育</view><view style="margin-right:10px; display:inline-block">财经</view><view style="margin-right:10px; display:inline-block">八卦</view><view style="margin-right:10px; display:inline-block">历史</view><view style="margin-right:10px; display:inline-block">闲谈</view><view style="margin-right:10px; display:inline-block">不想</view><view style="margin-right:10px; display:inline-block">不想</view></view></scroll-view>
</view>

改写成flex布局的话：

实际代码：

<view class="section"><view class="section_title">新闻频道横向滚动</view><scroll-view scroll-x="true" style="width:100%"><view style="display:flex;"><view style="margin-right:10px; flex-shrink:0">推荐</view><view style="margin-right:10px; flex-shrink:0">新闻</view><view style="margin-right:10px; flex-shrink:0">体育</view><view style="margin-right:10px; flex-shrink:0">财经</view><view style="margin-right:10px; flex-shrink:0">八卦</view><view style="margin-right:10px; flex-shrink:0">历史</view><view style="margin-right:10px; flex-shrink:0">闲谈</view><view style="margin-right:10px; flex-shrink:0">新闻</view><view style="margin-right:10px; flex-shrink:0">体育</view><view style="margin-right:10px; flex-shrink:0">财经</view><view style="margin-right:10px; flex-shrink:0">八卦</view><view style="margin-right:10px; flex-shrink:0">历史</view><view style="margin-right:10px; flex-shrink:0">闲谈</view><view style="margin-right:10px; flex-shrink:0">不想</view><view style="margin-right:10px; flex-shrink:0">不想</view></view></scroll-view>
</view>

实现的效果：

3，swiper滑块视图容器

实现的效果：

具体的wxml：

<view class="haibao"><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}"><swiper-item ><image src="{{item}}" class="slide-image" style="width: 100%"></image></swiper-item></block></swiper>
</view>

对应的js

// pages/food/food.js
Page({data: {indicatorDots:true,autoplay:true,interval:1000,duration:500,imgUrls:['../images/haibao/haibao-1.jpg','../images/haibao/haibao-2.jpg','../images/haibao/haibao-3.jpg']},
})

4，movable-view可移动视图容器

  <view class="section"><movable-area style="height:200px;width:100%;background:yellow"><movable-view style="height:20px;width:20px;background:red;" inertia direction="all"></movable-view></movable-area></view>

实现的效果：

5，cover-view覆盖原生组件的视图容器

实现的视频效果：

实际的html：

<view class="page-body"><view class="page-section tc"><video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn show-center-play-btn='{{true}}' show-play-btn="{{true}}" controlsshow-fullscreen-btnstyle="width:100%"></video><view style="margin: 30rpx auto"class="weui-label">弹幕内容</view><input model:value="{{inputValue}}"class="weui-input"type="text" placeholder="在此处输入弹幕内容" /><button style="margin: 30rpx auto" bindtap="bindSendDanmu"class="page-body-button"type="primary" formType="submit">发送弹幕</button></view>
</view>

对应的js:

// 获取随机颜色的函数#4c4601
function getRandomColor() {const rgb = []for (let i = 0; i < 3; ++i) {// Number.toString(16)转换为16进制let color = Math.floor(Math.random() * 256).toString(16)color = color.length === 1 ? '0' + color : colorrgb.push(color)}return '#' + rgb.join('')
}
Page({//初始化时创建视频对象，对应id=myVideoonReady() {this.videoContext = wx.createVideoContext('myVideo')},data: {inputValue: '',danmuList:[{text: '第 1s 出现的弹幕',color: '#ff0000',time: 1}, {text: '第 3s 出现的弹幕',color: '#ff00ff',time: 3}],},//点击开始按钮之后。开始播放视频bindPlayVideo() {this.videoContext.play()},//发送弹幕，使用 this.videoContext.sendDanmu方法，参数是两个，text和colorbindSendDanmu() {this.videoContext.sendDanmu({text: this.data.inputValue,color: getRandomColor()})this.setData({inputValue:''})},
//视频的报错处理videoErrorCallback(e) {console.log('视频错误信息:')console.log(e.detail.errMsg)}
})

二，基础内容组件

1，icon图标：通过设置icon标签设置属性和类名使用

对应的状态：

对应的html代码：

<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']}
})

2，text文本：实质上就是可以换行和空格的字符串

对应代码：

<view class="container"><view class="page-body"><view class="page-section page-section-spacing"><scroll-view  class="text-box" scroll-y="true" scroll-top="{{scrollTop}}"><text>{{text}}</text></scroll-view ><button  bindtap="add">add line</button><button bindtap="remove">remove line</button></view></view>
</view>

js代码：

const texts = ['2011年1月，微信1.0发布','同年5月，微信2.0语音对讲发布','10月，微信3.0新增摇一摇功能','2012年3月，微信用户突破1亿','4月份，微信4.0朋友圈发布','同年7月，微信4.2发布公众平台','2013年8月，微信5.0发布微信支付','2014年9月，企业号发布','同月，发布微信卡包','2015年1月，微信第一条朋友圈广告','2016年1月，企业微信发布','2017年1月，小程序发布','......'
]
Page({data: {text: ''},extraLine: [],add() {//得到第几行的数据存入，这样是循环取余，会一直加this.extraLine.push(texts[this.extraLine.length % 12])this.setData({//也就是text就是支持换行和空格的字符串text: this.extraLine.join('\n'),})setTimeout(() => {this.setData({scrollTop: 99999})}, 0)},remove() {if (this.extraLine.length > 0) {this.extraLine.pop()this.setData({text: this.extraLine.join('\n'),})}setTimeout(() => {this.setData({scrollTop: 99999})}, 0)}
})

3，进度条

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

4，rich-text富文本：可以写html然后渲染出来

三，丰富的表单组件

这部分内容多，但是都很简单，可以查看官网：
https://developers.weixin.qq.com/miniprogram/dev/component/button.html

小程序学习笔记（7）-使用小程序的组件构建UI界面相关推荐

微信小程序学习笔记2——一些小程序列表
[高频使用] 美团外卖滴滴公交查询车来了大众点评+ 京东购物摩拜单车滴滴出行DiDi 携程酒店机票火车票 [旅行] 驴妈妈门票预订飞常准查航班海南航空微应用南航e行去哪儿出行朋友家 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
小程序学习笔记（1）
小程序学习笔记(1) 以下是学习期间记录的笔记: 10-18号晚上学习笔记: 小程序实际上是需要下载安装的,只是很小,用户基本上觉察不到组件是具有一定的功能的代码的集合移动端适配: 物理像素:是图 ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
【小盐巴学习笔记】—美团吃饭哪家强？Python词云分析告诉你
[小盐巴学习笔记]-美团吃饭哪家强?Python词云分析告诉你效果图前言一.爬虫分析 1.分析网址 2.分析数据二.完整代码 1.爬取美团牛排店评论 2.绘制词云图 3.词云分析总结效果图 ...
【C#】 WinForm窗体应用程序学习笔记（一）
WinForm窗体应用程序学习笔记(一) 由于控制台应用程序的运行结果都是通过控制台输出的,不能提供良好的用户体验,为此,C#提供了WinForm窗体应用程序.WinForm具有一系列丰富的控件,用于 ...
Linux进程线程学习笔记：运行新程序
Linux进程线程学习笔记:运行新程序周银辉在上一篇中我们说到,当启动一个新进程以后,新进程会复制父进程的大部份上下文并接着运行父进程中的代码,如果我们使新进程不运行原父进程的代码,转而运行另外一 ...

小程序学习笔记（7）-使用小程序的组件构建UI界面