lengziyu / notebook Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 428 KB

This is my noteBook.

notebook's People

Contributors

Watchers

notebook's Issues

限制输入框字数和iOS无法监听输入字数的问题。

html:
<textarea oninput="logText()" maxlength="250" placeholder="说说你的看法"></textarea>
js:
function logText() { var length = $("textarea").val().length; $("#textCount").text(length); console.log(length); }

npm install报-4058错误

改用cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

改用cnpm也报403错误，改一下npm源：

$ npm --registry https://registry.npm.taobao.org info underscore

然后找到目录：

C:\Users\Administrator\AppData\Roaming\npm\node_modules

然后删除，重新安装就好。

nuxt笔记

1.动态路由获取参数，如：

'/list/:id' ==>  '/list/123'

接收：

async asyncData ({ app, query }) {
  app.context.params.id
}

2.?获取参数，如：

'/list?id=123'

接收：

async asyncData ({ app, query }) {
  query.id
}

vue项目优化

1.JS文件按需加载

vue的组件懒加载，不要使用import的方法引入组件，而是使用require.ensure。

import Order from '@/pages/Order'
//如果写了第二个参数，就打包到该`/JS/index` 的文件中。
const Order = r => require.ensure( [], () => r (require('@/pages/Order', 'index')))
//不写第二个参数，就直接打包在`/JS` 目录下。
const Order = r => require.ensure( [], () => r (require('@/pages/Order')))

vue父子/兄弟传参数函数

父子组件：

在父组件指定点击事件后向子组件传递参数并调用子组件的事件：
给父组件写一个ref属性，父组件可以通过ref拿到子组件中的数据和方法（即下面例子的say方法），这样在父组件中就可以触发子组件的事件了。

# 父组件
<template>
  <div>
    <children ref="children" :formData="formData"></children>
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script>
  import children from './children.vue'

  export default {
  data () {
    return {
      formData:{
          name:'',
          mobile: ''
      }
    }
  },
  methods:{
    handleSubmit(){
        this.$refs.children.say();
    }
  },

  components:{
    'children': children
  }

}
</script>

子组件
<template>
  <div class="children">
    我是子组件
  </div>
</template>

