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