美文网首页
uniapp开发随笔

uniapp开发随笔

作者: 新世界的冒险 | 来源:发表于2021-11-28 16:00 被阅读0次

    1.vue3中全局属性

    例:注册全局请求方法

    import { createSSRApp } from 'vue'
    import { myRequest } from './utils/api.js'
    export function createApp() {
      const app = createSSRApp(App)
      **app.config.globalProperties.$myRequest = myRequest;**
      return {
        app
      }
    }
    

    2.引入iconfont字体

    直接引入在小程序中无效
    此处最终采用
    将iconfont.css内容直接拷贝如App.vue的公共css处,且url中加入'~@'
    例:

    @font-face {font-family: "iconfont";  
    
       src:url('~@/static/font/font.ttf') format('truetype');
    
    }
    
    image.png

    3.高度设置

    设置页面高度百分百时发现只设置#app已经为height:100%;
    于是设置uni-page-body 为高度百分百,h5页面可以了,但是小程序不行
    最终解决方案

    //在App.vue文件中添加全局样式
    page{
        height: 100%;
    }
    

    4.背景图

    使用本地图片,小程序中不显示

    background-image: url(../../static/login/login_bg.png);
    

    4.1.可以使用网络图片

    background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx)
    

    4.2.Base64编码格式

    background-image:url(转换之后的base64字符串)
    
    // 以下方法在小程序中报错
    //new Image()小程序中报错,故该方法不可用
    //可以选择图片base转换工具 http://tool.chinaz.com/tools/imgtobase
    function image2Base64(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var dataURL = canvas.toDataURL("image/png");
        return dataURL;
    }
    function getImgBase64(){
        var base64="";
        var img = new Image();
        img.src= "图片地址";
        img.onload=function(){
        base64 = image2Base64(img);
        loginBg64.value = base64
        }
    }
    getImgBase64()
    

    4.3.直接使用image实现效果
    通过image定位的方式实现效果

    相关文章

      网友评论

          本文标题:uniapp开发随笔

          本文链接:https://www.haomeiwen.com/subject/ilthxrtx.html