uniapp开发随笔

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定位的方式实现效果