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

Category Archives: Frontend

微信小程序跳转外部链接

微信小程序跳转外部链接 在开发小程序过程中，我们可能会有这样的需求，在小程序中打开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

vue埋点 记录页面停留时间

vue记录使用日志 页面停留时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import API from '@/modules/system/api/api_userTime'
const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
})
//   API   保存数据接口
let startTime = Date.now()
let currentTime
let standingTime = 0
let pageName = []
router.beforeEach((to, from, next) => {
    // 如果to存在，则说明路由发生了跳转
    if (to) {
        // 清空界面名
        pageName=[]
        // 离开界面
        // 第一步：页面跳转后记录一下当前的时间 currentTime
        currentTime = Date.now()
        standingTime = parseInt((currentTime - startTime) / 1000)
        from.matched.forEach(routeItem => {
            pageName.push(routeItem.meta.title)
        })  
        // ------------
        // 第二步：在这里把 currentTime - startTime 的 差值 发送给后端
        // ------------
 
        if(pageName.length > 0){
            const params = {
                // 界面
                pageName: pageName.join("-"),
                // 进入界面时间
                gmtCreate: '',
                // gmtCreate: new moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
                // 离开时间
                gmtLeave: '',
                // gmtLeave: new moment(currentTime).format('YYYY-MM-DD HH:mm:ss'),
                /**
                 * 进入或离开状态
                 * enter进入
                 * exit 离开
                 */
                type: 'exit',
                // 停留时长
                // duration: standingTime
            }
            API.add(params).then(function(result) {
                console.log(result)
            }).catch(function(result) {
                // console.log(result)
            })
        }
        // 第三步：每次都要初始化一下 startTime
        startTime = Date.now()
        pageName = []
        // console.log('======== 分割线 ========')
    }
    if(from){
        // 进入界面
        to.matched.forEach(routeItem => {
            pageName.push(routeItem.meta.title)
        })  
        if(pageName.length > 0){
            const param = {
                // 界面
                pageName: pageName.join("-"),
                // 进入界面时间
                gmtCreate: '',
                // gmtCreate: new moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
                // 离开时间
                gmtLeave: '',
                 /**
                 * 进入或离开状态
                 * enter进入
                 * exit 离开
                 */
                type: 'enter'
            }
            console.log(param);
            API.add(param).then(function(result) {
                console.log(result)
            }).catch(function(result) {
                // console.log(result)
            })
        }
    }
    next()
})
export default router

  from:https://blog.csdn.net/Beloved_Jodie/article/details/120924875

龙生   16 Aug 2022
View Details

Vue生命周期解析及相应事件

1
2
3
4
5
6
7
生命周期：
Vue是一个构造函数，当执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
而在这个初始化过程中，Vue又会在不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

首先我们来结合Vue官方提供的图看一下Vue生命周期到底发生了些啥 beforeCreate    data和methods未初始化(loading事件) created（已创建） data、methods初始化完成，如果调用数据或方法最早只能在created中操作 此时拿不到DOM元素 (后台数据请求和耗时操作) beforeMount    vue模板已经在内存中渲染好了，但还没有挂载到页面中，此时页面还是旧的 （render 被初次调用用于生成虚拟dom） mounted（已安装） 页面和内存的数据已经同步， 只要执行完mounted，就表示整个Vue实例已经初始化完毕。 (dom树已渲染到页面，最早可以在mounted中操作DOM) beforeUpdate   页面中显示的数据是旧的，data的数据已经是最新的，页面显示未和数据同步。 （data的数据发生改变会执行这个钩子） update（已更新）  更新DOM完成,页面数据更新 （执行依赖于 DOM 的操作。每次进行数据更新时updated都会执行） beforeDestroy 实例数据还都是可用状态 （确认删除XX吗？） Destroyed    组件已经销毁不可用 （执行一些优化操作,清空定时器。）   from:https://blog.csdn.net/qq_42504266/article/details/121881711

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

vue 一直运行 /sockjs-node/info?t=解决办法

sockjs-node介绍 sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 服务端：sockjs-node（https://github.com/sockjs/sockjs-node） 客户端：sockjs-client（https://github.com/sockjs/sockjs-client） 开发时，如果变更网络环境（如切换wifi导致开发服务器的IP地址更换），服务器不知道如何确定访问源，就有可能造成上述情况 报错解决 方法一：（推荐）在项目根目录找到/package-lock.json文件，修改如下： 方法二： 项目根目录，找到/node_modules/sockjs-client/dist/sockjs.js 找到代码的 1605行，注视掉xhr请求

1
2
3
4
5
6
try {
  //  self.xhr.send(payload); 把这里注掉
} catch (e) {
  self.emit('finish',0,'');
  self.\_cleanup(false);
}

  参考：https://blog.csdn.net/Simon9124/article/details/105581492?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase   from:https://blog.csdn.net/xingchen678/article/details/122429686

龙生   07 Jun 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
1 … 6 7 8 … 60

Copyright © 2025 Longsheng All rights reserved