4--小程序基础组件及常用组件介绍和小程序布局

小程序基础组件及常用组件介绍和小程序布局

小程序基础组件

icon

文档https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

wxml:

<view>
<icon class="" type="success" size="23" color=""></icon>
<icon class="" type="success" size="63" color=""></icon>
<icon class="" type="success" size="103" color=""></icon>
</view>
<view>
<icon type="warn" size="23px"></icon>
<icon type="warn" size="23rpx"></icon>
<icon type="warn" size="50rpx"></icon>
<icon type="warn" size="100rpx"></icon>
</view>

预览效果如下所示：

progress

文档：https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

wxml：

<!--
 percent="30"当前进度在30%的位置 
show-info="true" 显示当前百分百的文字
border-radius="10" 圆角大小
-->
<progress percent="30" show-info="true" border-radius="10"></progress>

预览效果如下所示：

改变进度条的线的宽度

注意：

进度条的高度，不能用style="height=120" 来改变

stroke-width="50rpx"

wxml：

<progress percent="30" show-info="true" border-radius="10" stroke-width="50rpx" ></progress>

改变进度条的颜色和背景颜色

wxml:

<progress percent="30" show-info="true" border-radius="10" stroke-width="50rpx" actieColor="red" backgroundColor="blue"></progress>

进度条动画active="true"

wxml:

<progress percent="30" show-info="true" border-radius="10" stroke-width="50rpx" actieColor="red" backgroundColor="blue" active="true"
></progress>

rich-text

文档：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

wxml:

<!-- 想在小程序传入html标签的话，我们必须使用rich-text富文本组件 -->
<rich-text nodes="{{textStr}}"></rich-text>

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    textStr:"<div class='div_class' style='line-height:60px;color:red'>你好，小程序</div>"
  },

预览效果，如下所示：

text

文档：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

wxml:

<text selectable="true">微信小程序</text>

设置这个属性selectable="true"，长时间选择文本，文本可以被选中。

预览效果，如下所示：

小程序画布组件canvas的使用

canvas文档https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

wxml:

<canvas style="width=600rpx;height:400rpx;" canvas-id="canvas"></canvas>

js:

  onLoad: function (options) {
    console.log('ready')
    var context = wx.createCanvasContext('canvas');
    context.setStrokeStyle('#ff0000');
    context.setLineWidth(2);
    context.moveTo(160,100);
    context.arc(100,100,60,0,2*Math.PI,true);
    context.stroke();
    context.draw();
  }

绘制空心圆，如下所示：

js：

  onLoad: function (options) {
    console.log('ready')
    var context = wx.createCanvasContext('canvas');
    // context.setStrokeStyle('#ff0000');
    context.setFillStyle('#ff0000')
    context.setLineWidth(2);
    context.moveTo(160,100);
    context.arc(100,100,60,0,2*Math.PI,true);
    // context.stroke();
    context.fill();
    context.draw();
  }

绘制实心圆，如下所示：

绘制笑脸：

js：

  onLoad: function (options) {
    console.log('ready')
    var context = wx.createCanvasContext('canvas');
    // 开始一个新的路径
    context.beginPath();
    context.setStrokeStyle('#ff0000');
    context.setLineWidth(2);
    // 移动到160,100这个位置
    context.moveTo(160,100);
    // 绘制半圆
    context.arc(100,100,60,0,2*Math.PI,true);
    // 移动到140,100这个位置
    context.moveTo(140,100);
    // 绘制半圆
    context.arc(100,100,40,0,Math.PI,false);
    // 移动到85，80这个位置
    context.moveTo(85,80);
    // 绘制眼睛--在80,80位置上，绘制半径是5像素的圆
    context.arc(80,80,5,0,2*Math.PI,true);
    // 移动到125,80这个位置
    context.moveTo(125,80);
    // 绘制眼睛--在120,80位置上，绘制半径是5像素的圆
    context.arc(120,80,5,0,2*Math.PI,true);
    
    // 对当前路径进行描边
    context.stroke();
    context.draw();
    // 关闭当前路径
    context.closePath();
  },

如下所示：

扩展绘制圆的另一个方法：

wxml：

<canvas style="width=300rpx;height=100rpx" canvas-id="canvas"></canvas>

js：

  onLoad: function (options) {
    // 页面渲染完成
    console.log('ready')
    // 创建并返回绘制上下文的context对象
    var cxt = wx.createContext();
    // 开始一个新的路径
    cxt.beginPath();
    cxt.setStrokeStyle('#ff0000');
    cxt.setLineWidth(2);
    // 设置一个原点（150,100）,半径为50的圆的路径到当前路径
    cxt.arc(150,100,50,0,2*Math.PI,true);
    // 对当前路径进行描边
    cxt.stroke();
    // 关闭当前路径
    cxt.closePath();
    wx.drawCanvas({
      // 画布标识，对应wxml上的canvas-id属性上的值
      canvasId:'canvas',
      // 导出context()绘制的线并显示到页面
      actions:cxt.getActions()
    })
  }

如下所示：