【微信小程序】基础入门（一）

一. 注册及开发环境

1.1 注册开发账号

在 微信公众平台 进行注册 —— 微信公众平台

选择 公众号

根据官网指引填写信息和提交相应的资料，就可以拥有自己的小程序账号。

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

登录 小程序后台 ，我们可以在菜单 开发->开发设置 看到小程序的 AppID 。

1.2 安装开发工具

使用官方提供的开发工具 微信开发工具，根据自己的操作系统下载对应的安装包进行安装，更多关于 微信开发工具 的介绍可以查看官说明文档 微信开发工具说明文档

2. 第一个小程序

2.1 新建项目

打开 微信开发者工具 点击 +号 开始创建小程序

2.2 项目结构

components目录 —— 存放自定义组件，这里默认存放了一个 navigation-bar （导航栏）组件

pages 目录 —— 存放页面，比如 index 文件夹，就是一个 index 页面

一个页面由 .js、.json、.wxml、.wxss 文件组成

其中 .js 为 JavaScript，.json 为页面配置文件，.wxml 和 .wxss 就是 html 和 css。

和 pages 目录同级的几个文件，他们是一些 全局样式文件 和全局配置文件，比如 app.js 和 app.json，其中 app.js 为整个小程序的入口

2.3 新建页面

在全局配置文件 app.json 中的 pages 数组存放了所有的页面路径，手动在 pages 下添加一个页面 test，并将其移到第一位。注意，只有处于 pages 数组第一个位置的页面才是我们的欢迎页，还需注意中间要使用 逗号 隔开。

保存之后，可以在目录看到已经自动生成了test 页面。

3 基本组件

3.1 view 组件

view 和 html 中的 div 类似，它是一个 容器，可以存放文本，也可以包裹其他组件。一般来说，我们通常使用 view 来搭建 页面框架。

示例代码如下

3.2 scroll-view 组件

使用 scroll-view 组件可以帮助我们实现滑动的效果。注意，设置为上下滑动时，我们必须给定一个高度，设置为左右滑动时，必须给定一个宽度。

wxml 页面代码

<!-- 上下滑动效果, 使用 scroll-y 表示上下滑动 -->
<scroll-view class="container" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

wxss 页面代码

/* 滑动效果 */
.container {
  border: 1rpx solid red;
  width: 100rpx;
  height: 120rpx;
}

.container view {
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}

.container view:nth-child(1) {
  background-color: lightgreen;
}
.container view:nth-child(2) {
  background-color: lightblue;
}
.container view:nth-child(3) {
  background-color: lightpink;
}

代码效果演示