ahao430 的博客

在小程序中尝试引入jest进行简单的单元测试。 安装1yarn add -D jest 配置在package.json添加test命令，执行jest； 在项目根目录新建test目录，用于存放test文件； 在根目录增加jest.config.js文件，设置jest配置。配置文档 配置问题新建一个测试文件。直接运行yarn test可以运行。但是使用es modules的import和export方法会报错。上网查阅解决办法，说是要用babel，但是尝试了几种方案都报错，要注意babel的版本。按照官网建议jest配置文件设置用babel-jest进行transform，babel配置如下解决： 1234// babel.config.jsmodule.exports = { presets: [['@babel/preset-env', { targets: { node: 'current' } }]],} 另外一个问题是引用模块的路径问题。我们项目的根路径是&#x...

从零开始介绍下gulp的使用，及小程序的工程化搭建。 gulp介绍gulp是一款基于流的思想，执行一系列预设任务的工具。将工作拆解为一个个的任务，并通过流的传递来链式调用执行。 gulp vs webpack我们现在常用的webpack是一款打包工具，二者在思想上不同，但是又能实现很多相同的功能。webpack更适合SPA那种单一入口的项目，而gulp更适合多页面的处理。 安装及使用gulp一般全局安装即可。当然具体项目还需要安装对应的gulp插件。 1npm install -g gulp 在项目根目录新建一个gulpfile.js文件，进行相关任务的编写。其中gulp.task(‘default’)是默认任务，可以直接用 “gulp“命令执行，其他任务需要用”gulp 任务名“来执行。 12345678// gulpfile.jsconst gulp = require('gulp')// 默认任务gulp.task('default', done => { console.log('gulp执行了...

