不积跬步无以至千里004

最新推荐文章于 2022-04-16 10:28:17 发布

寒冰射手杨百亿

最新推荐文章于 2022-04-16 10:28:17 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/ybyshezhang/article/details/109751289

版权

2020.11.17工作笔记

1.sessionStorage

存储在 sessionStorage 里面的数据在页面会话结束时会被清除，页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话，它是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据，

userId: sessionStorage.getItem(‘userId’) //取key为userId值

sessionStorage详细使用方法

秀秀家的新生 2018-11-14 10:33:20  6867  收藏

1.1 说明
sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。


1.2 特点
1) 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)

2) 单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。

3) 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。

4) 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。

5) 存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

可访问 http://dev-test.nemikor.com/web-storage/support-test/ 测试浏览器的存储上限。


1.3 浏览器最小版本支持
支持sessionStorage的浏览器最小版本：IE8、Chrome 5。


1.4 适合场景 
sessionStorage 非常适合SPA(单页应用程序)，可以方便在各业务模块进行传值。


2.1 属性
 readonly int sessionStorage.length ：返回一个整数，表示存储在 sessionStorage 对象中的数据项(键值对)数量。


2.2 方法
方法 string sessionStorage.key(int index) ：返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。

方法 string sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回null。

方法 void sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。

方法 void sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。

方法 void sessionStorage.clear() ：清除 sessionStorage 对象所有的项。


3.1 存储数据

3.1.1 采用setItem()方法存储
1

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

3.1.2 通过属性方式存储　　

sessionStorage['testKey'] = '这是一个测试的value值';

 

3.2.1 通过getItem()方法取值

sessionStorage.getItem('testKey'); // => 返回testKey对应的值


3.2.2 通过属性方式取值

sessionStorage['testKey']; // => 这是一个测试的value值

 

3.3 存储Json对象
sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。


var userEntity = {

    name: 'tom',

    age: 22

};

 

// 存储值：将对象转换为Json字符串

sessionStorage.setItem('user', JSON.stringify(userEntity));

 

// 取值时：把获取到的Json字符串转换回对象

var userJsonStr = sessionStorage.getItem('user');

userEntity = JSON.parse(userJsonStr);

console.log(userEntity.name); // => tom

2.window.navigator.userAgent

可以返回浏览器的内核和版本用来区分设备和浏览器

console.log(window.navigator.userAgent);
在Chrome浏览器中打开，iPhone6/7/8 和iPhoneX 以及ipad所返回的东西 

//Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1

//Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1

//Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1

window.navigator.userAgent.toLowerCase()用来区分设备和浏览器
var sUserAgent = window.navigator.userAgent.toLowerCase();
                            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
                            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
                            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
                            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
                            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
                            var bIsAndroid = sUserAgent.match(/android/i) == "android";
                            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
                            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                                window.location.href = "WapUI/Main.html";
                            }
                            else {
                                window.location.href = "WebUI/Main.html";
 
                            }

如何判断微信内置浏览器，首先需要获取微信内置浏览器的User Agent ，

iPhone 通过微信内置浏览器访问网页时得到 User Agent 是：Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329 MicroMessenger/5.0.1

所以判断是否是微信内置浏览器的关键词是 MicroMessenger

//判断是否是微信内置浏览器
if (/MicroMessenger/.test(window.navigator.userAgent)) {
						this.wxlog();
					} else if (/AlipayClient/.test(window.navigator.userAgent)) {
						this.alilog();
					}

3.location的几种用法

用于获取或设置窗体的URL，并且可以用于解析URL，是BOM中最重要的对象之一

href 返回完整的url search设置或返回从问好开始的url hash 设置或返回从井号开始的url

//获取url参数
parseUrl() {
    // alert(location.href)
    let that = this;
    var ss1 = location.href.indexOf('#');//href 设置或返回完整的 URL。在浏览器的地址栏上怎么显示它就怎么返回
    var ss2 = location.href.indexOf('?');
    var type = location.href.substr(ss1, ss2 - ss1);
    //hash 设置或返回从井号 (#) 开始的 URL（锚）。如果地址里没有“#”，则返回空字符串
    var after = location.hash.split('?') || location.search.split('?')[1];//search 设置或返回从问号 (?) 开始的 URL（查询部分）
    var s = after[1].split('&');
    console.log('parseUrl', s)
    for (var s1 in s) {
        sessionStorage.setItem(s[s1].split('=')[0], s[s1].split('=')[1]);
        localStorage.setItem(s[s1].split('=')[0], s[s1].split('=')[1]);
    }

4.wx的扫码功能实现真机调试功能很好用

  //测试扫码功能
  testSM(){
    wx.scanCode({
      success (res) {
        console.log(res)
      }
    })
  },
  直接唤起扫码界面 可以从手机相册中选择图片

//wx官方文档
  
// 允许从相机和相册扫码
wx.scanCode({
  success (res) {
    console.log(res)
  }
})

// 只允许从相机扫码
wx.scanCode({
  onlyFromCamera: true,
  success (res) {
    console.log(res)
  }
})

5，输入框自动获取焦点

<input type="text" v-model="pay" class="payNum" v-focus/>

//金额输入框自动获取焦点
		directives: {
		  // 注册一个局部的自定义指令 v-focus
		  focus: {
		    // 指令的定义
		    inserted: function (el) {
		      // 聚焦元素
		      el.querySelector('input').focus()
		    }
		  }
		},
            
//改变placeholder的颜色 整了快一下午 终于出来了 

.uni-input-placeholder{
			color: #09BB07;
		}

6，草料二维码网站可以直接把网址生成为二维码，通过微信扫一扫可以直接访问该网址

7，vue-canvas-poster的使用

这就相当于把一张图片转成base64二维码来用

1. npm 安装

npm i vue-canvas-poster --save

2.引用组件库

方法一：main.js 中全局注册

import Vue from 'vue'
// 导入组件库
import VueCanvasPoster from 'vue-canvas-poster'
// 注册组件库
Vue.use(VueCanvasPoster)

方法二：在页面里引入

<script>
    import { VueCanvasPoster } from 'vue-canvas-poster'
    export default {
        components: {
            VueCanvasPoster,
        },
    }
</script>

3.使用组件

	<div>
      <vue-canvas-poster
        :widthPixels="1000"
        :painting="painting"
        @success="success"
        @fail="fail"
      >
      </vue-canvas-poster>
      <img :src="img" alt="" />
    </div>
    
    import { VueCanvasPoster } from "vue-canvas-poster";
    
    return{
    	painting: {
        width: "550px",
        height: "876px",
        background: "#f4f5f7",
        views: [
          {
            type: "image",
            url: require("@/assets/002.png"),
            css: {
              top: "20px",
              left: "36px",
              borderRadius: "40px",
              width: "80px",
              height: "80px",
            },
          },
          // ....
        ],
      },
      components: {
    	VueCanvasPoster,
  	},
  		methods:{
            success(src) {
          		console.log(src);
          		this.img = src;
        	},
        fail(err) {
          console.log("fail", err);
        },
  	}
   }