一切福田，不離方寸，從心而覓，感無不通。

Category Archives: Frontend

npm常用命令

1. 创建一个文件包
2. npm init
3. 创建一个index.js 文件，并写入一些要实现的代码
4. npm install -g
5. npm link
6. npm login
7. npm publish
8. npm publish --registry=https://指定你要推送的包管理库
9. npm version patch // 更新版本
10. npm update gulp //可以把当前目录下node_modules子目录里边的对应模块更新至最新版本
11. npm unpublish npmhswcommonwei@1.0.2 // 可以撤销发布自己发布过的某个版本代码

龙生   18 Aug 2022
View Details

微信小程序跳转外部链接

微信小程序跳转外部链接 在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接 实现方法如下： 1、配置业务域名 小程序管理后台——开发(开发管理)——开发设置：新增业务域名 在这里将你需要的外部链接域名配置完之后，再下载校验文件(校验文件需要放到当前域名的根目录下) 2、不勾选 “不校验合法域名” 开发者工具进行 “不校验合法域名”配置 3、刷新项目配置 4、打开外部链接 以上操作均完成之后，便可以打开外部链接

1
<web-view src="{{src}}"> </web-view>

  情况1：外部链接没有带参数

1
2
3
4
5
6
  //跳转前处理外部链接
   handlePdf(e){
    wx.navigateTo({
      url: '../../outer/outer?src='+e.currentTarget.dataset.url+'&title=合同详情'
    })
  },

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//跳转后获取参数
  data: {
    src:"",
  },
  /**
* 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      src:options.src
    })
    //设置当前标题
    wx.setNavigationBarTitle({
      title: options.title,
    })
  },

  情况2：外部链接带参数 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码 decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

1
2
3
4
5
6
7
  //跳转前处理外部链接
   handlePdf(e){
    let url="https://xxx/#/pdfInfo?url="+e.currentTarget.dataset.url
    wx.navigateTo({
      url: '../../outer/outer?src='+encodeURIComponent(url)+'&title=合同详情'
    })
  },

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  //跳转后获取参数
  data: {
    src:"",
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      src:decodeURIComponent(options.src)
    })
    //设置当前标题
    wx.setNavigationBarTitle({
      title: options.title,
    })
  },

    from:https://blog.csdn.net/weixin_44590591/article/details/124625562

龙生   16 Aug 2022
View Details

JS的实例化方式

模式

1
2
3
4
5
6
7
8
9
10
11
12
13
function obj1(name,age){
    this.name=name;
    this.age=age;
    this.identity=function(){
        var li=document.createElement("p");
        var txt=document.createTextNode("白小纯");
        li.appendChild(txt);
        document.body.appendChild(li);
    }
}
var person2=new obj1('白小纯',123);
person2.identity();
alert(person2.name);

  工厂模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function obj2(){
     var lio=new Object(); //创建对象，对象属性赋值
     lio.name='lio';
     lio.attr='男';
     lio.identity=function(){
         var li=document.createElement("p");
         var txt=document.createTextNode("白小纯");
         li.appendChild(txt);
         document.body.appendChild(li);
     };
     return lio;
}
var person=obj2();
//alert(person.name);

  原型模式

1
2
3
4
5
6
7
8
9
10
11
12
function obj3(){
   //this.name='lio';
}
obj3.prototype.name='lio';
obj3.prototype.identity= function (name) {
    alert("实际上是"+name);
};
var person3=new obj3();
//检测是在实例中还是在原型中
alert(person3.hasOwnProperty("name"));
alert(person3.hasOwnProperty("rename"));
person3.identity('白小纯');

  混合模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function obj4(age) {
    this.age=age;
    this.rename='aaaa';
};
obj4.prototype={
    constructor:obj4,
    name:'lio',
    age:123,
    identity: function (name) {
        alert(name+"实际上是白小纯");
    }
};
var person4=new obj4(18);
alert(person4.hasOwnProperty("age"));//true
person4.identity('lio');

  from:https://blog.csdn.net/Amouzy/article/details/125974435

龙生   16 Aug 2022
View Details

HTTP协议的四种传参方式

1.path info传参 /articles/12 (查询id为12的文章，12是参数)
2.URL Query String传参 /articles?id=12
3.1.Body 传参 Content-Type: multipart/form-data
3.2.Body 传参 Content-Type: application/json，或其他自定义格式
4.Headers 传参 @RequestHeader

龙生   04 Aug 2022
View Details

axios请求时使用 application/x-www-form-urlencoded

axios 会默认序列化 JavaScript 对象为 JSON。 如果想使用 application/x-www-form-urlencoded 格式，你可以使用下面的配置。 在浏览器环境，你可以使用 URLSearchParams API：

1
2
3
4
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

  from:https://blog.csdn.net/init_yanxiao/article/details/113845330

龙生   02 Jun 2022
View Details

使用axios请求，前端数字long类型精度问题解决方法

今天开发遇到个问题，服务器后端的Long类型数据，传到前端会出现精度丢失，如：164379764419858435，前端会变成164379764419858430。

在浏览器中做测试可知，这就是一个精度丢失的问题。

前端使用的axios来发起请求的，最开始以为是浏览器的问题，但是通过postman来请求是没问题，打开浏览器开发工具，在xhr下的response响应中也是没问题的，代表是请求成功后数据格式化出问题了，下面讲解下各种解决方案。

龙生   02 Jun 2022
View Details

Typescript 常用特性小结

一、高级类型
二、操作符
三、运算符
四、类型别名
五、类型断言
七、类型守卫
八、泛型

龙生   31 May 2022
View Details

[ 万字总结 ] 夯实你的 TypeScript 基础

1.环境配置和搭建
2.基础类型
3.类型推导
4.函数类型
5.类
6.接口
7.泛型
8.兼容性
9.类型保护
10.类型推断
11.交叉类型
12.条件类型
13.内置类型
14.装包和拆包
15.自定义类型
16.unknown
17.模块和命名空间
18.类型声明
19.扩展全局变量类型

龙生   31 May 2022
View Details

7 款最棒的开源 React UI 库测评 – 特别针对国内使用场景推荐

Semi Design – 抖音团队力作，虽简洁轻量，可轻松应对复杂场景，抖音内部多项目迭代，品质可靠
TDesign – 腾讯优质 UI 组件，配套工具完满，设计工整，文档清晰
ArcoDesign – 字节跳动 UI 组件库开源，大厂逻辑，设计文档完美
Ant Design React – 阿里前端 UI 库，面向企业级中后台
Material-UI – 全球顶级 React 组件库 Google Material 设计标准
微软 FluentUI – 背靠微软，大型项目首先，代码简洁高效
Element for React – 饿了么出品 Element 的 React 版，适合有使用 Element 习惯的开发者

龙生   30 May 2022
View Details

Musicn 高品质音乐下载命令行工具

软件简介 Musicn 是一个下载高品质音乐的命令行工具。 安装

1
2
3
4
5
6
# 主推荐pnpm
$ pnpm add -g musicn
# or
$ yarn global add musicn
# or
$ npm install musicn -g

  使用

1
2
3
$ musicn 稻香
# or
$ msc 稻香

  附带歌词下载 (默认是不附带):

1
2
3
$ msc 稻香 --lyric
# or
$ msc 稻香 -l

  指定文件夹路径下载 (默认是当前路径):

1
2
3
$ msc 稻香 --path ../music
# or
$ msc 稻香 -p ../music

  资源 音乐来源：咪咕（API 是从公开的网络中获得） 说明 部分歌曲支持无损音乐，支持格式：flac、mp3 优先搜索下载高品质音乐（无损 -> 320K -> 128K） 暂时只支持下载咪咕平台上已有的音乐 在 windows 的 git Bash 中不支持显示下载进度条并且不支持上下切换选歌，问题是 cli-progress 不兼容 node version > 14 from:https://www.oschina.net/p/musicn

龙生   27 May 2022
View Details
1 … 6 7 8 … 58

Copyright © 2025 Longsheng All rights reserved