当前小程序项目全局状态及逻辑判断太复杂，尝试引入状态管理优化逻辑，同时将重复的逻辑判断放到getters中。这里我们使用mobx4，因为mobx使用了小程序不兼容的proxy。 mobx4介绍主要是这几个api： observable get autorun action 我们引入observable创建一个store，创建一些观察对象 12345678910111213141516171819202122import {observable, autorun} from 'mobx'const store = observable({ // 响应状态 value: 1, list: [], // computed get count () { return this.list.count } // actions setValue (val) { this.value = val } addItem (item) { this.list.push...

近期做了一个h5页面拼装demo项目，里面包含了前台、后台、简易服务端三个子项目。其中后台用iframe嵌套了前台h5页面做预览用，前后台又依赖服务端，每次启动都要依次运行三个服务。那么能否一次开启这三个服务呢？ 需求分析 需要在根目录中执行子目录的npm命令开启服务 我们希望开启三个cmd窗口来监听，而非在一个窗口内，不然开发时调试信息就无法查看。 npm脚本是支持使用&&串联多个命令的。但是我们的目的是并行，而非依次执行。 开发时启动监听服务，服务不会结束，不会走到下一个服务。 前两点可以通过使用shell脚本来解决。 shell脚本npm脚本中可以直接运行shell脚本。在项目根目录新建三个shell脚本，分别对应三个子项目。内容如下： 123# startPC.shcd ./pcnpm run serve 123# startH5.shcd ./h5npm run serve 12345# startServer.shcd ./servernpm run startwait# 这里加个wait，防止窗口一闪就关闭了 再在package.json编辑...

最近搭建了一套基于vue-cli的后台项目。 vue-cli3，安装vue全家桶 UI采用的是ant-design-vue 考虑到主题切换需求，css采用了vue-styled-components npm scripts配置多环境 引入immer.js操作对象 安装mockjs方便开发 引入了storybook管理组件 使用webpack-dll-plugin优化打包 1. 目录结构12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455.├── .ci├── .git├── .storybook ........................................storybook配置文件│ ├── main.js│ ├── manager.js│ └── preview.js├── dist├── node_modules├── public│ ├── vendor ...................

移动端的列表页加载，一般是下拉加载更多，当翻页较多时，页面渲染节点太多，就会造成页面卡顿。需要对长列表进行优化，达到无限下拉。在微信小程序的扩展组件有一个recycle-view实现的长列表，支付宝没有长列表组件，需要我们自己开发。 实现原理长列表渲染节点过多造成卡顿。 实际上我们只需要渲染可视区域即可，对视口以外的部分，可以用padding或者一个指定高度的view来合并代替。监听页面滚动，修改渲染部分。这样不管我们怎么滚动，页面中渲染的节点数量是固定的。实际上考虑到用户感受，前后页面也进行渲染。 此时的问题就是计算了。列表还是那个列表，我们要根据scrollTop计算从哪个到哪个元素显示，计算顶部和底部高度。另外，列表的元素高度可能不固定，要传入函数动态计算。 组件设计模板我们设计成这样，通过具名slot传入元素。外部传入list用于计算，同时通过recycle-item-{{index}}的slot来传入列表元素渲染。通过控制渲染的index，来控制渲染部分，同时通过pt和pb的值控制上下空间。 微信的recycle-view还有一个recycle-item组件，这就造成了...

1. 相关说明SSL证书分为个人DV、企业OV、企业EV三类。免费SSL证书都是DV。 个人的一般三个月就要续期，且安全性较差。EV最安全，适合银行等客户使用。 证书的域名又有单域名和通配。 购买证书网站：https://www.getssl.cn/ 2. 购买证书这里以阿里云为例。 登录阿里云，菜单选择安全（云盾）->SSL证书（应用安全），点击购买免费证书。 选择免费证书，购买。 到证书控制台，找到未签发的证书。点击证书申请，填写资料。 这里域名验证方式要选手工，因为我们的域名解析不在阿里云上。提交审核得到验证信息，去域名管理添加记录。 等待解析生效，点击验证。验证成功，提交审核。可以看到现在状态是申请审核中。 审核通过，下载nginx证书，点击帮助可以看到nginx相关SSL配置。 3. 配置nginx服务器下载后，登录服务器，在nginx目录新建cert文件夹，放入解压后的两个文件。 再找到nginx配置文件，对应的server建立443端口server，加入ssl配置。ssl证书的路径对应刚刚的cert路径。 之前的80端口加入重定向。 最后，重启n...

1. 相关说明SSL证书分为个人DV、企业OV、企业EV三类。免费SSL证书都是DV。 个人的一般三个月就要续期，且安全性较差。EV最安全，适合银行等客户使用。 证书的域名又有单域名和通配。 购买证书网站：https://www.getssl.cn/ 2. 购买证书这里以阿里云为例。 登录阿里云，菜单选择安全（云盾）->SSL证书（应用安全），点击购买免费证书。 选择免费证书，购买。 到证书控制台，找到未签发的证书。点击证书申请，填写资料。 这里域名验证方式要选手工，因为我们的域名解析不在阿里云上。提交审核得到验证信息，去域名管理添加记录。 等待解析生效，点击验证。验证成功，提交审核。可以看到现在状态是申请审核中。 审核通过，下载nginx证书，点击帮助可以看到nginx相关SSL配置。 3. 配置nginx服务器下载后，登录服务器，在nginx目录新建cert文件夹，放入解压后的两个文件。 再找到nginx配置文件，对应的server建立443端口server，加入ssl配置。ssl证书的路径对应刚刚的cert路径。 之前的80端口加入重定向。 最后，重启n...

1. 环境变量vue-cli支持环境变量，vur-cli-service命令可以通过–mode读取不同的配置文件，从而读取不同的变量。 在项目根目录新建.env.开头的配置文件： .env.build-prod文件： 12NODE_ENV=productionVUE_APP_ENV=prod 在package.json中通过–mode传入配置文件的名字： 12345678910111213141516{ "scripts": { "start": "vue-cli-service serve --mode dev-test", "serve": "vue-cli-service serve --mode dev-test", "dev": "vue-cli-service serve --mode dev-test", "dev:test": "vue-cli-s...

1. 框架问题组件中使用setData等api报错在多层组件嵌套中，有些异步操作时页面已经销毁，此时组件执行相关代码就会报错。因此，在深层组件中，最好对一些操作尤其是异步操作，先判断this.$page是否存在。 修改导航栏文字颜色导航栏文字颜色不可直接设置，但是可以通过my.setNavigationBar设置背景色，颜色会根据背景色是深色还是浅色自动控制。即使导航栏设置为透明，依然可以设置背景色来控制右侧收藏和退出按钮的颜色。 隐藏页面标题可以通过my.setNavigationBar将页面标题设置为空来隐藏，同时设置页面背景色可改变文字和右侧组件颜色（反色黑或白）。但是实际发现标题为空在ios不生效，会显示小程序标题。 解决办法：设置为’ ‘。有个空格就不会判空了。 12345 my.setNavigationBar({ title: ' ', backgroundColor: '#000', borderBottomColor: '#000',}) 组件createSelectorQu...