空闲时间写个小程序

小程序概述

小程序与普通网页开发的区别：

申请账号与安装工具

申请账号：

开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。

1.进入 小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号，在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

2.登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID，有了小程序帐号之后，我们需要一个工具来开发小程序。

安装工具：

前往 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。
打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧

小程序代码构成

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 “不使用云服务” （注意: 你要选择一个空的目录才可以创建项目），点击确认，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

结构：
JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

常用组件

基础组件：
表单组件：

其他组件：

了解完这些我们就可以上手了。

案例

1.实现横向滚动：

<!-- wxml -->
<scroll-view scroll-x="true">
  <view class="scroll-view-item"></view>
  <view class="scroll-view-item"></view>
  <view class="scroll-view-item"></view>
</scroll-view>

<!-- wxss/css -->
scroll-view{
  white-space:nowrap;
}

.scroll-view-item{
  width: 25%;
  height: 125px;
  display: inline-block;
  margin: 10px; 
  background-color: palegreen;
}

效果：

2.实现轮播图

<!-- wxml -->
<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>

<!-- wxss -->
.swiper {
    height: 250rpx;
}
.swiper view {
    height: 250rpx;
    text-align: center;
}

效果：

3.图标
type：可以改变图标类型(查看官方文档获取更多图标类型)；
size：图标大小；

switch：开关选择器；
checked：是否选择；
type：样式，有效值有switch, checkbox;

<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>

结果：

语法

列表渲染：

// wxml
<view class="title">列表渲染</view>
<view class="content">
    <view wx:for="{{list}}" wx:key="index">
    {{index+1}}-{{item}}</view>
</view>

//js
 data: {
        list:["小程序","vue","react"]
    },

效果：

条件渲染：

// wxml
<view class="title">条件渲染</view>
<view class="content">
    <view wx:if="{{isLog}}">欢迎回来</view>
    <view wx:else>请登录</view>
    <view wx:if="{{score>=90}}">可以，有我当年的风范，秘籍拿去</view>
    <view wx:elif="{{score>=80}}">还需要努力，秘籍给你好好练</view>
    <view wx:elif="{{score>=70}}">你这太拉了，让我怎么给你秘籍</view>
    <view wx:else="">废物，今日将你逐出师门</view>
</view>

//js
 data: {
        isLog:true,
        score:90,
    },

效果：

可以看到小程序的语法与vue有很大的相似部分。