前端笔记

文章目录

前端笔记

web tab选项卡思路

tab与box分开不联动，用传入状态值模拟tab选项卡效果。tab进行切换，box只是切换值。

微信小程序字体加载

https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

微信小程序拨打电话

https://blog.csdn.net/weixin_46923775/article/details/112907269

小程序中的placeholder样式

两者的区别
在项目使用过程中起初我以为两种属性只是区别于形式功能是一样的，但后来发现并不相同。

区别一：placeholder-style可以设置字体颜色，但是placeholder-class不可以。

区别二：如果你的小程序要适配平板，把font-size写在placeholder-style中，你会发现placeholder的字体并没有随屏幕的比例变大。把font-size写在placeholder-class上则是正常比例。

总结
placeholder-style适合设置颜色，placeholder-class适合设置字体。

<input type="text" placeholder="请输入" placeholder-style="color:#000;"></input>

<input type="text" placeholder="请输入" placeholder-class="placeholderStyle"></input>
.placeholderStyle{
  //样式
}

svg的动态实现

https://blog.csdn.net/brokenkay/article/details/106267159

svg Storke的属性

https://www.runoob.com/svg/svg-stroke.html

js判断null、undefined与NaN的方法

判断undefined:
```
var tmp = undefined; 
if (typeof(tmp) == "undefined"){ 
	alert("undefined"); 
}
```
说明：typeof返回的是字符串，有六种可能：“number”、“string”、“boolean”、“object”、“function”、“undefined”

判断null

var tmp = null; 
if (!tmp && typeof(tmp)!="undefined" && tmp!=0){ 
	alert("null"); 
}

判断NaN
```
var tmp = 0/0; 
if(isNaN(tmp)){ 
	alert("NaN"); 
}
```
说明：如果把 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。

提示：isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。

判断undefined和null

var tmp = undefined; 
if (tmp== undefined) 
{ 
	alert("null or undefined"); 
}
var tmp = undefined; 
if (tmp== null) 
{ 
	alert("null or undefined"); 
}

说明：null==undefined

判断undefined、null与NaN:

var tmp = null; 
if (!tmp) 
{ 
	alert("null or undefined or NaN"); 
}

提示：一般不那么区分就使用这个足够。

JavaScript中保留两位小数

//四舍五入
var num =2.446242342;
num = num.toFixed(2);

通过添加参数来进行传值

数组转JSON

JS对象转JSON

方式：JSON.stringify(obj)

var json = {"name":"iphone","price":666}; //创建对象；
var jsonStr = JSON.stringify(json);       //转为JSON字符串
console.log(jsonStr);

JS数组转JSON

//数组转json串
var arr = [1,2,3, { a : 1 } ];
JSON.stringify( arr );

JS对象数组转JSON

//数组转json串
var arr = [1,2,3, { a : 1 } ];
JSON.stringify( arr );

JSON转JS数组

//json字符串转数组
var jsonStr = '[1,2,3,{"a":1}]';
var jsarr=JSON.parse( jsonStr );
alert(jsarr[0]);

JSON转JS对象

var jsonString = '{"bar":"property","baz":3}';
var jsObject = JSON.parse(jsonString);    //转换为json对象
alert(jsObject.bar);    //取json中的值

js替换字符

//使用函数replace();
//里面分割使用"//"

