微信小程序快速入门篇（一）

一、小程序的介绍

在2017年的时候，微信推出了 一种不需要下载安装就可以使用的应用程序，也就是常说的 小程序

二、小程序开发前的准备

1. 我们先去微信公众平台，注册账号并登录 官网 https://mp.weixin.qq.com/ 注册了之后我们下载开发者工具
   在【已登录】的小程序页面中，点击【开发工具】
   
   找到【开发者工具】，点击【下载】
   
   推荐下载【稳定版本】，大家可以根据自己的系统进行选择下载
   
   一路下一步，即可完成安装

三、开发第一个小程序应用

1、打开微信开发者工具，进行扫码登录
2、登录成功之后，可以得到创建小程序页面

3、我们在小程序项目 选择小程序 然后点击加号来创建



看到这个页面代表我们的小程序创建成功了

四、了解小程序的基本组成结构

小程序的每个页面都是一个文件夹组成的，全部放在pages文件夹中


utils文件夹是放一些工具类的
app.json是小程序的公共配置文件
app.wxss是小程序的公共样式表
project.config.json文件是项目的配置文件，会记录小程序的全部配置
sitemao.json文件是表示页面是否可以被微信索引

小程序的基本语法 wxml

wxml和html有什么不一样呢？
wxml是小程序的一套标签语言，用来构建小程序的结构，其作用类似于网页开发的HTML
他们的区别

1. 标签名不一样

   HTML（div,span,im,a）
   wxml (view,text,image,naviator) 	
   

2. 属性节点不一样
   HTML <a href=‘xxx’></>
   wxml <naviator></navator>

3. wxml提供了动态渲染数据的模板语法
   数据绑定 提交渲染 列表渲染

WXSS

1. wxss是一套样式语言，用于描述wxml的组件样式
2. 类似于CSS，基于CSS的大部分特性
3. 新增了尺寸单位 rpx ,一个rpx代表页面的宽度 1/750
4. 提供了全局的样式和局部样式
5. 全局：存放在根目录的 ,WXSS
6. 局部：存放在页面文件夹的 .wxss
7. 局部样式 > 全局样式
8. wxss支持css的选择器 推荐使用( class )

.json文件的作用

小程序中的 .json 文件有两种 根目录的和页面中的

1. 根目录
   app.json是用于修改项目的基本配置的
   比如 修改顶部的样式
   

2. 页面中的.json文件作用是一样的 他的优先级高

小程序的宿主环境和运行环境
宿主环境就是我们这个程序需要在哪里运行 那么宿主环境就是什么 小程序是运行在微信上的 那么他的宿主环境就是微信
运行环境

小程序的基本组件(标签)

1. view
   视图容器 可以理解为我们HTML中的 div 标签
   属性
   hover-class 当我们点击的时候可以给他添加一个类目
   hover-stop=propagation 类似于 HTML的阻止冒泡
2. scrollview
   可滚动试图区域 就是给他添加了 voerfloat：scroll
   需要满足条件才能显示滚动条
   内容宽度/高度超出
   x轴设置了 scroll-x / y轴 scroll-y

	<scroll-view class="scroll-view"  scroll-x  scroll-y>
	<view class="scroll-item item1">1</view>
	<view class="scroll-item item2">2</view>
	<view class="scroll-item item3">3</view>

	.scroll-view{
	  width: 150px;
	  height: 150px;
	  border:3px solid #000;
	}
	.scroll-item {
	  height: 100px;
	  width: 200px;
	}
	.item1 {
	  background-color: red;
	}
	.item2{
	  background-color: orange;
	}
	.item3 {
	  background-color: skyblue;
	}

4. swipe
   滑块视图容器 也就是 轮播图 里面只能放 swiper-item组件
   属性：indicator-dots显示小圆点
   indicator-color 圆点的默认颜色
   indicator-active-color 选中的圆点颜色

<swiper 	indicator-dots indicator-color="#fff" indicator-active-color="#ccc">
  <swiper-item class="item1">1</swiper-item>
  <swiper-item class="item2">2</swiper-item>
  <swiper-item class="item3">3</swiper-item>
</swiper>

6. text 类似我们的span标签
7. rich-text 富文本。在nodes刷新中添加节点
8. button 按钮
   属性：size:大小
   type：类型
   plain:只有边框颜色
9. image
   图片
   属性 mode:
   scaleToFill缩放模式
   aspectFit 可以完整地将图片显示出来。
   aspectFill 图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。