微信小程序基础教程（一）

文章主要介绍：

1. 框架
2. 开发工具
3. 原生微信小程序的目录结构
4. 原生微信小程序的基本写法（装修中）
5. 使用uni-app开发小程序（装修中）
6. 使用Taro开发小程序（装修中）

---

一. 框架

目前微信小程序的主流框架有uni-app、mpvue（美团）、Taro（京东）、WePY（腾讯）。以上四个框架为转译型框架，将其它语法规范转译成小程序的语法规范。滴滴在18年推出了小程序框架Mpx，较以上四者不同，它为基于小程序语法规范的增强型框架。
目前我所在公司用的比较多的是Taro和uni-app，下面也会针对这两个框架和原生小程序进行一些简单的讲解。

二. 开发工具

微信开发者工具是开发微信小程序的最基本的编译器，下面介绍一下微信开发者工具的简单使用。

1. 新建项目

想要创建一个小程序项目，我们需要一个小程序的AppID
(1). 先去微信提供的入口注册并申请账号，注册过程需要填写个人身份信息。注册完成后，就可以登陆微信公众平台查看自己的小程序AppID

AppID

如果不想去申请账号，可以选择申请使用测试号。

(2). 下载并打开微信开发者工具，新建小程序项目，并填入我们之前申请的AppID，其中我们可以选择后端服务，一般自己练手的项目，勾选“不使用云服务”就好。

新建小程序项目

然后就可以创建好第一个小程序项目了。

2. 微信开发者工具的功能布局

开发者工具主界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、编辑器、调试器 五大部分。

界面布局

侧重讲一下工具栏中部

工具栏中部

A. 切换编译模式。可以选择添加编译模式，也可通过二维码编译。

切换编译模式

首先讲一下添加编译模式，这是较为方便也是较为常用的功能。若开发者在开发过程中，经常希望看到某个页面的编译结果。若为普通编译，则小程序的每次编译都是默认从首页进入，若期望观察的页面的页面栈很深，那么用户需要多次点击跳转才能到期望页面。若添加编译模式，则每次小程序的每次编译都是直接跳转到指定页面。开发者给此编译模式一个命名、选择好启动页面、填上该页面的参数（若无参数则不填）、选择进入场景（场景很多，如扫描小程序码进入、从公众号文章进入·······无场景需求可不选）即可配置好一个编辑环境。

自定义编译条件

除了通过添加编译模式可实现每次编译后直接跳转到指定页面，也可通过修改项目文件app.json的pages数组的顺序实现此效果。当然，这种方式没有那么方便，如下图。

修改page顺序

B. 编译。意思很简单，就是重新运行代码。开发者工具的特性就是每次保存代码后，都会重新编译一遍。

C. 预览。讲到预览前，首先说一下微信小程序的三个版本。分别是正式版、体验版和开发版。正式版即是当前已经发布到线上的版本，任何人都可以搜索并进入使用。体验版和开发版则是只有开发者权限的微信用户才能使用。

体验版的二维码需要在微信公众号平台 > 版本管理 中查看。每个开发者的体验版的二维码是永久有效的，开发者在开发者工具中将代码上传后，重新扫此二维码即可查看到上次提交的版本。

选为体验版本 点击查看体验版二维码

扫描了体验版/开发版后，在手机预览小程序。一般我们为了看到控制台输出的信息，可以在手机打开调试。

打开控制台

D. 真机调试。真机调试提供一个二维码，然后手机扫描后，在手机预览小程序，然后开发者工具会打开一个控制台，显示控制台的信息，而不像预览那样控制台的信息要在手机上才能看。

E. 清缓存。在某些逻辑中，需要我们会产生一些数据缓存（如：主动存储数据到本地缓存）。然后我们测试程序时，可能担心缓存会影响测试结果，所以我们可以清缓存。

清缓存

三. 原生微信小程序的目录结构

小程序的目录结构是有一定的规范的，先看看我们创建的第一个项目的目录结构。

image.png

1. 全局配置 app.json

{
  "pages":[  // 页面路径列表
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{ // 全局的默认窗口表现
    "backgroundTextStyle":"light", // 下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#fff", // 顶部导航栏背景色，可定义任意颜色
    "navigationBarTitleText": "WeChat", // 顶部导航栏标题，可定义任意文本
    "navigationBarTextStyle":"black" // 顶部导航栏文本颜色，可选black white
  },
  "style": "v2", // 指定使用升级后的weui样式（以前的项目是没有默认使用weui的样式的）
  "sitemapLocation": "sitemap.json" // 指明 sitemap.json 的位置
}

此文件主要管理小程序的全局配置，包括小程序页面路径，界面表现(标题，背景色，字体色)，网络超时时间，底部tab等。更多全局配置，可以查看小程序全局配置。

• pages
  我们添加、修改或删除页面，都要修改pages数组，必须保持pages数组和页面文件完全一致。例如：删除了logs文件夹但是没有在pages数组中移除"pages/logs/logs"，那么程序会报错。

删除logs文件夹

至于新增页面，我们可以直接在pages数组中增加一项，那么工具会自动帮我们创建页面文件。

新建页面

• window
  修改全局的默认窗口表现，那么需要修改window这个对象，比如我们试着修改一下顶部导航栏的样式。

给小暗打广告

window对象中，比较常用的还有：

"window":  {
  ...
  "enablePullDownRefresh": true, // 是否开启全局的下拉刷新
  "onReachBottomDistance": 50, // 页面上拉触底事件触发时距页面底部距离，单位为 px
  "navigationStyle": "default" // 导航栏样式，两种可选值分别是：default 默认样式；custom 自定义导航栏，只保留右上角胶囊按钮
  ...
}

• tabBar
  想要给小程序创建多个tab，那么配置tabBar就好，配置tabBar的方式如下：

"tabBar": {
    "color": "#ccc", // 文字默认颜色，仅支持十六进制颜色
    "selectedColor": "#ef7f24", // 文字选中时的颜色，仅支持十六进制颜色
    "list": [{ // tab 的列表，最少 2 个、最多 5 个 tab
      "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
      "text": "首页", // tab 上按钮文字
      "iconPath": "images/home.png", // 图片路径，大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
      "selectedIconPath": "images/home-active.png" // 选中时的图片路径，大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
    },{
      "pagePath": "pages/organization/organization",
      "text": "组织",
      "iconPath": "images/organization.png",
      "selectedIconPath": "images/organization-active.png"
    }]
  },

效果如下：

配置tabBar

2. 页面主逻辑 app.js

3. 页面公共样式 app.wxss