袁杰Jerry

由于项目需要，自己写了一个联动的UI，主要是用bootstrap的modal和tab页组合起来，并且动态的生成一些UI元素完成的。

本文主要介绍了webpack的安装和基本使用，并且使用webpack进行项目的打包。

本文主要详细介绍了nightwatch的各项配置，包括基础配置，selenium的配置，各个环境的配置，全局变量等，欢迎围观。

本文主要介绍了流行的端到端测试框架nightwatch的基本知识，并且介绍了安装步骤，最后实现了一个小的测试用例并且运行成功。欢迎围观。

本文介绍了nightwatch测试文件的基本写法，比如：选择器的切换，钩子函数的用法，全局变量的使用等，欢迎围观。

本文介绍了nightwatch测试文件是如何运行的，包括：不同环境下的运行方式，命令行选项设置，按分组测试，按标签测试，多环境并行测试等，欢迎围观。

本文介绍了在nightwatch中使用page object的方法，包括：url属性的作用，elements的配置，sections的用法以及command的写法，欢迎围观。

背景：这几天事情比较少，看了下谷歌的插件开发（chrome extension），入了个门csdn广告太让我烦了，就不能像博客园那样干净点吗所以我就趁热打铁，撸了个helloworld版的chrome extension，用来屏蔽csdn博客的详情页的广告。项目地址github：https://github.com/JerryYuanJ/demos ，其中的 02-sim...

有过小程序开发经验的都知道，在小程序的生态环境中，是很难做到像其他项目那样完全的CI的，因为我们的上传代码是只能在IDE中操作且代码是提交到微信服务器的，微信并没有提供接口让我们可以自动化部署代码。一个我们项目中比较常见的问题是，我们本地开发好后，如果想上传代码到腾讯服务器上，需要将本地的一些配置项修改成线上的版本，比如我们的接口地址，项目配置信息等。当然你可以手动去维护，但是不提倡，因为...

本文主要是熟悉微信小程序自定义组件的开发，以一个常见的导航栏（Tabbar）需求为例。官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/首先我们先看一下最终实现的效果：这是一个非常简单的例子，就用这个例子敲开自定义组件的大门。如果你对vue的组件很熟的话，那么你应该会轻松上手...

本文介绍了在微信小程序中，如何实现常见的一大段文字的查看更多的效果。

看微信文档时看到这个很有趣的api，但是官方的文档和例子关于这个api的介绍都是很让人失望的，所以花了点时间了解了以下这个方法，做个记录，供参考。简介首先，我的理解是，这是一个观察器（废话），它用来监测目标对象与某个参照物的相交情况。什么是相交情况？通俗的说，就是两个区域有重叠（公共区域）了，类似与数学中的交集，不过这个是平面上的。我们用官方给的一个简单的例子进行讲解：https://dev...

本文主要介绍了两种方法来实现某元素随着页面的滚动，吸附在顶部的效果。一个是使用上一片博客所说的 IntersectionObserver ，一个是使用page的onPageScroll监听函数。欢迎围观。

好吧，做了回标题党==但是，说的的确也没错。不需要使用其他的js库，也可以轻松的实现base64的编码和解码，不信你可以往下看。基本方法编码: btoa()你可以使用window.btoa(str)来将一个字符串编码成base64的字符串。解码: atob()window.atob(str)可以将一个base64编码后的字符串解码。参数如果不是正确的base64编码后的话，该方...

本文是vue2系列源码的第一篇，主要是介绍了vue全局工具方法，并且深入的剖析了一些比较重要的方法。总的来说，这些工具方法还是比较容易理解的，但是对JavaScript基础有一定的要求，比如函数、闭包、对象等基本重要的概念要理解。

