Giter VIP home page Giter VIP logo

blog's Introduction

blog's People

Contributors

coldxu avatar

Stargazers

avatar sakura avatar

Watchers

James Cloos avatar Nimo Chu avatar

blog's Issues

微信开发实用方案

微信开发实用方案

初次接触微信项目的开发人员，会遇到一些开发难点。例如:采用什么方式页面布局、滚动性能差、用户体验不好、缺失触摸事件等一系列问题。许多开发者会选择插件扩展页面功能，但移动端插件繁多很难取舍。

为了解决这一问题，我把移动端项目中实用的插件整合到了一起，尽量避免重复使用无用插件，按照文档流程开发页面即可，并且可以满足大多数业务需求，无需学习其他框架库知识，只需了解插件用法和API。底层库使用Zepto

使用的插件工具

移动端项目，尤其是针对微信端项目，推荐使用以上JS插件做为基础插件可以满足大多需求。

1. rem.js
弹性布局插件
遵循插件推荐的公式算出rem值，元素赋于rem后内容会适应各种屏幕尺寸。

2. iScroll.js
移动端滚动插件
解决手机浏览器滚动性能低下卡顿问题，自带缩放、拉动刷新、捕捉元素等等。

3. hammer.js
触摸事件插件
弥补原生JS缺失触摸事件的不足，支持点击、滑动、拖动、多点触控等事件，并且体积较小。

开发流程

  1. 页面需要用到的图片，在PSD设计稿里导出。

  2. html里引入插件，根据iScroll5插件要求，把HTML基础结构写好。

  3. 确认PSD基准尺寸，参考PSD设计稿切图，并且完成rem布局。(支持高分屏的设计稿，PSD设计稿大小缩至一倍在进行参考切图)

    rem值换算方法
    - 切图过程中不用去管rem换算，切图完成后在把固定单位，根据公式推算出rem值
    - 或者使用sass、less之类的CSS编译语言，封装一个计算rem值的函数

  4. 根据客户需求添加网页功能和iScroll相关配置，涉及事件处理请使用hammer.js。

注意事项

  1. 避免使用jQuery Mobile，初学jQuery Mobile人员会遇到很多与jQuery Mobile有关联的冲突和缺点。 例如

    • audio标签无法播放音乐
    • 表单元素莫名被嵌套预定义的div标签
    • 微信加载速度缓慢
    • 体积过于庞大等等

    如果需要使用jQuerye Mobile的触摸事件，可以用hammer.js来替代。

  2. 此微信开发方案，为了减少其他框架的学习成本，使用jquery库但所使用插件不依赖jquery。

相关参考下载

rem.js
isroll.js
hammer.js
文档后续还有补充

实用技巧

实用技巧

前端技术和不错的第三方插件工具分享，会一直更新下去。

索引

  1. 移动端
    1. 移动端页面开头
  2. 综合
    1. js多行字符串转换
    2. smarty保留两位小数
      1. 移动端排错代码
        4.mac添加环境变量
  3. 工具
    1. 百度图表工具
  4. sublime插件
    1. AdvancedNewFile（快速新建文件）

top 移动端页面开头

<head lang="en">
    <meta charset="UTF-8">
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-title" content="">
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!--下面三个是清除缓存 微信浏览器缓存严重又无刷新；这个方法调试的时候很方便-->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>web前端</title>
</head>

top js多行字符串转换

ecmascript 6 已经支持多行字符串写法，但对浏览器的兼容欠缺，不过可以使用Babel转码器，ecmascript 6语法转为浏览器所兼容的ecmascript 5语法。

var doc = function (fn) {
    // 1. 移除起始的 function(){ /*!
    // 2. 移除末尾的 */ }
    // 3. 移除起始和末尾的空格
    return fn.toString()
        .replace(/^[^\/]+\/\*!?/, '')
        .replace(/\*\/[^\/]+$/, '')
        .replace(/^[\s\xA0]+/, '').replace(/[\s\xA0]+$/, '') // .trim()
}

top smarty保留两位小数

{{$date_price=$date_price|string_format:'%.2f'}}

top 工具插件

top 排错代码

    window.onerror = testError;
    function testError() {
        arglen = arguments.length;
        var errorMsg = "参数个数：" + arglen + "个";
        for (var i = 0; i < arglen; i++) {
            errorMsg += "/n参数" + (i + 1) + "：" + arguments[i];
        }
        alert(errorMsg);
        window.onerror = null;
        return true;
    }

用于排错，安卓部分机型浏览器会启用严格模式，遇到错误会很难排查，用此代码可以把错误输出

top mac添加环境变量

    #查看当前环境变量
    echo $PATH    

    #添加环境变量    
    echo 'export PATH=/user/localhost/mongodb/bin:$PATH'>>./bash_profile

    #添加环境变量，需要重启，如果想立即生效可以输入
    source .bash_profile

top AdvancedNewFile（快速新建文件）

用于批量更改项目里git用户名和邮箱的shlle

  #!bin/bash
#用于批量更改项目里git用户名和邮箱

current_path=pwd;
set_git_config() {
    cd $1
    for file in ./*
    do
        pa="${file}/.git"
        if [[ -d $file && -d "${file}/.git" ]];
        then
            cd $file && git config user.name $2 && git config user.email $3 && cd ..
        fi
    done
}

set_git_config ~/cold "ColdXu" "[email protected]"
set_git_config ~/git "zhiyong.xu" "[email protected]"

echo "modification git config �success!"

模拟rm改成移动到回收站

  #!bin/bash


# Source global definitions
if [ -f /etc/bashrc ]; then
        . /etc/bashrc
fi

alias rm=trash #命令别名 rm改变为trash，通过将rm命令别名值trash来实现把rm改造成删除文件至回收站
alias r=trash
alias rl='ls /.trash' # rl 命令显示回收站中的文件
alias ur=undelfile # ur命令找回回收站中的文件

#这个函数的作用是找回回收站下的文件
undelfile(){
   mv -i /.trash/\$@ ./
}

#这个函数是将指定的文件移动到指定的目录下，通过将rm命令别名值trash来实现把rm改造成删除文件至回收站
trash(){
   mv $@ /.trash/
} 

#这个函数的作用是清空回收站目录下的所有文件
cleartrash(){
   read -p 'clear sure?[n]' confirm
    [$confirm == 'y' ] || [ $confirm == 'Y' ] && /bin/rm -rf /.trash/*
}

改变系统ll命令显示所有

  #!bin/bash
alias ll='ls -alF'

热门JS库教程文档

热门JS库教程文档

JS库非常多， 有时会忘记一些库的用法要去查阅文档，但查阅文档时却忘记网址。
一些热门库的教程文档列出来，方便查阅。

索引

  1. react.js
  2. css3动画监听器

react.js #

链接

css3动画监听器 #

链接

百度图表工具 #

链接

实用js多行字符串转换

var doc = function (fn) {
    // 1. 移除起始的 function(){ /*!
    // 2. 移除末尾的 */ }
    // 3. 移除起始和末尾的空格
    return fn.toString()
        .replace(/^[^\/]+\/\*!?/, '')
        .replace(/\*\/[^\/]+$/, '')
        .replace(/^[\s\xA0]+/, '').replace(/[\s\xA0]+$/, '') // .trim()
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.