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


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 相关文章推荐
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
js继承实现方法详解
2016/12/16 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
详解用python实现简单的遗传算法
2018/01/02 Python
详解Python中where()函数的用法
2018/03/27 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
python把转列表为集合的方法
2019/06/28 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
大学辅导员事迹材料
2014/02/05 职场文书
史上最牛辞职信
2015/05/13 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
五年级数学教学反思
2016/02/16 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书