目录
1、图片预览wx.previewImage(Object object) | 微信开放文档
1、css 关于一键置灰效果 filter: grayscale(100%)
3、mac版本连接服务器工具(免费)ZenTermLite(App Store搜索下载)
4、移动端适配,第三方插件(postcss-pxtorem)
js系列:
1、js下载图片功能
onDownload(imgur){
var name = `${new Date().getTime()}.jpg`;
let a = document.createElement("a");
a.style.display = "none";
a.download = name;
a.href = imgur;//图片地址
document.body.appendChild(a);
a.click();
a.parentNode.removeChild(a)
}
2、base64加密
npm install --save js-base64
import {Base64} from 'js-base64';
let a=Base64.encode('哈哈')
console.log(a)
3、获取外网IP地址,动态创建script标签
//把这段加入到script里面去
src:'http://pv.sohu.com/cityjson?ie=utf-8'
let a=returnCitySN['cip']
console.log(a)
//或者动态创建标签
let url='http://pv.sohu.com/cityjson?ie=utf-8'
loadScript (url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.onload = () => resolve()
script.onerror = () => reject(new Error(`Load script from ${url} failed`))
script.src = url
const head =
document.head || document.getElementsByTagName('head')[0]
;(document.body || head).appendChild(script)
})
}
let a=returnCitySN['cip']
console.log(a)
注意:有静态页面的就直接放静态的script标签
或使用:(接口形式获取地址,碎碎念:这个比搜狐的好使,最近真的搜狐太不稳定了)
getApi(){
return axios.get('https://api.ipify.org/');
}
4、非空正则式
/\S/
5、js阿拉伯数字转大写,大写转数字
阿拉伯数字转中文数字
//阿拉伯数字转中文数字
noToChinese:function (num) {
if (!/^\d*(\.\d*)?$/.test(num)) {
return "Number is wrong!";
}
var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九");
var BB = new Array("", "十", "百", "千", "万", "亿", "点", "");
var a = ("" + num).replace(/(^0*)/g, "").split("."),
k = 0,
re = "";
for (var i = a[0].length - 1; i >= 0; i--) {
switch (k) {
case 0:
re = BB[7] + re;
break;
case 4:
if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0]))
re = BB[4] + re;
break;
case 8:
re = BB[5] + re;
BB[7] = BB[5];
k = 0;
break;
}
if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0) re = AA[0] + re;
if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re;
k++;
}
// if (a.length > 1) //加上小数部分(如果有小数部分)
// {
// re += BB[6];
// for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)];
// }
return re;
}
大写转数字
ChineseToNumber:function(chnStr){
var chnNumChar = {
零:0,
一:1,
二:2,
三:3,
四:4,
五:5,
六:6,
七:7,
八:8,
九:9
};
var chnNameValue = {
十:{value:10, secUnit:false},
百:{value:100, secUnit:false},
千:{value:1000, secUnit:false},
万:{value:10000, secUnit:true},
亿:{value:100000000, secUnit:true}
}
var rtn = 0;
var section = 0;
var number = 0;
var secUnit = false;
var str = chnStr.split('');
for(var i = 0; i < str.length; i++){
var num = chnNumChar[str[i]];
if(typeof num !== 'undefined'){
number = num;
if(i === str.length - 1){
section += number;
}
}else{
var unit = chnNameValue[str[i]].value;
secUnit = chnNameValue[str[i]].secUnit;
if(secUnit){
section = (section + number) * unit;
rtn += section;
section = 0;
}else{
section += (number * unit);
}
number = 0;
}
}
return rtn + section;
}
6、js获取地址栏参数
let location = window.location.href;
var a1=location.length;
var a2=location.indexOf('=')
if(a2!=-1){//默认获取=后面的字段,如果只有一个参数可以直接使用
let str=location.slice(a2+1,a1)
console.log(str)
//如果还有其他参数的话
let aa=str.split('&')
let bb=aa[1].split('=')
console.log(aa,'----55---',bb)
}
小程序
1、图片预览wx.previewImage(Object object) | 微信开放文档
<image src="{
{item}}" mode="scaleToFill" bindtap="onimgShow" data-index="{
{index}}"></image>
data: {
imglist:[],
},
onimgShow(e){
let index=e.currentTarget.dataset.index;
wx.previewImage({
current:this.data.imglist[index],// 当前显示图片的 http 链接
urls:this.data.imglist// 需要预览的图片 http 链接列表
})
}
2、小程序阻止冒泡
<view class="flex flex_align_center" bindtap="bindUploadBut">
<text wx:if="{
{!fullFilePath}}" class="{
{footIndex==2?'activeUpload':''}}">去上传</text>
<image wx:if="{
{fullFilePath}}" mode="aspectFill" src="{
{fullFilePath}}" class="scaleImg" catchtap="onimgShow" data-image="{
{fullFilePath}}"></image>
<view class="iconfont icon-youjiantou"></view>
</view>
事件说明:
bindtap 和 catchtap 都属于点击事件,绑定之后,点击组件是可以触发这个函数的。
bindtap :子元素使用bindtap绑定事件后,执行的时候,会冒泡到父元素(触发父元素上绑定的bingtap事件)
catchtap :不会冒泡到父元素上,阻止事件冒泡
3、小程序上传图片
let that=this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'],//选择的形式(相册)
success (res) {
// tempFilePath可以作为 img 标签的 src 属性显示图片
let query = {}
let hostUrl = app.$api.hostUrl()
wx.uploadFile({
url: `${hostUrl}/file/upload`, // 上传的服务器接口地址
filePath: res.tempFilePaths[0],
name: 'mFiles', //上传的所需字段,后端提供(看后台定义的啥)
header: {
'X-TOKEN': token//需要token就传
},
formData: query,
success: (ress) => {
console.log(ress)
},
fail: (err) => {
wx.showToast({
title: '上传失败',
icon: 'none',
duration: 3000
})
}
});
}
})
css系列
1、css 关于一键置灰效果 filter: grayscale(100%)
.grey{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
其他综合系列
1、终端连接阿里云命令记录
终端连接。 ssh root@ip地址
2、mac版本的FTP连接工具(FileZilla)
Download FileZilla Client for macOS
3、mac版本连接服务器工具(免费)ZenTermLite(App Store搜索下载)
3.1查看所有文件命令 ls , ls -a查看所有没有隐藏文件
3.2上传文件命令 rz -r(仅上传) rz -y (可替换同名文件)
3.3删除 rm -rf 文件名称
3.4解压压缩命令 unzip 文件名称
4、移动端适配,第三方插件(postcss-pxtorem)
npm install postcss-pxtorem -D
注:
-S是save的简写
-D是save-dev的简写
- 在package.json文件里面体现出来的区别就是,使用–save-dev安装的插件,被写入到devDependencies对象里面去,而使用–save安装的插件,则被写入到dependencies对象里面去。
区别(devDependencies与dependencies):
- devDependencies 里的插件只用于开发环境,不用于生产环境
- dependencies是需要发布到生成环境的
与代码无关的小功能技巧:
1、如何彻底删除某个软件
(比如发现内存不够了需要整理出内存要删掉不需要的软件,发现软件删除了,内存并没有释放很多的时候,进行深度删除)
1、快速进入文件夹
在Finder窗口按住Shift+Command+G
2、输入~/资源库/Application Support/你的文件夹名称(软件文件名称),回车
如:~/资源库/Application Support/Steam
3、直接删除软件文件夹