<script>

  export default {
      //父组件通过props属性传递进来的数据
      props: {
          formData: {
              type: Object,
              default: () => {
                  return {}
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          say(){
              console.log(this.childrenSay);
          }
      }
  }
</script>

微信返回空白，往下滚又出现的问题

  created() {
    this.pageScrollTo();
  },
  methods: {
    pageScrollTo() {
      window.scrollTo(0, 0);
    },
  }

给高度不确定的盒子添加[垂直居中]。

给该元素的父级设置：
-webkit-display:table; display:table;
给该元素设置：
vertical-align: middle; -webkit-display: table-cell; display: table-cell;
完成啦~

uniapp app权限（定位位置、读取通讯录）

判断权限

官方有一个判断app是否有某个权限的插件：App权限判断和提示。
使用方法：

下载或导入插件，如目录放在：js_sdk/wa-permission/permission.js；
在页面引入这个模块：

import permision from "@/js_sdk/wa-permission/permission.js"

调用模块的方法：

//判断iOS上是否给予位置权限，有权限返回true，否则返回false
permision.judgeIosPermission("location")

API

一.获取iOS设备上当前App是否有某项权限

示例：

permision.judgeIosPermission(permissionID)

permissionID参数为iOS权限名称，值域清单如请看插件介绍。

二.获取Android设备上当前App是否有某项权限

示例：

// vue的method里编写如下代码
async requestAndroidPermission(permisionID) {
    var result = await permision.requestAndroidPermission(permisionID)
    var strStatus
    if (result == 1) {
        strStatus = "已获得授权"
    } else if (result == 0) {
        strStatus = "未获得授权"
    } else {
        strStatus = "被永久拒绝权限"
    }
    uni.showModal({
        content: permisionID + strStatus,
        showCancel: false
    });
}

permissionID参数为Android权限名称，值域清单如请看插件介绍
注：Android是动态权限，请求权限状态时会触发弹框询问是否赋权（如果已经同意或永久禁止则不会询问），所以必须使用异步方式来处理

三.跳去设置

permision.gotoAppPermissionSetting()

注：iOS上如果没有调用过的权限，不会出现在权限设置界面。

四.获取当前手机是否开启或关闭了定位服务

示例：

permision.checkSystemEnableLocation() //返回true或false

安卓输入框被键盘遮挡问题。

安卓输入框被键盘遮挡问题

安卓输入框时，键盘遮盖了输入框，输入框并没有向上弹。

尝试过用输入框触发fcous事件，把input样式属性设置为postion:fixed，当触发blur的时候则去掉。

但是当用户直接操作关闭软键盘时，此时input还是处于fcous事件，还是悬浮在上面。

这时又想到另外一个方法；来解决：弹出后，触发resize事件，检查当前窗口高度是否改变，如果改变就执行blur时的事件，但是测试过，只执行一次。

继续检查代码，发现我用的 sui，input的外面被.page-group，.page，.content包住，而这些都设置了postion:absolute，同样，body也设置了绝对定位，还有overflow:hidden属性，把这些都设置为position: static，body设置为overflow: inherit，就可以啦。

内部npm基本使用方法

pm2
pm2 是Node.js下的生产环境进程管理工具，就是我们常说的进程守护工具。
可以用来在生产环境中进行自动重启、日志记录、错误预警等等。
常用指令：

- pm2 start /usr/local/bin/sinopia  //用pm2启动sinopia进程
- pm2 logs                                      //打印进程
- pm2 kill                                     //杀死进程

localStorage操作与封装

封装：

// 储存localStorage
function setlocalStorage(storeName, storeData) {
	var storeStr = JSON.stringify(storeData);
	var storeArr = window.localStorage.setItem(storeName, storeStr);
	return storeArr;
}
//调用
setlocalStorage('userInfo', data);

// 获取localStorage
function getlocalStorage(storeName) {
	var storeName = localStorage.getItem(storeName);
	var storeArr = JSON.parse(storeName)
	return storeArr;
}
getlocalStorage('userInfo');

删除：

localStorage.removeItem('userInfo');

使用koala编译器编译sass时注意事项

由于公司项目接近下半阶段，这时做代码重构有点残忍了，几前端的代码基本都是各自写各自的，对于代码没复用、同一组件的界面不一致越来越明显。
首先想到用 sass 重构 css 代码，把一些复用组件取出来，需要的话再import，简单粗暴；
但这时用 fis3 、gulp 、webpack 又不行，毕竟不是我一个人的项目，而且到了业务后半期不太好，最后决定用 koala 操刀。
使用时遇到一些问题：

如想在 sass 用中文注释时，必须添加： @charset "utf-8";；
新建一个 sass 文件必须刷新，然后点击编译方可编译；

uniapp andriod & ios内测和上架

andriod上架注意事项

ios 内测版

账号申请有三种：个人开发者，公司开发者，企业开发者账号。
个人开发者和公司开发者内测版需要在证书添加设备UDID才可以安装，否则上架app store才可以，

ios上架注意事项

最近遇到的问题记录

1.vue路由开启`mode: 'history'`模式时，跳转刷新`Cannot GET /`。

vue开启路由mode: 'history'模式

  return new Router({
    mode: 'history',
})

跳转点击刷新出现：Cannot GET /about，解决方法是在vue.config.js(vue-cli3)配置添加：

module.exports = {
  devServer: {
    historyApiFallback: true
  },
}

服务器端设置的话用nginx解决。

数组去重

var arr = [1,2,3,4,4,5,6,6];
var set = new Set(arr);
arr = Array.from(set);

时间格式化

          //时间格式化
           function getDateDiff(dateTimeStamp){
               dateTimeStamp = new Date(Date.parse(dateTimeStamp.replace(/-/g, "/")));
               var minute = 1000 * 60;
               var hour = minute * 60;
               var day = hour * 24;
               var halfamonth = day * 15;
               var month = day * 30;
               var now = new Date().getTime();
               var diffValue = now - dateTimeStamp;
               if(diffValue < 0){return;}
               var monthC =diffValue/month;
               var weekC =diffValue/(7*day);
               var dayC =diffValue/day;
               var hourC =diffValue/hour;
               var minC =diffValue/minute;
               if(monthC>=1){
                   result="" + parseInt(monthC) + "月前";
               }
               else if(weekC>=1){
                   result="" + parseInt(weekC) + "周前";
               }
               else if(dayC>=1){
                   result=""+ parseInt(dayC) +"天前";
               }
               else if(hourC>=1){
                   result=""+ parseInt(hourC) +"小时前";
               }
               else if(minC>=1){
                   result=""+ parseInt(minC) +"分钟前";
               }else{
                   result="刚刚";
               }

               return result;
           };

Vue 多个自定义指令时冲突

例如全局设置了这么一条自定义指令，限制输入框只能输入小数点两位的数字。

Vue.directive('numberAmount', {
	bind: function(el) {
		el.handler = function() {
		el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null;
	}
	el.addEventListener('input', el.handler)
	},
})

当页面有两个输入框使用这个指令时。

<input v-numberAmount v-model="input1" type="text">
<input v-numberAmount v-model="input2" type="text">

发小数点删除或新增会影响另一个输入框的值。

解决方法

v-model改用:value，再加个输入事件@input,延迟一下修改值。

# template
<input v-numberAmount :value="input1" @input="inputVal($event)" type="text">

# js
methods: {
  inputVal($event){
    setTimeout(()=>{
        this.input = $event.target.value;
    }, 5)
  }
}

获取浏览器滚动方向

//获取浏览器scroll
function scroll() {
	if (window.pageYOffset != null){
	// 支持IE9 +
		return{
			left:window.pageXOffset,
			top:window.pageYOffset
		}
	}else if (document.compatMode == 'CSS1Compat'){
		return{
			left:document.documentElement.scrollLeft,
			top:document.documentElement.scrollTop
		}
	}
	return{
		left:document.body.scrollLeft,
		top:document.body.scrollTop
	}
}

判断滚动条是往上下还是左右方向：

window.onscroll = (function () {
	var sLeft = scroll().left;
	var sTop = scroll().top;

	return function () {
		if (sTop != scroll().top) {
			console.log('上下滚动')
			sTop = scroll().top;
		}
		if (sLeft != scroll().left) {
			console.log('左右滚动')
			sLeft = scroll().left;

		}
	}

})();

uniapp 开发记录

单位

用rpx

布局

用Flex

打包

云端打包

安卓端&iOS
云端打包流程：打开HBuilderX，顶部菜单【发行->原生App-云打包】，选打自定义调试基座，等待打包成功，原生App-查看云打包状态，编辑器底部打印台会显示最近打包的地址，点击下载即可。
注：iOS端需要苹果开发证书。

本地离线打包

安卓
用官方HBuilder-Hello的项目，
参考这个：uni-app用AndroidStudio打包apk文件

h5与app区别

CSSbackground-size属性，写在CSS里h5端生效，但是app端无效：

// app无效
uni-swiper-item{
        background-size: 100% 100%;
}

解决方法：就是在标签动态添加backgroundSize属性：

<uni-swiper-item 
:style="{ backgroundImage: 'url('+ banner.url +')', backgroundSize: 'cover' }"
>
</uni-swiper-item>

NODE_ENV 不是内部或外部命令，也不是可运行的程序。

环境背景：win10+marko
使用npm run build的时候报错，package.json如下：

"build": "NODE_ENV=production marko-starter build",

事实上，以上两条脚本都合并两条命令（这种操作在powershell中不被支持，在cmd中也不被支持，这是Mac中bash或Linux的shell中的独特操作），拆分两条脚本如下：

"build": "set NODE_ENV=production && marko-starter build",

将字母小写转换成大写

全部小写变成大写：
var str = 'acb haha'; str.toUpperCase() //'ABC HAHA'

首字母变成大写：
str.replace(/(\w)/,function(v){return v.toUpperCase()});

每一个变成首个字母变成大写：
function titleCase2(s) {
return s.toLowerCase().replace(/\b([\w|']+)\b/g, function(word) {
return word.replace(word.charAt(0), word.charAt(0).toUpperCase());
});
}
titleCase2(str)) //'Abc Haha'

JS一段搞定日期新历转农历

废话不多讲，上代码：

new Date().toLocaleString('ja-JP-u-ca-chinese')

Vue axios在部分手机的微信浏览器中无法发起请求

axios get或者post均无任何响应，无论then还是catch中也无任何输出，同一个手机的其他浏览器（UC），而且微信调试工具、PC的浏览器、本地环境、chrome模拟微信都行。

我的手机是小米8，同事的安卓也不行，另一个同事的iphone却可以。

百度上一个说是微信浏览器缓存问题，尝试过也没解决。我怀疑是有些ES6代码没转换，导致部分语法不执行？

axios v0.17.1
vue 2.5.2

加了polyfill.js打包上线，刷新不行。清缓存换账号，OK了。不知道后面会不会重现。

echart使用地图geo-lines时注意事项。

引入echart外，还要引入 china.js 地图，否则显示不正常：
http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js

iOS和android时间格式不一样

当我使用两个时间进行对比时，发现诡异的事情，安卓正常，iOS永远是Invalid Date。

  var oDate = new Date('2017-07-18 11:10:58');
  //安卓 Tue Jul 18 2017 11:10:58 GMT+0800 (**标准时间)
 //iOS Invalid Date

百度才发现，iOS格式要斜杆：2017/07/18 11:10:58，安卓都支持。
所以：

var date = '2017-07-18 11:10:58';
var oDate = new Date(date.replace(/\-/g, "/"));

都改成/格式就行啦。

改变Chrome浏览器下的输入框背景色

Chrome浏览器下自动填充的输入框背景会变成黄色，可以用下面CSS声明修成白色：

input:-webkit-autofill {  -webkit-box-shadow: inset 0 0 0 1000px #fff; background-color: transparent; }

Vue router传参数

<router-link  :to="{path:'/busin/detail',query: {id:item.id}}">
详情
</router-link>

uniapp 自定义Tabbar探讨

为什么要用自定义tabbar？原生自带的满足不了吗？

答：是的，基于两点需求，1.显示红点数量样式修改；2.底部弹框被原生tabbar挡住。

尝试过多种方案，也没有达到预期。

1.tabbar组件形式

每个tabbar页面都引用自定义tabbar组件，传当前页面的参数作为选中当前项。
不足：每次切换tabbar页面，组件也重新加载，达不到效果。

2.页面组件形式

tabbar页面全部作为组件形式，先新建一个index.vue页面，引入自定义tabbar，引入全部tabbar页面组件，为tabbar按钮添加点击事件，判断显示哪个页面组件。

<template>
	<div>
		<page-work v-if="current == 0" />
		<page-maillist v-if="current == 1" />
		<page-order v-if="current == 2" />
		<page-my v-if="current == 3" />
		<sl-tabbar  @tabbarBack="tabbarBack" :current="current" />
	</div>
</template>

<script>
import pageWork from '../../pages/work/index.vue'
import pageMaillist from '../../pages/maillist/index.vue'
import pageOrder from '../../pages/order/index.vue'
import pageMy from '../../pages/my/index.vue'
import slTabbar from '@/components/tabbar/index.vue'
export default {
	components: {
		pageWork,
		pageMaillist,
		pageOrder,
		pageMy,
		slTabbar,
	},
	data() {
		return {
			current: 0
		}
	},
	methods: {
		tabbarBack(i, idx) {
			this.current = idx;
		}
	}

不足：页面的特性已经丧失，页面生命周期不复存在，严重影响原有页面逻辑。

3.按需显示隐藏原生tabbar

使用uni.showTabBar()和uni.hideTabBar()动态显示隐藏原生tabbar，弹框的时候隐藏原生tabbar，并同时显示自定义tabbar，否则反之。
不足，切换时有闪烁效果，不理想。

vue设置全局变量

//config.js

export default {
  install(Vue,options) {
    Vue.prototype.URL = {
          BASE: 'https://www.baidu.com/',
    }
  }
}

//main.js

import config from './config'
Vue.use(config);

调用：

console.log(this.URL.BASE); //https://www.baidu.com/

Vue 后台管理-权限控制

权限分类

这里说的是前端的部分权限控制，分为两类：

路由访问
按钮显示/点击（增删查）

路由访问

后端返回约定好的路由列表，前端在访问路由beforeEach拦截，把路由表addRoutes进去

router.beforeEach((to, from, next) => {
    store.dispatch('GenerateRoutes', { roles }).then(() => {  // 拉取用户权限路由表
           router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
    })
})
...

按钮显示/点击（增删查）

这个用自定义指令directive可以很轻松解决。


import store from '@/store'
let vm = new Vue();

export default{
  inserted(el, binding, vnode) {
    const { value } = binding;
         // vm.$utils.rolefilter是遍历用户权限表的函数，vm.$utils.getStorage是获取用户权限表，value是自定义指令的key
	if(!vm.$utils.rolefilter(vm.$utils.getStorage('navList'), value)){
		el.parentNode && el.parentNode.removeChild(el)
	}
  }
}

如果用户权限表没有的话，就把这个元素删除。

// v-permission传一个和后端约定好的key，我这里是中文
<div v-permission="'设置-行业目录-编辑'" @click="clickEdit">编辑</div>

iOS端滚动不流畅问题

在iOS端内嵌webapp页面出现滚动不流畅问题，就是没有惯性的滚动，一度认为是我的上拉刷新和滚动加载组件造成的。
即使去掉后也同样出现，后来发现，在滚动的元素增加下面这个属性就能解决：

-webkit-overflow-scrolling : touch;

移动前端手机输入法自带emoji表情字符处理

/**
 * 用于把用utf16编码的字符转换成实体字符，以供后台存储
 * @param  {string} str 将要转换的字符串，其中含有utf16字符将被自动检出
 * @return {string}     转换后的字符串，utf16字符将被转换成&#xxxx;形式的实体字符
 */
function utf16toEntities(str) {
    var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
    str = str.replace(patt, function(char){
            var H, L, code;
            if (char.length===2) {
                H = char.charCodeAt(0); // 取出高位
                L = char.charCodeAt(1); // 取出低位
                code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法
                return "&#" + code + ";";
            } else {
                return char;
            }
        });
    return str;
}

wepy开发小程序注意事项

在template使用类似vue的filter功能，在小程序template里无法调用methods里面的函数，无法使用定义的全局函数，例如在onLoad()里可以使用this.isArray()调用函数，在template却无法调用。

只能用wxs，WePY 从1.7.x 版本开始支持 wxs 语法。

mywxs.wxs

module.exports = {
  text: 'This is from wxs',
  filter: function (num) {
    return num.toFixed(2);
  }
};

index.wpy

<template>
  <text>{{m1.text}}</text>
  <text>{{m1.filter(num)}}</text>
</template>

<script>
  import wepy from 'wepy';
// 只能相对路径
  import mywxs from '../wxs/mywxs.wxs';

  export default class Index extends wepy.page {

    data = {
      num: 10
    };

    wxs = {
      m1: mywxs
    }

  };
</script>

git使用

1.合并分支

// 先切换到要合并的分支
$ git checkout [要合并的分支名称]
$ git merge [合并的分支名称]

比如dev-cgd合并到dev，

$ git checkout dev
$ git merge dev-cgd
$ git add -A
$ git commit -m "提交信息"
$ git push

2.本地同步线上分支：

$ git fetch

Windows Flutter安装和运行

Flutter介绍

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

Windows环境要求

Java环境（配置环境变量）；
Android Studio（主要安装模拟器和自带环境）；
Vscode（“宇宙之强”编辑器）；
Git。

Flutter安装

官网安装：https://flutter.dev/docs/get-started/install
or
Github（有点大，可能要多试几次）：$ git clone -b beta https://github.com/flutter/flutter.git

测试

是否安装完成：

$ flutter --help

查看是否需要安装任何依赖项来完成设置：

$ flutter doctor

提示：有报红的一个一个的解决（打×的要解决，!号的可以不用）。

Vscode插件安装

flutter
dart
安装完重启vscode，
在编辑器的左下角的设置点击进入 “命令面板”，在命令面板中点击flutter：new project [项目名称]

启动

在终端命令行里面输入： $ flutter run 等待程序的执行，完成hello world

R 键重新启动
r 键热重载
q 退出
p 显示网格
P 显示帧率
o 切换Android与iOS的预览模式

发送手机验证码

    //验证码倒计时时间
    var countdown = 60;
    var maxtime = 60;                      
    var authCodeEl = '#authCode'   //点击获取验证码元素
    //获取缓存时间
    function getlocalTime(str){
      var getLocal = localStorage.getItem(str);
      console.log(getLocal)
      if(getLocal != maxtime){
        countdown = getLocal;
        invokeSettime(authCodeEl);
      }
    }
    getlocalTime('sendCount');

    //设置验证码倒计时
    function invokeSettime(obj) {
      settime(obj);
      function settime(obj) {
        if (countdown == 0) {
          $(obj).removeClass('btn-disabled');
          $(obj).html("重新验证码");
          countdown = maxtime;
          return;
        } else {
          $(obj).addClass('btn-disabled');
          $(obj).html(countdown + "s 重新发送");
          countdown--;
        }
        setTimeout(function() {
          settime(obj)
          window.localStorage.setItem('sendCount', countdown)
        }, 1000)
      }
    }

    //点击获取验证码
    $(document).on('click', authCodeEl, function() {
     //倒数计时的时候，防止第二次点击导致验证码的错乱情况
      if(countdown == maxtime){
        invokeSettime(authCodeEl);
      }

使用localStorage解决刷新或关闭窗口之后重置倒计时问题。

window.localtion跳转/刷新失效问题

刷新，使用：

window.location.reload();

方法安卓端经常出现无法刷新，请使用

location.replace(location.href);

完美解决。

点击跳转问题：

$(document).on('click', 'button', function(){
      window.location = '/weixin/apps/fortune/lingqian/index.html';
      //要加下面这句
      return false
  })