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


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 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 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性能的21种方法介绍
2013/06/25 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
.net C#面试题
2012/08/28 面试题
清洁工岗位职责
2014/01/29 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
Django程序的优化技巧
2021/04/29 Python
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python