Ø  简介

本文主要记录微信小程序的开发笔记（上），主要包括以下内容：

1.  微信小程序基础

2.  布局

3.  视图容器

4.  视图层技术

5.  基础组件

6.  表单组件

1.  微信小程序基础

1)  微信小程序介绍

具有出色的体验，可以被便捷地获取与传播，适合有服务内容的企业和组织注册。

2)  开发环境安装与配置

1.  首先，下载开发IDE（微信开发者工具）

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.  下载之后进行安装即可。

3)  注册微信小程序账号

注册微信小程序分为有公众号和无公众号（已认证），这两种情况下注册小程序是不一样的，下面分别介绍：

1.  无公众号

1)  进入微信公众平台：https://mp.weixin.qq.com/，点击立即注册

2)  选择“小程序”，按照注册步骤进行即可。

2.  有公众号（已认证）

1)  登录微信公众平台：https://mp.weixin.qq.com/

2)  左侧小程序中-> 小程序管理 ->添加 -> 快速注册并认证小程序，根据注册流程即可。

注：需要新的邮箱作为登录小程序的账号。

3.  绑定开发者和体验者

进入微信公众平台-小程序，成员管理添加即可。

4)  开发微信小程序

5)  预览和上传小程序

1.  预览小程序可以使用管理员微信或者开发者微信扫描预览二维码，在真机上进行预览。

2.  上传的微信小程序“微信公众平台-小程序”的版本管理中查看到。

2.  布局

1)  水平排列布局，设置父试图样式：

height: 100px;

display: flex;  /*表示弹性布局*/

flex-direction:row;

2)  水平折行排列布局，设置父试图样式：

flex-wrap:wrap;

3)  水平排列对齐布局，设置父视图样式：

justify-content: center;

可选值：flex-start:左对齐（默认值）；center:居中对齐；flex-end:右对齐

4)  水平等间隔排列布局，设置父试图样式：

justify-content: space-between;/*无边距*/

5)  带边距的水平等间隔排列布局，设置父试图样式：

justify-content: space-around;  /*有边距*/

6)  垂直排列布局（默认为该布局方式），设置父视图样式：

height:300px;

display: flex;  /*表示弹性布局*/

flex-direction:column;

7)  垂直折列排列布局，设置父视图样式：

flex-wrap:wrap;

8)  垂直排列对齐布局，设置父视图样式：

align-items: center;

可选值：flex-start:左对齐（默认值）；center:居中对齐；flex-end:右对齐

3.  视图容器

可以在视图容器中放置子组件，小程序中的视图容器分为三类：view、scroll-view、swiper.

1)  scroll-view（滚动条）

scroll-view 支持垂直滚动和水平滚动。

1.  垂直滚动视图

1)  设置scroll-view 的样式：height:200px;

2)  设置scroll-view 的属性：scroll-y="true"

3)  定位到指定的位置或子视图

1.  滚动到指定的位置，默认值为0

scroll-top="100"

2.  滚动到指定的子视图，"yellow"为子视图Id

scroll-into-view="yellow"

2.  水平滚动视图

1)  设置scroll-view 的样式：width:100%; white-space:nowrap;

2)  设置scroll-view 的属性：scroll-x="true"

3)  设置子元素的样式：display:inline-block; width:200px; height:200px;

4)  定位到指定的位置或子视图

1.  滚动到指定的位置，默认值为0

scroll-left="100"

2.  滚动到指定的子视图，"yellow"为子视图Id

scroll-into-view="yellow"

3.  滚动条事件

1)  bindscrolltoupper

滚动到最上端或者最左端触发的事件。

1.  在事件处理函数中可以使用 e.detail.direction 属性获取top 或left 来区分。

2.  可以使用 upper-threshold 属性指定滚动条与最上端或者最左端相差多少距离时触发，例如：upper-threshold="100"

2)  bindscrolltolower

滚动到最下端或者最右端触发的事件。

1.  在事件处理函数中可以使用 e.detail.direction 属性获取bottom 或 right 来区分。

2.  可以使用 lower-threshold 属性指定滚动条与最下端或者最右端相差多少距离时触发，例如：lower-threshold="100"

3)  bindscroll

当滚动条滚动时触发的事件。