微信小程序入门

1. 引言
2. 构建
3. 基础组件
4. 功能组件
5. 常用代码举例
6. 参考文献

微信小程序，是腾讯结合 微信 sdk 推出的一种微信开发工具。可以使前端开发者调用 微信的 一些内置功能，开发出功能强大的小应用。

作为一个合格的前端开发人员，需要掌握和了解。

下面我们详细的介绍下开发一个微信小程序的步骤

构建

1. 申请小程序账号： 进入 (开发者平台) [https://developers.weixin.qq.com ] 注册小程序账号，获取AppID。
2. AppID 是小程序的 秘钥，通过 这个 id 开发者可以使用微信提供的 相应 sdk功能。
3. 安装开发者工具： 通过官网 下载微信开发者工具，用于开发和调试。
4. 启动微信开发者工具 自动创建一套 目录结构，我们就可以进行开发了。
5. 微信小程序默认的代码结构 包含： JSON 配置 JS 脚本逻辑文件 WXML 模板文件 WXSS 样式文件。标配，不过有些文件格式是可选的。

基础组件

全局配置项

1. app.json : 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。( pages:[] window: {} tabBar: { list: [ ]} networkTimeout:{} debug: true ) 等

2. Pages：这个是编写的js文件，后缀.js这里不需要使用，配置好正确路径即可正常调用（若调用不到，在重启微信开发者工具会直接报 page 错误）。

3. Window：配置顶部的一些样式，文档介绍比较详细。

4. tabBar：底部的几项配置，见名知意。

5. networkTimeout：暂时没发现用处，建议看文档。根据实际项目需求进行添加与更改。

6. iconPath和selectedIconPath：底部菜单按钮图片与得到切换点击高亮。

7. text：可以去掉，全部去掉会发现底部tabar高度会减少很多。

8. 「Color」是底部字体颜色，「selectedColor」是切换到该页面高亮颜色，「borderStyle」是切换菜单上面的一条线的颜色，「backgroundColor」是底部菜单栏背景颜色。文字描述较为抽象，建议你一一调试并查看其效果，加深印象。

9. 「“list”」下的代码顺序必须依次放置，不能随便更改。

10. 「”pagePath”」之后的文件名内，「.wxml」后缀被隐藏起来了，这是微信开发代码中人性化的一点——帮你节约写代码的时间，无须频繁声明文件后缀。

11. 「”iconPath”」为未获得显示页面的图标路径，这两个路径可以直接是网络图标。

12. 「”selectedIconPath”」为当前显示页面高亮图标路径，可以去掉，去掉之后会默认显示为「”iconPath”」的图标。

13. 「”Text”」为页面标题，也可以去掉，去掉之后纯显示图标，如只去掉其中一个，该位置会被占用。

14. project.config.json：工具配置 你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置

 ```
  {
      "pages": [
          "pages/views/mall/mall",
          "pages/index/index",
          "pages/logs/logs",
          "pages/views/common/common"
      ],
      "window": {
          "navigationBarBackgroundColor": "#55e298", # 顶部导航颜色
          "navigationStyle": "custom", # 自定义顶部条可用
          "backgroundTextStyle": "light",
          "backgroundColor": "#f5f7f8",# 页面背景色
          "navigationBarTitleText": "WeChat",
          "navigationBarTextStyle": "black"
      },
      "tabBar": {
          "list": [{
              "pagePath": "pages/views/mall/mall",
              "text": "首页"
          }, {
              "pagePath": "pages/logs/logs",
              "text": "日志"
          }]
      },
      "networkTimeout": {
          "request": 10000,
          "downloadFile": 10000
      },
      "debug": true
  }
 ```

wxml 文件

就是.wxml 定义的文件。微信小程序不支持 html 常用的 如：div 等标签，它通过一套自定义的标签实现了浏览器的dom树结构。我们只需要记住常用的一些标签，就可以完成一个漂亮的小程序页面。（view, button, text）

通常在视图层中我们可以 进行 数据绑定、列表渲染、条件渲染、模板、事件、引用等操作。

数据绑定 {{userInfo.avatarUrl}} 、

列表渲染 wx:for="{{array}}"

条件渲染 wx:if="{{view == 'WEBVIEW'}}" {{viewShow ? 'widgets__info_show' : ''}}

模板

事件 {{count}}

引用

引用

import（动态）

import可以在该文件中使用目标文件定义的template

// 使用