uni-App представляет иконочный шрифт

внешний интерфейс Ресурсы изображений Icon Vue.js

что такое уни-приложение

  • uni-app является ссылкойVue.js,Апплеты,mpVueFront-end фреймворк для разработки кроссплатформенных приложений.
  • Написав набор кода, он компилируется для нескольких платформ, таких как iOS, Android, апплет WeChat и т. д.
  • В настоящее время его можно упаковать в Android, приложение IOS, апплет.
  • Есть серьезная проблема в том, что пользовательская база мала, и проблему в основном приходится исследовать самому. Ключ в том, что легко потерять много времени. Будьте осторожны. Если это не обязательно для компании использовать это, я слишком ленив, чтобы войти в яму.

Онлайн-уроков очень мало, и даже простое введение векторной графики шрифта иконок представляет собой проблему, выражающую беспомощность.

TIPS

Платформа определяет стиль файла App.vue как глобальный стиль, а другие страницы — как стиль области.

Найти пример приложения. Вью в официальной документации

	/* icon图标 */
	@font-face {
	  font-family: iconfont;
	  font-weight: normal;
	  font-style: normal;
	  src: url('https://at.alicdn.com/t/font_874003_9rw87a8y04t.ttf')
	    format('truetype');
	}
	.icon {
	  font-size: 56px;
	  color: #fff;
	  font-family: iconfont;
	}
	//其他页面引用
	<text class="icon">&#xe6df;</text>

Примечание: src представляет ссылку Unicode для Alibaba.

image.png
Сначала я подумал, что тег слота Vue не может быть распознан&#xe6df;Строка кода

Представьте, что вы пишете глобальный компонент верхней панели вкладок.

ранее в вуе

<header>
      <view class="header-left">
         <slot name='headerLeft'>
      </view>
      <view class="header-content">
        {{title}}
      </view>
      <view class="header-left">
         <slot name='headerRight'>
      </view>
</header>

Другие компоненты импортируют этот общий компонент

<headerTop :title="包河消防">   //发现uni也不支持直接绑定数据，只有数字可以
       <text class="icon" slot="headerLeft">&#xe601;</text>
       <text class="icon" slot="headerRight">&#xe601;</text>
</headerTop>
解决方法：
    data(){
        return{
            msg:'包河消防'  // 竟然要这样，也是无语了
        }
    }

Какая прекрасная вещь. После решения верхней панели вы также можете написать общий метод, чтобы вернуться на предыдущую страницу и перейти к другим страницам. Он не только пропускает слишком много кодов и методов, но и ключ легко понять и прост в использовании.

После некоторого метания Получить глобальный общий возврат на предыдущую страницу, перейти к методу страницы в файле main.js

// 跳转到其他页面
Vue.prototype.ways=function(url){
	uni.navigateTo({
		url: url
	})
}
// 返回上个页面
Vue.prototype.backs=function(){
	uni.navigateBack({
		delta: 1
	})
}

Это было закончено здесь.Сегодня я попытался представить тип FontClass от Alibaba, наконец, удалось.

Font Class

Каждый раз, когда вы добавляете новую иконку, ссылка будет обновляться.Вам нужно скопировать код в ссылку, затем скопировать его в новый созданный icon.css и добавить его в скопированный код.https:, эй, я делал это раньше, почему это не сработало, когда пришло время сдаться, это было успешно, ну ты потрясающий

@font-face {font-family: "iconfont";
  src: url('https://at.alicdn.com/t/font.eot?t=1540274617069'); /* IE9*/
  src: url('https://at.alicdn.com/t8y0t=15402format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-JMJM=') format('woff'),
  url('https://at.alicdn.ct.ttf?t=1540274617069') format('truetype'),
 /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('https://at.alicdn.com/t/fonfont') format('svg'); /* iOS 4.1- */
}

Эти функции в vue еще не реализованы

fake

Категории