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

Daily Archives: 2022年8月16日

微信小程序跳转外部链接

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

Copyright © 2024 Longsheng All rights reserved.