uniapp知识点记录整理

小程序引入特殊字体

1.下载要引入的ttf字体文件，以rubik-one为例

2.访问网址Online @font-face generator — Transfonter，将字体转为base64格式，具体步骤如图

3.下载后解压，将生成的stylesheet.css改成rubik-one.css引入项目中，

4.App.vue引入css文件

@import "static/font/rubik-one.css"

5.代码使用字体

<view class="rubik">特殊字体123</view>
<style>
.rubik {
	font-family: 'Rubik One';
}
</style>

 展示效果

重点：小程序打包大小有限制，可以使用下面的方法

将字体文件上传到oss，source填写网络地址
wx.loadFontFace({
	global: true,
	family: 'Repair Regular',
	source: 'url("' + resourceUrl + '/font/repair-regular.ttf")',
	success(res) {
		console.log(res)
	},
	fail: function(res) {
		console.log(res)
	},
	complete: function(res) {
		console.log(res)
	}
})

小程序引入阿里巴巴彩色图标

1.下载字体文件，在字体文件夹所在目录执行以下命令

输入命令行：npm install -g iconfont-tools回车

输入命令行：iconfont-tools回车

2.出现几个配置，一路默认回车，打开上面解压的文件夹即可看到生成的目标文件 iconfont-weapp

3.打开目录，找到iconfont-weapp-icon.css，复制到项目中，App.vue中引入css文件

<style lang="scss">
@import "static/font/iconfont-weapp-icon.css";
</style>

 4.代码使用彩色图标

<text class="t-icon t-icon-shenhe"></text>

 展示效果

锁定竖屏，因为横竖屏切换rpx不会自动变换大小

方法1：page.json中添加pageOrientation配置项

"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "uni-app",
	"navigationBarBackgroundColor": "#F8F8F8",
	"backgroundColor": "#F8F8F8",
	//强制竖屏
	"pageOrientation": "portrait"
},

方法2：App.vue中添加js代码

onLaunch: function() {
    //#ifdef APP-PLUS
    plus.screen.lockOrientation('landscape-primary'); // 强制横屏
    plus.screen.lockOrientation('portrait-primary'); // 强制竖屏
    //#endif
}

富文本解析

const formatHtml = content => {
	if (!content) {
		return
	}
	content = content.replace(/\<img/gi,
		'<img style="width:100% !important;height:auto !important;margin:0;display:flex;" ');
	content = content.replace(/style="/gi,
		'style="max-width:100% !important;table-layout:fixed;word-wrap:break-word;word-break:break-word;');
	content = content.replace(/\<table/gi,
		'<table style="table-layout:fixed;word-wrap:break-word;word-break:break-word;" ');
	content = content.replace(/\<td/gi,
		'<td cellspacing="0" cellpadding="0" border="0" style="display:block;vertical-align:top;margin: 0px; padding: 0px; border: 0px;outline-width:0px;"'
	);
	content = content.replace(/width=/gi, 'sss=');
	content = content.replace(/height=/gi, 'sss=');
	content = content.replace(/ \/\>/gi,
		' style="max-width:100% !important;height:auto !important;margin:0;display:block;" \/\>');
	return content;
};