shijian:function(){
				this.startTime = this.startTime.replace(/-/g,":");
				this.endTime = this.endTime.replace(/-/g,":");
				this.yytime = this.openTime2.replace("[","").replace("]","").replace(/"/g,"");
			},

Js分割字符

<script type="text/javascript">

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
</script>

/*输出
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
*/

前端思路——关于数据传输过来只有数据需要checked的方法

按最大长度来写1个或多个数组。
用大数组数据来循环，并判断获取有几个值。
来比对用来判断。

js小数点

num = num.toFixed(1)

canvas 文字居中

<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">
Your browser does not support the HTML5 canvas tag.
</canvas>
 
<script>
 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
ctx.font = 'bold 18px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('num', 250, 200);
 
</script>
 
</body>
</html>
————————————————
版权声明：本文为CSDN博主「机智的赵先生」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/badmoonc/article/details/86367510

array 与 string 互转

// string 转 array
this.openTime2 = this.list1.openTime.replace("[","").replace("]","").replace(/"/g,"").split(",")
//openTime: "["周一","周二","周三","周四","周五","周六","周日"]“
// openTime2:["周一", "周二", "周三", "周四", "周五", "周六", "周日"]

//array 转 string
toString()
toLocaleString()

数组去除为空

let a = [1, 2, 3, null,undefined, 4];
a = a.filter(item=>item);

回到顶部

https://blog.csdn.net/sxs1995/article/details/80091924

微信小程序onLoad、onShow、onHide、onUnload区别

onLoad：页面第一次加载时触发，从跳转页面返回时不能触发，可以传递参数

onShow：页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数

onHide：页面隐藏，例如使用 wx.navigateTo 只是打开新页面并不关闭原页面

onUnload：页面被卸载，例如使用 wx.redirectTo 重定向一个页面原页面已经关闭

当初始化或打开一个新页面时先执行onLoad，然后执行onShow

但是对于Tab页面，又是不一样的

从A第一次请求到B 是onHide然后是onLoad、onShow

第二次请求则不执行onLoad，因为B页面已经被缓存了，所以当你想看到新页面时只能使用onShow来刷新

更加详情请参考微信小程序路由方式或者微信页面方法汇总（都是微信官方文档）

JS 判断一个字符串是否为日期格式

var times = '2020-12-21 20:05:05';
//isNaN(times) 是排除了times是纯数字的情况，如果不考虑这个情况的话，值判断前面的就可以
if(!isNaN(Date.parse(times)) && isNaN(times)){
　　console.log("times是日期格式！")
}

css Sprites精灵的用法

http://www.divcss5.com/rumen/r767.shtml

vue 数据添加分为三种方法：

unshift()
push()
splice()

微信小程序分享朋友/朋友圈

wx.showShareMenu({
    menus: ['shareAppMessagewx', 'shareTimeline'],
    withShareTicket:true
});
onShareAppMessage: function () {//分享好友
    return {
        title: '',
        imageUrl:'',
        path: '',
    }
},
onShareTimeline: function () {//分享朋友圈
    return {
        title: '',
        imageUrl:'',
        query: '',
    }
},

微信小程序扫码推广思路

生成二维码给参数时，把所有参数保存在数据库里面。
把刚刚生成数据的id传出去（生成二维码中)
前端在扫描二维码后，新用户注册的时候，把id传到服务端
服务端通过id获取参数

微信小程序头部nav改颜色

“navigationBarBackgroundColor”: “#1556D2”,

vue background样式

<input :style="{ 'backgroundImage':'url('+ urlIcon +')' }"/>

微信小程序下拉样式

//再page.json里添加
//1.单个页面样式 
"style" :                                        
{
    "backgroundColor": "#f3f3f3"
}
//2.全部添加
"globalStyle": {
    "backgroundColor": "#f3f3f3"
},

setTimeout 与 src 替换

tcgif:function(){
    $('.mobile-box').css('display','block');
    $('.tcimg').attr('src','/static/shop/images/tc.gif');
    // console.log("222");
    setTimeout(function (){
        console.log("111"); $('.tcimg').attr('src','/static/shop/images/tc.png');
    },1800)
    // console.log("333");
},

微信小程序更改page后，必须重启微信开发者工具

微信小程序生命周期

onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）（app.js）；
onLoad: 页面加载
小程序注册完成后，加载页面，触发onLoad方法。一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数（页面js）。
onShow: 页面显示
页面载入后触发onShow方法，显示页面。每次打开页面都会调用一次（比如当小程序有后台进入到前台运行或重新进入页面时）。
onReady: 首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
onHide: 页面隐藏
当navigateTo、底部tab切换、上传文件选择图片时调用。
onUnload: 页面卸载
当返回上一页wx.navigateBack、wx.relanch、wx.redirectTo时都会被调用(这里的坑有点深)。
基本上可以说执行顺序为onLaunch–onLoad–onShow–onReady–onHide.
虽然说onLaunch在onLoad之前执行，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。