まとめ2、js系~css系~その他総合系

目次

jsシリーズ:

1. js画像ダウンロード機能

2.base64暗号化

3. 外部ネットワークのIPアドレスを取得し、スクリプトタグを動的に作成する

4. 空でない正規表現

5. js アラビア数字を大文字に、大文字を数字に

6.jsはアドレスバーパラメータを取得します

アプレット

1. 画像プレビュー wx.previewImage(Object object) | WeChat ドキュメントを開く

2. アプレットは泡立ちを防ぎます

3. 写真をアップロードするミニプログラム 

 cssシリーズ

1. ワンクリックグレー効果フィルターに関するCSS: グレースケール(100%)

その他の総合シリーズ

 1. Alibaba Cloud コマンドレコードへの端末接続

2. Mac版FTP接続ツール(FileZilla)

3. Mac版接続サーバーツール(無料)ZenTermLite(App Store検索・ダウンロード)

 4. モバイル端末対応、サードパーティ製プラグイン(postcss-pxtorem)

コードとは関係のない小さな関数のトリック:

1. 特定のソフトウェアを完全に削除する方法


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里面去
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)

注: 静的ページがある場合は、静的スクリプト タグを直接配置します。

または次を使用します: (アドレスを取得するためのインターフェイス フォーム、Sui Sui Nian: これは Sohu よりも優れています。最近の Sohu は本当に不安定すぎます)

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) | WeChat ドキュメントを開く

 <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>

イベントの説明: 

bindingtap と catchtap はどちらも click イベントに属しており、バインド後、click コンポーネントはこの関数をトリガーできます。

bindingtap   : 子要素が bindingtap を使用してイベントをバインドした後、実行時に親要素にバインドされます (親要素にバインドされた 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: グレースケール(100%)

.grey{
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%); 
}

その他の総合シリーズ

 1. Alibaba Cloud コマンドレコードへの端末接続

端子接続。 ssh  root@ip アドレス 

2. Mac版FTP接続ツール(FileZilla)

macOS 用 FileZilla クライアントをダウンロード

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 は保存の略です

-D は save-dev の略です

  • package.json ファイルに反映される違いは、-save-dev を使用してインストールされたプラグインは devDependency オブジェクトに書き込まれるのに対し、-save を使用してインストールされたプラグインは依存関係オブジェクトに書き込まれることです。

違い (devDependency と依存関係):

  • devDependency のプラグインは開発環境でのみ使用され、運用環境では使用されません。
  • 依存関係を実稼働環境にリリースする必要がある

コードとは関係のない小さな関数のトリック:

1. 特定のソフトウェアを完全に削除する方法

(例えば、メモリが足りない場合はメモリを整理し、不要なソフトウェアを削除する必要があります。ソフトウェアを削除してもメモリが解放されていない場合は、完全削除を実行します)

1. フォルダーに素早く入る

Finder ウィンドウで Shift+Command+G を押したままにします

2. ~/リソース ライブラリ/Application Support/フォルダー名 (ソフトウェア ファイル名) を入力し、Enter キーを押します。

例: ~/リソース ライブラリ/Application Support/Steam

3. ソフトウェアフォルダーを直接削除します

おすすめ

転載: blog.csdn.net/qq_36821274/article/details/127879990