开始之前，我们先看看src目录的结构目录结构compiler编译器corevue的核心部分，包含响应式原理、vdom，内部组件等platforms因为vue是跨平台的(web 与 weex)，在不同平台的编译、运行等行为有所不同，所以这里是给这两个平台量身定制的server服务端渲染相关sfc单文件组件的解析shared全局共享的工具函数(util.js)和常量(con...

在上一节分析了，Vue的构造函数中，只有一句this._init(options)，可见这行代码的重要性。今天我们就来详细的看看这个函数主要干了什么事。为了不那么抽象，我会用一个简单的例子来贯穿整个讲解。这个例子非常简单。var app = new Vue({ el: '#app', data(){ return { name: 'hello' } }...

本文记录了一些vue项目中的一些经验，包括项目结构，路由管理，路由使用技巧，公有组件抽取，公有方法抽取，样式管理等，欢迎围观。

今天介绍vue开发中用的最多的国际化插件：vue-i18n。本文主要参考官网文档，并且结合项目实际需要做了些改进。欢迎围观。

函数，对于js来说，应该是最重要的部分之一了。它本身也是一个对象。本文将介绍函数的基础部分相关知识。（ES6函数新特性请戳阮老师的链接http://es6.ruanyifeng.com/#docs/function,本文不涉及）1.定义函数首先要明确的一点是，函数也是一个对象，所以函数名可以看做一个指向这个对象的指针。js中的函数定义是不需要定义返回值的。定义一个函数有如下三种方式。它们各有不同。...

本博主要记录了在表格中如何显示头行结构。利用的技术是vue和bootstrapTable还有JQuery。

React入门-根据官网的手册进行整理翻译的入门篇

本节主要包括以下内容：应用中心界面的布局mt-swipe，loadmore，mt-cell，mt-actionsheet等组件的使用echarts的使用1.应用中心界面的布局页面的大体结构是一个头标题，走马灯的图片展示区域，和下面的子应用的icon展示。

本节主要包含以下内容：首页大致布局vuex进行底部tabbar的显示与隐藏控制和tab选中控制mint-cell-swipe组件的使用1.vuex的引入与使用2.首页布局与mint-cell-swipe的使用

本节包含以下内容：使用vue-cli脚手架搭建一个项目项目的主界面搭建vue-router的使用1.项目搭建使用vue-cli的脚手架可以帮助我们快速的搭建一个基于webpack的vue项目，在命令行输入 vue  init  webpack '项目名称'  ，可以快速的创建一个完整的工程。这里一路的敲回车保持默认就可以了。其次我们进入项目根目录，在命令行输入

之前学习vue的知识期间，自己写了一个基于mint-ui的移动小应用，主要是将vue相关的知识串联起来一起使用，形成一个开发体系。今天晚上将这个小项目整理了一下，做个笔记。项目包含的知识点如下：vue-router管理项目的页面跳转vuex管理应用的公共状态axios进行网络请求，包括跨域的配置mock数据进行本地数据模拟mint-ui常用组件的使用合集：mt-swipe，

本节主要包含以下内容数据mock和axios的使用用户圆形头像的显示样式1.数据mock首先我们先在mock文件夹中定义一个标准的json数据文件data.json{ "my": { "name": "周一", "age": 39, "gender": "男", "job": "开发工程师", &

我们知道，在mint-ui的组件中，有一个MessageBox，用于弹出对话框与用户进行交互的，它支持常见的三种对话框：简单的提示框alert，提示确认框confirm，用户输入对话框prompt，这三种的用法比较简单，只要参考官网的配置去设置对应的options就可以完成常用的需求了。但是我最近在使用prompt时，遇到了一个问题，就是用户输入时，当输入的内容不合法点击确认时，MessageBo

近期做的项目中遇到一些棘手的问题，解决的过程用到很多知识，在此记下主要的问题与解决方法。页面功能介绍：获取五张表格的大量数据（大概有几千条记录），然后到前台显示在table里面，实现行列汇总。页面保存也是要保存这些数据的（几千条）。大概有三个如下的表格保存着大量数据：1.页面大量计算的解决方案如果原来页面有默认值，要显示默认值，并且要显示行列汇总。数据少的时候，在前台直接使用j

最近做移动项目（H5）时遇到一个需求，就是在线预览pdf文件。其实本来使用window.open()就可以实现了，但是这个API在IOS上是正常的打开Safari浏览器进行预览，在安卓上打开是则是下载预览，客户不满意；而且在将该应用嵌入到钉钉微应用时，这个API在安卓设备上根本不起效果。于是在网上找到了这个插件，去官网摘了个例子，并且结合移动端的上下左右滑动滑动翻页做了个例子，完美解决。以下是详细...

本文主要介绍vue移动端使用富文本编辑器的使用及常见问题处理。参考组件vue-html5-editor。本例主要基于vue-cli脚手架创建。更多vue相关应用请参考：https://github.com/JerryYuanJ/a-vue-app-template1.项目创建与初始化创建一个vue-cli项目，建议在安装的时候不要使用ESLINT做代码检查，练习的项目不需要这种检查机...

概要下拉刷新是很常见的应用需求，也是目前很主流的一种交互手段，之前一直使用的是mint-ui的load-more组件，但是要配置的项太多，比较复杂，今天有空自己写了一个下拉刷新的组件，主要是自己体会一下这种组件的实现机制和编写的难点，折腾了一个小时，终于写出了一版像样一点的，也算是小有收获吧，这边文章记录了写该组件时遇到的一些问题及解决办法。首先，你需要会的知识点有：1.H5的touch事件2.父...

本文主要介绍了javascript中关于对象的相关知识，包括定义数据属性和访问器属性，防篡改对象的三个级别等。

现在下拉刷新和上拉加载更多是很常见的需求，并且在列表上的用户交互（比如删除当前列表项，标记当前列表项为收藏等）也是非常常见的需求，mint-ui提供了Loadmore组件和CellSwipe组件分别实现了上述两种功能。关于两个组件的详细使用，这里不废话了，官网的例子跑一边基本上就掌握了。这里主要介绍两者结合使用，完成常见的用户操作

最近项目上有这样一个需求，做统计图表的展示，但是要在一个页面实现图表的切换和按日期条件的查询。类似这样的。点击图标选择器会弹出一个列表供用户选择要看的图表类型，图表选定后，点击右上角的选择日期会查询数据刷新当前的图表。其实，这种需求最简单的做法，就是将所有的图表写在一个界面中。但是每个图表的配置项不同，图表一多的话，界面代码将会非常臃肿且难以维护。所以我没有使用这种方法。我采取了子路由的方式。首先...

上一节可以看成是merge数据前期准备，下面就介绍到了我们的mergeOption的重头戏啦——merge。先看代码（仍然是mergeOptions里面的代码）：const options = {}let keyfor (key in parent) { mergeField(key)}for (key in child) { if (!hasOwn(parent, key)) ...