微信小程序入门篇

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>