【微信小程序】快速入门

微信小程序快速入门

一、准备工作

学习微信小程序需要有一定的HTML、CSS、JavaScript基础

• 开发软件：微信开发者工具
  （作者用该工具主要用来调试，写代码推荐使用VScode，毕竟是开源的，插件多生产效率高~）
• 微信小程序官方文档：Wechat小程序官方开发文档
• 微信官方组件库：微信官方组件库
• 组件库：vant-ui（比微信自带的好看一些，使用说明也更丰富）
• 图标库：阿里巴巴矢量图标库（可以下载一些矢量图标）
• 小程序管理平台：微信小程序管理平台（以管理小程序版本，查看小程序AppID，配置https和wss，修改小程序头像等）
• 学习参考视频：黑马微信小程序 （看完前60个就差不多了）

二、第一个小程序

1. 打开微信开发者工具

2. 点击 “+” 新建一个小程序

由于后端是自己写的，所以这里没有使用使用微信小程序的云服务（免费版配置很低，部分功能需要收费）

获取小程序AppID方法：如何获取小程序AppID?

3、第一个helloworld版小程序就成功创建

微信开发者工具是可以实时浏览当前的小程序样子

三、微信小程序引用 Vant-ui库

0、使用npm初始化项目

在 微信开发者工具 下方的 终端里面新建一个终端，然后输入命令

npm init

一般没有特殊设置，就根据提示，一直回车，最后输入yes就行了。
npm初始化成功后，会在项目里面多出来一个 package.json 的配置文件。

1、安装 vant-ui

如有不太懂的，可以先参考一下：小程序官方文档npm支持

• 通过npm安装

npm i @vant/weapp -S --production

• 通过 yarn 安装

yarn add @vant/weapp --production

安装成功后，在package.json 配置文件中，会出现一个vant依赖

2、 修改 app.json

将全局配置文件 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3、 修改project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
   
  ...
  "setting": {
   
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
   
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

替换之前的配置文件

替换之后的配置文件：

4、构建npm包

打开微信开发者工具，点击 工具 -> 构建 npm

并在 详细 ->本地设置，勾选 使用 npm 模块 选项，构建完成后，即可引入组件

5、vant-ui组件使用

引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

// app.json
"usingComponents": {
   
  "van-button": "@vant/weapp/button/index"
}

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

如下图

其他组件，请参考 vant-ui组件文档

四、微信小程序引入 echarts

微信小程序是不支持 DOM 操作的，Canvas 接口也和浏览器不尽相同。因此，echarts官方和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。
为了兼容小程序 Canvas，echarts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。
ecchats官方对微信小程序使用echarts文档

1.下载ec-canvas组件

从github上下载：https://github.com/ecomfe/echarts-for-weixin
作者提供的百度网盘连接：
链接：https://pan.baidu.com/s/1D-LhFmukoD3bw_NQe8R32Q
提取码：1111
下载完成后，将 ec-canvas文件夹复制到项目下，位置推荐就放在工程下的文件夹中

2、创建图表

首先，在页面的 index.json中引入 ec-canvas 组件

{
   
  "usingComponents