1.微信小程序
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
2.安装App小程序开发软件
下面是下载的链接
稳定版 Stable Build | 微信开放文档
下载稳定版就可以了
3.小程序的路由配置
要在app.json里面配置app的路由
这个里面是页面路径的配置
这个可以配置组件的底部栏
4.小程序的应用
01.文本标签
<view class="title">文本标签</view>
<view class="content">
<view>块状区域</view>
<view>块状区域</view>
<text>文本组件</text>
<text user-select="true">文本组件</text>
</view>
02.图片组件
<view class="title">图片组件-image</view>
<image src="/images/pic1.jpg" class="img1" mode="aspectFill"></image>
03.表单组件input-button
<view class="title">表单组件input-button</view>
<view class="content">
<input placeholder="请输入" class="inp" password="true"></input>
<button type="primary" style="width: 100%;">确定</button>
<button type="warn" size="mini">警告</button>
<button type="default" size="mini">默认</button>
</view>
04.switch-picker-icon
<view class="title">switch-picker-icon</view>
<view class="content">
<icon type="success"></icon>
<icon type="info" size="100"></icon>
<picker mode="date" header-text="标题">选择</picker>
<switch></switch>
<switch checked="true"></switch>
<switch checked="true" color="#f70"></switch>
<switch checked="true" type="checkbox"></switch>
</view>
05.容器组件scroll-view
<view class="title">容器组件scroll-view</view>
<scroll-view class="scrollView" scroll-y="true">
<view class="item">itemA</view>
<view class="item" style="background-color: aqua;">itemB</view>
<view class="item" style="background-color: green;">itemB</view>
</scroll-view>
<view>水平</view>
<scroll-view class="scrollView" scroll-x="true">
<view class="wrap">
<view class="item" style="background-color: rgb(230, 138, 19);">itemA</view>
<view class="item" style="background-color: aqua;">itemB</view>
<view class="item" style="background-color: green;">itemB</view>
</view>
</scroll-view>
06.轮播图
<view class="title">容器组件swiper</view>
<swiper indicator-dots="true" class="swiper" autoplay="true" circular="true">
<swiper-item>
<view style="background-color: aqua;">A</view>
</swiper-item>
<swiper-item>
<view style="background-color: rgb(189, 218, 29);">B</view>
</swiper-item>
<swiper-item>
<view>C</view>
</swiper-item>
</swiper>