微信小程序教学课程（第一章）--注册、安装以及了解

写在文章前头，微信小程序与前端三件套——html,css,js有异曲同工之妙，我建议大家可以先去学习这三个技术，再去学微信小程序会更加容易掌握和理解。

一.注册与安装微信小程序

1.注册

网址：微信公众平台 (qq.com)

立即注册->小程序->前往注册

然后就按着里面选项填写就好了。

二.安装微信小程序

网址：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)

（下载稳定版 ）

下载完成后安装，扫码登录，新建一个项目，APPID按下面方式寻找

新建项目时选择不使用云服务，模板选择javascript

2.1获取小程序APPID

在小程序开发管理中可以找到

三.正式使用微信小程序

根据前面的步骤我们成功注册，安装，创建好一个微信小程序项目，下面我们先了解小程序的项目结构

3.1项目结构：

 而pages里面每一个文件夹都有四个文件（图中有index,logs文件夹）

可以类比成，html,css,js,json文件 

而pages里面就是每一页的网页，想要新建新一页，可以在app.json里面打入路径，编译自动生成新一页（注意最前面的就是展示的页面）

3.2 app.前缀文件与每一页的文件前缀区别

在这里要明白全局和局部的概念，app.后缀的文件就是所有页面的配置，而每一页的wxss,wxml,js,json文件相关配置是管理自己页面的，而且局部的优先级是大于全局的

3.3页面的组成部分

 分别是导航栏，背景栏和主页面区域

下面是对这三部分的一些设置

• 前三个分别是对导航栏的文字，字体颜色，背景颜色的属性
• 中间两个是背景的属性，分别是背景的颜色和下拉时加载点的样式，就是平时我们下拉刷新时都会看到有几个点在那转就是加载点了
• 下面两个是主体页面的属性，一个是 是否开启下拉刷新，以及上拉触底的刷新距离，平时我们刷一些长内容时，在我们滑动一定距离时会刷新加载剩下的数据，当网络不好时，能够很明显看到刷新很慢，信息加载不出。

具体设置的方法在app,json文件window属性填写键值对就好了

3.4 tabBar的使用

在小程序有一个很重要的概念就是tabBar，也就是导航栏

拿金拱门小程序举例子，这个导航栏也就是tabBar，通过按不同的按钮，转到不同的页面，也就是访问不同的文件

下面是一些设置tabBar的属性

同样是在app.json里面加入tabBar的属性

"tabBar": {
    "list": [
      {
        "pagePath": "pages/test/test",
        "text": "首页",
        "iconPath": "/home.png",
        "selectedIconPath": "/home.png"     
    },{
      "pagePath": "pages/index/index",
      "text": "食物",
      "iconPath": "/食物.png",
      "selectedIconPath": "/食物.png"
    },  
  {
    "pagePath": "pages/logs/logs",
    "text": "用户",
    "iconPath": "/个人头像.png",
    "selectedIconPath": "/个人头像.png"
  }
  ]
  }

在tabBar里面是一个数组，存着三个跳转的导航按钮，按照上面的格式来写，可以修改相关的样式

（跳转最少两个，最多五个）

下面是展示的成果

      第一章我教大家注册和安装微信小程序，以及微信小程序的基础知识，像项目的结构，小程序的页面组成。微信小程序是一个逻辑结构十分清晰的软件，在不同的文件中设置相关参数能起到对应作用，我也建议大家在以后做项目时也要做到逻辑清晰，分模块完成。

      同时微信小程序更注重效率，有很多的设置和方法都是现成的，一些功能也是封装好了，对比像c语言,java,html等等语言会更加方便高效，当然灵活性也会下降，功能的多样性也会有一点限制，在下节课我将会介绍一些wxml的组件和wxss的样式。