webpack引入webview注入的js对象问题

在webpack里面引入第三方的js有这几种情况

1.在index.html里面引入script标签的方式

2.混合模式下需要引入webview里面注入的js对象

针对这两种情况都可以使用webpack的配置:

externals:{
  Avatar:'Avatar',// script标签方式
  nativeAPI:'window.App5' // webview里面注入的,这里window一定要加上
}

 

vue基于webpack多页面项目模板

基于vue-cli的项目模板是一个SPA的模板,在这个基础上修改下得到了多页面的模板

github地址:https://github.com/rt-zhangxuefei/vue-project-multipages-template

主要修改如下:

build/utils.js 新增方法

exports.getEntries = function (globPath) {
 var entries = {}
 glob.sync(globPath).forEach(function (entry) {
 var entryName = path.basename(entry, path.extname(entry))
 entries[entryName] = entry
 })
 return entries
}

继续阅读“vue基于webpack多页面项目模板”

写个简易的Android WebView App

为了更新和维护方便,大多app开发采取了hybrid模式,前端页面有时在浏览器展现的效果跟在webview里面展现的效果不一样,为了方便测试,自己鼓捣了2天Android开发,弄了个简易的app,兼容(4.4+)功能就是输入网址,在webview里面打开。其它没了。apk下载地址:MyWebViewApp v1.0.1 继续阅读“写个简易的Android WebView App”

基于vue的地址级联组件(包含最新全国省市区2016-07-31基础数据)

最近有用到地址级联,使用vue开发很容易写成一个组件,分享出来(已经包含了全国省市区基础数据),目前生产json数据是最新的http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201703/t20170310_1471429.html

如果后面我没有及时更新,程序里面有个genData.js的node程序,用来生产json格式,只需要在上面的网站复制最新的数据到data.txt里面,启动node程序会自动生成。

github地址:https://github.com/rt-zhangxuefei/vue-address-cascader 点击阅读查看演示效果哦

继续阅读“基于vue的地址级联组件(包含最新全国省市区2016-07-31基础数据)”

各种width和height傻傻分不清楚(width,clientWidth,scrollWidth,offsetWidth,innerWidth,outerWidth)

width:内容宽度(标准盒模型),怪异盒模型下包含了border,padding

 

clientWidth:包含内容和padding的宽度

继续阅读“各种width和height傻傻分不清楚(width,clientWidth,scrollWidth,offsetWidth,innerWidth,outerWidth)”

vue2-slider(基于vue2.x的移动端焦点图组件)

焦点图或者说轮播图是非常常用的一个组件,自己也用过像swiper这样的插件,其实在H5里面使用的功能都是非常基本的,所以还是打算自己写一个最小化功能的焦点图组件。使用了vue2.0框架,功能包含:自动轮播,滑动,无限循环,点击跳转页面。源码地址:https://github.com/rt-zhangxuefei/vue2-slider

这也是我自己第一次发布到github上

其中遇到了父级添加了touchstart并且需要阻止默认时间,此时子元素里面的a标签不会触发。查阅很多,最终的处理方式是模拟去出发a标签的click事件,因为href是click点击触发跳转

ECMAScript6新特性及ES5对比整理

这里整理ES6新特性以及跟ES5的对比用法

1.const 常量定义

const URL="http://zhangxuefei.site";

定义的常量不能被直接赋值修改,但是如果a=URL,那么a的值是可以修改的,如果PI是一个引用类型,那么对a的修改也会影响到URL

ES5定义如下:

Object.defineProperty(typeof global==="object"?global:window,"URL",{
 value:"http://zhangxuefei.site",
 enumerable:true,
 writable:false, //不能赋值
 configurable:false //不能delete
 });

 URL=2;
 console.log(URL);//http://zhangxuefei.site

继续阅读“ECMAScript6新特性及ES5对比整理”

自己动手开发UI组件库(VanUI)

为了初步统一H5项目里面的UI样式,也为了提升团队的开发效率,自己向优秀的UI开源项目学习,结合实际情况,模仿开发了这套UI样式库。这个项目本身来讲没什么太深的技术,但是对于我个人来说确实一个新的起点,使用了很多开源框架和组件,随着不断学习深入,也应该朝着独立开发UI组件的方向继续前行。通过对WeUI(微信团队开源的样式库)的学习模仿修改,形成了现在的VanUI。确实学习WeUI对我帮助很大,基于npm来构建项目,使用less来高效开发css,通过合理目录划分来方便团队协同开发。总之收益匪浅,VanUI遵循MIT协议。 继续阅读“自己动手开发UI组件库(VanUI)”