随身笔记

作者： admin

  • js平台环境判断

    判断 公众号 小程序 公众号 平台 判断

    var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
    //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
    wx.miniProgram.getEnv((res)=>{
        if (res.miniprogram) {
            //alert("在小程序里");
            wx.miniProgram.navigateTo({
                url: '/pages/user/my-order/my-money',
            })
        } else {
            //alert("不在小程序里,但在微信里");
            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx231ea8dfbc266&redirect_uri=http%3a%2f%2fapi.bugming.com%2fv1.0.6%2fwx%2fgzh%2fpay%2flogin%2fmenu&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
        }
    })
}else{
    
    if (ua.match(/QQ/i) == "qq") {
        //alert("qq内置浏览器");
    }else {
        //alert("不是微信浏览器或手机qq浏览器，例如自带浏览器");
    }

}

     

  • 微信公众号canvas另存为图片并下载到本地

    公众号 canvas base64 另存为 图片 本地 下载 保存

    思路是：html2canvas截图canvas的图像保存为base64，base64在专为blob，放到a标签下即可下载保存到本地

    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>


<div id="codepic">
  <canvas></canvas>
</div>

<button onclick="download()">保存图片</button>


window.download=function (){
       new html2canvas(document.getElementById('codepic')).then(canvas => {  //id="codepic"是需要截图的区域
           // canvas为转换后的Canvas对象
           let oImg = new Image();
           oImg.src = canvas.toDataURL();  // 导出图片
           // document.getElementById('tupian').appendChild(oImg);  // 将生成的图片添加到body

           var date = new Date();

           var aLink = document.createElement("a"); // 创建一个a标签
           var blob = base64ToBlob(canvas.toDataURL());
           var event = document.createEvent("HTMLEvents");
           event.initEvent("click", true, true);
           aLink.download = date.getTime() + "." + blob.type.split("/")[1]; // 使用时间戳给文件命名
           aLink.href = URL.createObjectURL(blob);
           aLink.click();


           // base64转Blob对象
           function base64ToBlob(code) {
               var parts = code.split(";base64,");
               var contentType = parts[0].split(":")[1];
               var raw = window.atob(parts[1]);
               var rawLength = raw.length;
               var uint8Array = new Uint8Array(rawLength);
               for (var i = 0; i < rawLength; i++) {
                   uint8Array[i] = raw.charCodeAt(i);
               }
               return new Blob([uint8Array], {type: contentType});
           }


       });
   }

    另存为图片需要点击右上角用本地浏览器访问后才能保存

     

    https://blog.csdn.net/m0_46357847/article/details/124771866

  • element ui v-infinite-scroll初始化加载所有数据问题

    https://element.eleme.cn/2.14/#/zh-CN/component/infiniteScroll

    官网提供的案例有问题，

     

    在组件中加入了element ui 无限滚动。

    复制官网的代码，发现一直加载。

    原因：

    1.ul标签的高度未设定。需设置。

    2.未设置距离多少像素加载在ul标签中加入 infinite-scroll-distance=”10″ //距离10px加载。

     

    <div class="infinite-list-wrapper"  style="overflow:auto;background: red;height: 5rem">

          <div v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scroll-distance="10">
              <div v-for="i in count" class="box goto">
                  <div class="inner">
                      <div class="titstatus" style="">
                          <span>xxxxxxxxx</span>
                          <span>未使用|已使用|已取消</span>
                      </div>

                      <div class="con" style="position: relative">
                          <div class="title">张三|男|183xxxxxxxx</div>
                          <div class="title2">开票内容 个人</div>

                      </div>

                  </div>
              </div>
          </div>

          <p v-if="loading">加载中...</p>
          <p v-if="noMore">没有更多了</p>

</div>

     

    new Vue({
        el:'#app',
        data(){
            return{
                count: 10,
                loading: false
            }
        },
        computed: {
            noMore () {
                return this.count >= 40
            },
            disabled () {
                return this.loading || this.noMore
            }
        },
        mounted(){
            var self = this
            this.getList()


        },
        methods:{
            load () {
                this.loading = true
                setTimeout(() => {
                    this.count += 2
                    this.loading = false
                }, 2000)
            },
          
            getList(){
                // if(!this.formDate.trainStartTime){
                //   delete this.formDate.trainStartTime
                // }
                // this.formDate.userId = userId
                // var datastr={ "timestamp": Date.parse(new Date()),"posts":this.formDate};
                // var url = "/train/selectTrainDetailList";
                // var result = ajaxPostWithoutToken4(url,datastr);
                //
                //
                //
                // this.dataList = result.data
            }
        }
    })

     

     

    https://www.csdn.net/tags/MtTaMg4sOTY2NTQ5LWJsb2cO0O0O.html

     

     

     

     

     

  • node和deno取代工具Bun

    https://bun.sh/

    安装纯Bun环境很多基础组件都需要自己去写，为了快速开发，Bun提供了自己的脚手架，可以快速搭建服务。

     

    bun-cli工具是一个融合了多种实用功能的前端命令行工具，它服务于bunjs框架，却不止于bunjs。

    它主要有以下功能：

    • 帮助使用bunjs框架的用户快速构建代码，一键生成初始项目
    • 一条命令打包部署bunjs的项目
    • 支持热加载，监听改动自动打包重启（仅开发模式下）
    • 封装webpack工具，傻瓜式配置，支持非bunjs项目打包
    • 内置mock服务，本地开发更便捷
    • 内置pm2，帮你更好的监控自己的项目

    https://www.npmjs.com/package/bunjs

  • 群晖外网登录Synology Drive Client

    群晖网盘

    Synology Drive Client的默认端口是6690，

    移动端的Drive的默认端口是5000。

    https://post.smzdm.com/p/awknl75p/