微信小程序常用学习(一)内置组件

首先下载微信开发者工具，官网：稳定版 Stable Build | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

(根据电脑的配置来安装,例如:win7系统适合安装1.05)

安装后创建小程序，分析一下里面的各个文件的作用

 教程开始

1.在页面的模板xxx.wxml(相当于html文件)里写入内容，首先是文本标签，介绍两个最常用的

 <view>巴拉巴拉巴拉</view>
  <text>前端前端棒，</text>
  <text>前端前端好</text>

 页面效果如下

 由此可见<view></view>相当于HTML中的div，而<text></text>相当于span

2.按钮

  <button type="primary">确定</button>
  <button type="warn" size="mini">警告</button>
  <button type="default" size="mini">默认</button>

效果

 

3.文本标签

<input placeholder="请输入内容" class="inp1" />

值得注意的是微信小程序里的文本标签没有样式，连边框都没有，需要的话自己设置样式
加一些border border-radius width, height 等等样式

效果

 4，图片标签

<image src="../../images/pic1.jpg" mode="aspectFit"></image>

这个是添加本地图片,想要更改背景图/base64 可见之前的教程

效果

5. 开关选择器

<switch></switch>
<switch checked="true" color="#f70"></switch>
<switch checked="true"></switch>
<switch checked="true" type="checkbox"></switch>

这是开关选择器，checked=true显示为开状态，type=checkbox会变成一个复选框

效果

 6，日期选择器

<picker mode="date" header-text="标题" style="width: 300rpx;height: 100rpx;border: 1rpx solid #666;text-align: center;line-height: 100rpx;">点我选择日期</picker>

一个选择器，有很多种类型，这里mode=date意思是日期选择器

页面显示

 点击后显示

值得一提的是,样式真的报看,想要样式的还得自己添加修改  或者使用组件库vant等

  7，图标

 

<icon type="success"></icon>
<icon type="info" size="50"></icon>
<icon type="warn" size="80"></icon>
<icon type="waiting" size="100"></icon>

图标，type指定图标类型，不指定默认为success类型，size指定图标大小

效果

8，元素水平滚动

<view>水平滚动</view>
<scroll-view class="scrollView" scroll-x="true">
<view class="warp">
  <view class="item">itemA</view>
  <view class="item" style="background-color: yellow;">itemB</view>
  <view class="item" style="background-color: aqua;">itemC</view>
</view>
</scroll-view>

视图容器，scroll-view标签的scroll-x=true此时此标签里的元素可以水平翻动

效果

 拖动鼠标向左向右是可以拖动的

垂直滚动，只是把scroll-view的scroll-x变成scroll-y=true即可

9.幻灯片组件

<view>swiper组件</view>
<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true">
<swiper-item>
<view style="background-color: skyblue;">A</view>
</swiper-item>
<swiper-item>
<view style="background-color: aqua;">B</view>
</swiper-item>
<swiper-item>
<view style="background-color: red;">C</view>
</swiper-item>
</swiper>

效果