【微信小程序】快速入门_微信小程序快速入门

微信小程序快速入门

一、准备工作

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

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

二、第一个小程序

1. 打开微信开发者工具

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

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

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

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

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

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

0、使用npm初始化项目

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

npm init
1

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

1、安装 vant-ui

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

• 通过npm安装

npm i @vant/weapp -S --production
1

• 通过 yarn 安装

yarn add @vant/weapp --production
1

安装成功后，在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": "./"
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

替换之前的配置文件

替换之后的配置文件：

4、构建npm包

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

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

5、vant-ui组件使用

引入组件

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

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

使用组件

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

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

如下图

其他组件，请参考 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": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}
1
2
3
4
5

注意：上面的相对路径一定要写对

然后，index.wxml 中，我们创建了一个 组件，内容如下：

<view class="chartBg">
  <ec-canvas id="mychart-dom-multi-pie" canvas-id="mychart-multi-pie" ec="{{ ecPie }}"></ec-canvas>
</view>
1
2
3

接着在index.wxss文件中定义图标的样式，记得一定要给它设定width和height！因为ec-canvas组件需要设定一个初始的高度和宽度，具体可以看源码。否则会渲染失败。

#mychart-dom-multi-pie {
  width: 90%;
  height: 500rpx;
  margin: 20px 15%;
  /* border: 1px solid red; */
}


.chartBg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下 (记得要在页面最开始import echarts的组件）：

import * as echarts from '../../ec-canvas/echarts';
//创建图表对象的全局变量
var chart_production_pie=null;
//用于初始化echarts图表的函数
function initProducitonPieChart(canvas, width, height, dpr){
  chart_production_pie = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  chart_production_pie.showLoading(); // 首次显示加载动画
  canvas.setChart(chart_production_pie);
  chart_production_pie.setOption(option_production_pie);
  chart_production_pie.hideLoading(); // 隐藏加载动画
  return chart_production_pie;
}

Page({
  data: {
    ecPie:{
      onInit:initProducitonPieChart
    }
  },
});


//饼图option
var option_production_pie = {
  title:{
    text:"各班产能对比饼图",
    left: 'center'
  },
  legend: {
      top: 'bottom'
  },
  toolbox: {
      show: true,
      feature: {
          mark: {show: true},
          // restore: {show: true},
      }
  },
  series: [
      {
          name: '面积模式',
          type: 'pie',
          radius: [20, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
              borderRadius: 8
          },
          data: [
              {value: 40, name: '甲班'},
              {value: 38, name: '乙班'},
              {value: 32, name: '丙班'},
              {value: 30, name: '丁班'},

          ]
      }
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。
option 的使用方法参见 ECharts 配置项文档。
对于不熟悉 ECharts 的用户，可以参见 5 分钟上手 ECharts 教程。
更多关于 微信小程序引入echarts的例子

下面是作者自己做的一个多表展示的demo，可以直接复制到项目工程的pages目录下查看。
链接：https://pan.baidu.com/s/1QbHSgzbBP9lYhJer7pGZBQ
提取码：1111

五、小程序http通信

  //一般http通信一个按钮方法中或者表单提交方法中
   formSubmit(e) {
		//
        //将这个页面的对象引用保存到 _this上，以免后面和 其他的this冲突
        var _this = this;
        wx.request({
            url: 'https://www.whutinfo.top:8086/api/query',
            data: {
            metric:["aShift"],
    				startTime:"2021-05-05 11:55:45",
    				endTime:"2021-05-06 12:55:45",
            },
            method: "POST",
            enableHttp2: "true",
            header: {
                'content-type': 'application/json'
            },
            //查询完毕后，跳转到一个queryResultPage页面，用于展示查询的数据
            success: function(res) {
                //当查询状态是200 提示查询成功
                if (res.statusCode == 200) {
                    console.log("----requset查询成功------");
                    console.log(res.data);
                }
              },
            // request失败的请求
            fail: function(res) {
                console.log(res);
                console.log(this.data)
            }
        })
      }   
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在页面上创建一个按钮，绑定该方法

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

上面那个url地址目前还是可用的，若失效了，请自己换成可用的。查询成功后可在控制台看见输出。

更多的关于网络请求，请查看 官方文档说明

六、小程序进行websocket通信

微信小程序最多只能同时支持 5个 WebSocket连接。因此要在页面的不同生命周期进行连接的打开和关闭。
关于生命周期可以参考一下这个博客：小程序生命周期以及页面生命周期以及小程序生命周期
下面一段话是小程序官方开发文档说明的：

通过 WebSocket 连接发送数据。需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。
推荐使用 SocketTask 的方式去管理 webSocket 链接，
每一条链路的生命周期都更加可控。
同时存在多个 webSocket 的链接的情况下使用 wx 前缀的方法可能会带来一些和预期不一致的情况。
1
2
3
4

因此官方给的实例代码并不好用！它自己也推荐使用 SocketTask对连接进行管理。然后它并没有给出SocketTask的示例代码，只给出了相应api接口说明。无语~
下面是作者开发小程序中使用的SocketTask对5个WebSocket连接进行管理的代码示例。

首先在index.js的最开始（注意不是Page（）方法中），定义5个用于WebSocket链接的全局对象，方便在各个不同的生命周期中使用该对象。

//定义5个websocket链接的全局变量
var _ws1 = null;
var _ws2 = null;
var _ws3 = null;
var _ws4 = null;
var _ws5 = null;
1
2
3
4
5
6

然后在Onload（）生命周期中打开链接。

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function(options) {
    var _this = this;
    var ws1 = wx.connectSocket({ //打开websocket连接
            url: "wss://www.whut-info.cn:8086/api/websocket/SimDeviceBasic?Gateway01",
            success: function(resConnect) { //打开连接成功
                // console.log(resConnect)
                console.log("ws1连接成功!~");
            },
            fail: function(resConnectError) { //打开连接失败
                // console.log(resConnectError)
            }
        });
        ws1.onOpen(function(res) {
            if (ws1.readyState === 1) {
                ws1.send({
                    data: JSON.stringify({
                        number: '123',
                    }),
                    success: function(resSend) {
                        // console.log(resSend)
                    },
                    fail: function(resSendError) {
                        // console.log(resSendError)
                    }
                })
            }
        });
        ws1.onMessage(function(data) {
            let objData = JSON.parse(data.data);
            console.log(objData);
        });
        _ws1 = ws1;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

其他4个websocket链接除了url不一样其他基本一致，就不在贴代码。上面的URL短时间内是可用的，如果不可用，请自己更换可用的URL。
当离开页面时候，可以在页面的卸载生命周期OnUnload()中关闭WebSocket连接。有时候在不同页面跳转之间，也可能在OnHide()周期进行连接关闭。

/**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {
        _ws1.close({
            success: function(result) {
                console.log("ws1连接成功关闭");
            }
        });
    },
1
2
3
4
5
6
7
8
9
10

打开js文件对应的页面时候，就可以看到控制台有提示信息输出

更详细的WebSocket说明在小程序官方开发文档中。