blog
blog copied to clipboard
zhouwenbin
blog
在开发组件的时候，一定会遇到组件的通信，比如点击一个图标出现弹窗和蒙层，这三个分别是不同的组件。管理他们之间的状态就成了问题。 ## props双向绑定 [官方文档在这](https://vuejs.org.cn/guide/components.html#Prop-绑定类型)，通过`sync`双向绑定，属性变化会同步到所有组件，这也是最简单的实现方式，缺点是属性会比较多。实现方式如下 `App.vue`文件 ``` vue import mask from './components/mask/index' import dialog from './components/dialog/index' import dialogIcon from './components/dialog-icon/index' export default { components: { mask, dialog, dialogIcon }, data ()...
微信小程序的一些坑
1、750rpx并不是全屏，模拟的效果和真机上的差别很大。 2、模拟器支持div、span等元素，真机上不支持。 3、模拟器对css的支持比较完整，真机只支持部分，但是文档没有列出来。 4、不支持file上传图片,只能通过[wx.chooseImage](https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html)，且无法获取图片宽高。 5、[canvas](https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-canvas.html?t=1476197483819)只支持`context`，无法导出base64.
## 简介 [postcss-animation](https://github.com/zhouwenbin/postcss-animation/)用来帮我们添加动画的关键帧，数据来自[animate.css](https://github.com/daneden/animate.css)，会按需要生成相应的关键帧，不用导入一大坨样式。 ## 用法 ``` npm install postcss-animation --save-dev ``` ## 配置 ### postcss 新建一个`postcss.js`文件，代码如下 ``` js // Dependencies var fs = require('fs'); var postcss = require('postcss'); var animation...
很多同学都不太熟悉`flexbox布局`，觉得兼容性不好，还有的被各种属性绕晕了，有了恐惧的心理。其实`flexbox`在移动端已经兼容很好了，借助`autoprefixer`可以很容易的实现，常见的布局也只有几种，所以不需要感到恐惧。下面整理的几种方法，如没特别指明，都兼容到android4.1以上 ## 子元素等分 这种布局常用于底部的导航或者tab等分 ``` css ul{ display:flex; } li{ flex:1; } ``` [demo点这里](http://jsbin.com/raxumesute/1/edit?html,css,output) ## 左右固定宽度，中间自适应 这种布局常用于左右各有图标的列表 ``` css ul{ display:flex; } li:first-child, li:last-child{ width:50px; } li:nth-child(2){ flex:1; } ```...
## 项目地址 [https://github.com/zhouwenbin/vue-cordova](https://github.com/zhouwenbin/vue-cordova) 游戏本身就不说了，使用[vue](https://github.com/vuejs/vue)开发的，比较好上手，后期如果需要对接数据，再引入[vuex](https://github.com/vuejs/vuex)，[vue-resource](https://github.com/vuejs/vue-resource)，下面整理下开发中遇到的坑 ## 屏幕适配 游戏的需求是要可以横屏+全屏，所以适配方案选择缩放viewport的方案，然后设计稿尺寸多大就做成多大。需要注意的是ios在切换横竖屏的时候，`window.screen.width`值是不会变的，需要动态改变下。 ``` html function changeViewport() { var u = navigator.userAgent; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (window.orientation == 90 ||...
[css modules](https://github.com/css-modules/css-modules)是一种非常的好css模块化解决方案，可以确保多人多项目不会样式冲突，下面是我找到的几种结构配套方案，可以根据需要做选择。 ## react react就不多说了，搜一下基本都是react的demo，官方有几个demo。 - [webpack-demo](https://github.com/css-modules/webpack-demo) - [browserify-demo](https://github.com/css-modules/browserify-demo) ## Underscore templates [css-modules-html-demo](https://github.com/sgtpep/css-modules-html-demo)使用了[Lo-Dash/Underscore templates](https://lodash.com/docs#template)，亲测可以生成html文件。 ``` css /*style/block1.css*/ .element { color: red; } ``` 引入css，就可以用`block1.element`来调用class了 ``` html Block 1 element ```...
在公司的一个分享，ppt地址(需翻墙)：[http://slides.com/wenbin5243/deck-1/#/](http://slides.com/wenbin5243/deck-1/#/)
上两篇文章介绍了postcss，这篇文章介绍下[posthtml](https://github.com/posthtml/posthtml)，这东西还比较新，但是有些东西已经可以用起来了。 在这之前模块化我都是用slim+scss来做的，现在换posthtml，来看看差别在哪里。 我们的目录结构如下 ``` |-component |-button button.html button.css |-box box.html box.css index.html ``` `component`下放了所有组件，把html和css放一起， `button.html`代码 ``` html button ``` `button.css`代码 ``` css .button{ display: block; height: 40px; line-height: 40px; text-align:...
最近找了几个模块化的方案，[posthtml](https://github.com/zhouwenbin/blog/issues/6)还不是很成熟，[css module](https://github.com/zhouwenbin/blog/issues/12)需要和react一起比较好用，于是尝试了下[polymer](https://github.com/Polymer/polymer)。 polymer是基于web component规范的，[hello-world-polymer](https://github.com/webcomponents/hello-world-polymer)可以让我们快速的熟悉polymer。 polymer模块html，css，js都是写一起的，`hello-word.html`代码如下 ``` html Hello {{who}} :) Polymer({ is: 'hello-world', properties: { who: { type: String, value: 'World' } } }); ``` 定义好模块后，只要在`index.html`文件引入模块，然后用``标签就可以了，这个标签名跟模块里的id是一致的。 ``` html <hello-world> ```...
## 以往的目录结构 刚开始做项目的时候，只对css做了模块化，使用了sass，然后目录结构是这样的 ``` |-img |-js |-css |-pages page1.css page2.css |-scss |-utils _function.scss 函数 _mixin.scss 混合 _placeholders.scss 占位符 _variables.scss 变量 |-base _reset.scss 样式表重置 _base.scss 基础样式 _help.scss 辅助样式 |-components 组件 _btn.sccc...