小程序文档

小程序基础

微信小程序是什么

微信小程序是不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开的应用，在微信小程序的使用过程中，用户只增不减，很多的公司都开始研发属于自己的小程序。

体验小程序

查看小程序源码

注册微信小程序

如果你还没有微信公众平台的账号，请先进入微信公众平台首页，点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信，我们选择 “小程序” 即可。

接着填写账号信息，需要注意的是，填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。

激活邮箱之后，选择主体类型为 “个人类型”，并按要求登记主体信息。主体信息提交后不可修改，该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体，在后续开通其他业务功能时不得变更或修改。

一切 OK 就可以直接进入小程序的管理平台了。如果直接跳转失败，也可以从微信公众平台上手动登录。填写小程序的基本信息，包括名称、图标、描述等。提交成功之后，再添加开发者。开发者默认为管理员，我们也可以从这里新增绑定开发者，这是管理员才有权限的操作。

然后在左侧导航栏点击 “设置”，找到开发设置，获得小程序的 AppID。

微信开发者工具

下载微信web开发者工具】，根据自己的操作系统下载对应的安装包进行安装即可。

打开开发者工具，用微信扫码登录开发者工具。

第一个小程序

新建项目

打开开发者工具，选择 “小程序项目”，点击右下角的 “+” 新建项目。

选择一个空的文件夹作为项目目录，填入刚刚的 AppID，再填写一个项目名称。点击 “确定” 进入工具主界面。

项目目录结构

微信小程序的基本文件构造和项目目录结构说明如下：

    .
    ├── app.js     # 小程序的逻辑文件
    ├── app.json   # 小程序的配置文件
    ├── app.wxss   # 全局公共样式文件
    ├── pages      # 存放小程序的各个页面
    │   ├── index  # index页面
    │   │   ├── index.js     # 页面逻辑
    │   │   ├── index.wxml   # 页面结构
    │   │   └── index.wxss   # 页面样式表
    │   └── logs   # logs页面
    │       ├── logs.js      # 页面逻辑
    │       ├── logs.json    # 页面配置
    │       ├── logs.wxml    # 页面结构
    │       └── logs.wxss    # 页面样式表
    ├── project.config.json
    └── utils
        └── util.js

• wxml 类似于 HTML 文件，用来编写页面的标签和骨架，但里面只能用小程序自己封装的组件；
• wxss 类似于 CSS 文件，用来编写页面样式，只是把 css 文件换成了 wxss 文件；
• js 文件类似于前端编程中的 JavaScript 文件，用来编写小程序的页面逻辑；
• json 文件用来配置页面的样式和行为。

页头页尾

在构建页面内容之前，我们先把页头和页尾处理好。我们很容易猜到，这两部分属于小程序的全局配置，因此需要修改 app.json 文件。

最初的内容如下：

    {
        "pages":[
            "pages/index/index",
            "pages/logs/logs"
        ],
        "window":{
            "backgroundTextStyle": "light",
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTitleText": "WeChat",
            "navigationBarTextStyle": "balack"
        }
    }

pages 属性用来设置页面路径，它是一个数组，每一项都是字符串来指定小程序由哪些页面组成。数组的第一项代表小程序的初始页面。小程序中新增或减少页面，都需要对 pages 数组进行修改。

window 属性用于设置小程序的状态栏、导航条、标题、窗口背景色。

我们把页头的标题和颜色修改一下，页尾部分我们做一个 tab 栏来切换页面，这个属性叫做 tabBar，代码如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2f2f8f",
    "navigationBarTitleText": "GoZeroWaste",
    "navigationBarTextStyle":"white"
  },
  "tabBar":{
    "color": "#bfc1ab",
    "selectedColor": "#13b11c",
    "backgroundColor": "#1f1f4f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "个人中心"
      },
      {
        "pagePath": "pages/details/details",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "我的项目"
      }
    ]
  }
}

安装WEUI组件

1、排查是否安装npm

通过npm -v 查看npm的版本，如果能显示相应出版本号，就说明是安装成功的。

2、如果没有安装

使用npm init 会提示不是内部命令

这时候就需要安装node环境，可以在nodex下载地址下载对应的版本

3、进入小程序根目录（app.js所在目录），打开cmd，
输入：npm init -y
输入：npm i miniprogram-sm-crypto --production 下载miniprogram依赖

4、勾一下使用npm依赖

5、点击 微信开发者工具的 工具=>构建npm

等待构建…

6、完成构建后，就可以开始愉快的开发工作了！！

后端：https://gitee.com/wuxiaameng/ec9_back.git
pc前端：https://gitee.com/wuxiaameng/ec9_front.git
小程序前端：https://gitee.com/wuxiaameng/hello-git.git