开源一个微信小程序仪表盘组件过程解析


Posted in Javascript onJuly 30, 2019

前言

最近开发了一个小程序动态仪表盘组件,并以第三方小程序组件的形式发布到npm,任意小程序项目都可以安装这个模块,从而获得仪表盘功能。

组件功能目前还非常简单,先来预览一下效果:

开源一个微信小程序仪表盘组件过程解析

感兴趣的直接看源码:

https://github.com/tower1229/weapp-plugin-dashboard

下面是踩坑过程。

如何开发微信小程序自定义组件

官方提供了一个CLI工具专门用于开发小程序自定义组件,首先全局安装这个工具:

npm install -g @wechat-miniprogram/miniprogram-cli

然后用它初始化一个自定义组件项目:

miniprogram init --type custom-component

这一步会下载一个前端工程模板到本地,这个模板是一个基于gulp的前端自动化工程,使用前需要先安装依赖:

npm i

有可能你会像我一样发现这个项目的默认依赖版本有点老,然后习惯性的在VSCode里用Npm Dependency自动升级了一下,重新安装,然后就傻逼了,新版babel插件会让项目跑不起来。

还原到默认版本重新安装,启动开发服务:

npm run watch

这时自动化工程会将src/里的代码构建到miniprogram_dev/文件夹,这里面是一个标准的小程序目录结构,是可以用微信开发者工具导入并运行的,导入的时候注意使用测试appId。

然后这边我们编辑src里的源码文件,另一边就会同步构建到miniprogram_dev,微信开发者工具检测到文件变动也会自动重新编译项目,目前为止很美好。

但就我的亲身体验来看,这个自动化工程有点小毛病,偶尔会把个别文件给编译“丢”,比如突然样式没了,或者js编译不通过,那么js文件也就没了,微信开发者工具这边就会报错。

最坑的是,这个工程的编译过程集成了eslint代码检查,检查不通过js文件就不编译,任由开发者工具报错。默认的eslint配置是有多变态?起码对我来说这是个很难忘的经历,一下午都在咬牙切齿的查各种eslint报错是什么意思,怎么关掉。

不过eslint也有一些有意义的要求,比如parseInt()方法的第二个参数通常我都不传,严格来说这样确实不算好的实践。

canvas在小程序组件中的使用

开发过程中遇到最坑的问题,是我自己看文档不仔细导致的,但我觉得更大的责任在于小程序官方文档太乱了。

初始化canvas实例的wx.createCanvasContext()方法,其实有两个参数,第二个参数通常也是都不传,仅在组件内使用时这个参数才需要传this,之前一直没在组件里用过canvas,导致忘了还有这么个参数,也不报错,就是canvas死活画不出东西,查了好半天才发现是这个原因。

这种情况完全可以在开发工具中给个报错,为什么不?

查文档的过程中,真心觉得小程序的文档组织太TM乱了,知识点是全的,但同一个东西的知识点散落的到处都是,比如说单独看【框架】这个栏目的内容,你根本不可能掌握小程序框架是怎么一回事,再看看“指南”才能知道个大概,然后再看组件和API,才能写出个hello world项目。

就说自定义组件的开发吧,自定义组件的接口、开发、发布、安装每个环节的内容,被分别散落在【框架】、【指南】、【工具】的不同篇幅里,也就是第一次开发自定义组件的时候,需要把整个文档都翻腾一遍,才能找到所有我需要知道的东西,你说扯不扯。

发布与安装npm包

自定义组件开发完了就要发布到npm,发布过程是全程最愉快的部分了,一点坑没有,开发环境测试没问题,运行构建命令:

npm run build

这时会产出一个miniprogram_dist/文件夹,整个项目的.gitignore和.npmignore都预置好了,如果你把代码提交到GitHub,将只提交源码和必要的工程文件;如果要发布到npm,在已经登录npm的前提下只要执行:

npm publish

就会按小程序支持的格式(包含miniprogram_dist/)将代码发布到npm,然后就可以在其他小程序项目里安装并使用了。
小程序项目安装npm包有点麻烦。

首先在小程序代码根目录(project.config.json中miniprogramRoot配置的目录)中依次执行:

npm init
npm i weapp-plugin-dashboard -S --production  // 此处以安装weapp-plugin-dashboard模块为例

只有这样安装的模块才算数,一开始我随手创建了个package.json文件写上依赖包名称,然后执行npm i,虽然模块也下载了,但会在下一步的开发者工具中报错,提示找不到npm包,可能是因为package.json文件不规范,但是文档没有告知怎样的package.json才算规范。

安装完毕后,在开发者工具中看不到node_modules/这个目录,因为此时这些模块小程序还并不支持,需要再构建一下才能用。

首先,在开发者工具的项目配置里开启使用npm模块,然后执行“工具-构建npm”操作,成功后会产出一个miniprogram_npm/文件夹,这个文件夹是可以在开发者工具中看到的,到这一步npm包才算真的安装成功,可以在小程序项目中正常调用了。

开源一个微信小程序仪表盘组件过程解析

最后

再放一下项目地址吧,

https://github.com/tower1229/weapp-plugin-dashboard

欢迎感兴趣的朋友一起参与开发。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
JS对日期操作封装代码实例
Nov 08 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 #Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 #Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 #Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 #Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 #Javascript
微信小程序渲染性能调优小结
Jul 30 #Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 #Javascript
You might like
php mysql索引问题
2008/06/07 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
jQuery中width()方法用法实例
2014/12/24 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python读取Excel的方法实例分析
2015/07/11 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
django创建css文件夹的具体方法
2020/07/31 Python
python 实现客户端与服务端的通信
2020/12/23 Python
python实现xml转json文件的示例代码
2020/12/30 Python
CSS3 简写animation
2012/05/10 HTML / CSS
css 元素选择器的简单实例
2016/05/23 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
中医专业应届生求职信
2013/11/17 职场文书
优秀团队获奖感言
2014/02/19 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
iPhone13将有八大升级
2021/04/15 数码科技