微信小程序快速入门
目录
一、准备工作
学习微信小程序需要有一定的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": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
注意：上面的相对路径一定要写对
然后，index.wxml 中，我们创建了一个 组件，内容如下：
<view class="chartBg">
<ec-canvas id="mychart-dom-multi-pie" canvas-id="mychart-multi-pie" ec="{{ ecPie }}"></ec-canvas>
</view>
接着在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;
}
其中 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: '丁班'},
]
}
]
};
这对于所有 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)
}
})
}
在页面上创建一个按钮，绑定该方法
<van-button type="primary" bindtap="formSubmit">按钮</van-button>
上面那个url地址目前还是可用的，若失效了，请自己换成可用的。查询成功后可在控制台看见输出。
更多的关于网络请求，请查看 官方文档说明
六、小程序进行websocket通信
微信小程序最多只能同时支持 5个 WebSocket连接。因此要在页面的不同生命周期进行连接的打开和关闭。
关于生命周期可以参考一下这个博客：小程序生命周期以及页面生命周期以及小程序生命周期
下面一段话是小程序官方开发文档说明的：
通过 WebSocket 连接发送数据。需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。
推荐使用 SocketTask 的方式去管理 webSocket 链接，
每一条链路的生命周期都更加可控。
同时存在多个 webSocket 的链接的情况下使用 wx 前缀的方法可能会带来一些和预期不一致的情况。
因此官方给的实例代码并不好用！它自己也推荐使用 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;
然后在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;
其他4个websocket链接除了url不一样其他基本一致，就不在贴代码。上面的URL短时间内是可用的，如果不可用，请自己更换可用的URL。
当离开页面时候，可以在页面的卸载生命周期OnUnload()中关闭WebSocket连接。有时候在不同页面跳转之间，也可能在OnHide()周期进行连接关闭。
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
_ws1.close({
success: function(result) {
console.log("ws1连接成功关闭");
}
});
},
打开js文件对应的页面时候，就可以看到控制台有提示信息输出
更详细的WebSocket说明在小程序官方开发文档中。