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


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版TAB选项卡效果实例
Aug 16 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
BBS(php & mysql)完整版(一)
2006/10/09 PHP
php中cookie的作用域
2008/03/27 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
js确定对象类型方法
2012/03/30 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中random模块用法实例分析
2015/05/19 Python
Python如何判断数独是否合法
2016/09/08 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Pycharm更换python解释器的方法
2018/10/29 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
个人党性剖析材料
2014/02/03 职场文书
作文评语大全
2014/04/23 职场文书
欢迎词怎么写
2015/01/23 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
Python绘制分类图的方法
2021/04/20 Python
Golang map映射的用法
2022/04/22 Golang