Uni – what is app

  • Uni-app is a front-end framework for developing cross-platform applications using vue.js, miniprograms and mpVue as references.
  • By writing a set of code, it is compiled to iOS, Android, wechat small program and other platforms.
  • Currently can be packaged into Android, IOS App, small program
  • There is a serious problem is that the user group is small, the problem is basically to rely on their own exploration, the key is easy to waste a lot of time, carefully into the pit, if the company does not have to use, I am too lazy to pit

There are few tutorials on the Internet, and even the simple introduction of icon Font vector graphics is a problem

TIPS

The framework defines the app. vue file as a global style and other pages as scoped style

Find the example app.vue in the official documentation

/* icon */ @face {font-size: 10.5pt; 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; } // Other pages refer to <text class="icon"> &#xe6df; 
	
Copy the code

Note: SRC introduces Alibaba Unicode links

&#xe6df;

Imagine writing a globally common top TAB bar component

It used to be vue

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

Other components introduce that generic component

<headerTop :title="Pao River Fire Protection"> uni does not support direct binding of data, only numbers can be <text class="icon" slot="headerLeft"> &#xe601; 
       <text class="icon" slot="headerRight"> &#xe601; </headerTop>data() {return{
            msg:'Pao River Fire Protection'}}Copy the code

Originally is how perfect things, to solve the top bar, but also to write a general method, return to the last page, and jump to other pages, not only omit a lot of code and methods, the key is simple to understand, easy to use

After a toss to get a global general return to the last page, jump page method main.js file

// Go to the other page vue.prototype.ways =function(url){uni.navigateto ({url: url})} // Return the last page vue.prototype.backs =function(){
	uni.navigateBack({
		delta: 1
	})
}
Copy the code

Today, an attempt to introduce alibaba’s FontClass type was finally successful

Font Class

Every time you add a new icon, the link will be updated. You need to copy the code from the link and then copy it into the new icon.css. You also need to add HTTPS: in the copy code

@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- */}Copy the code

The work in vue hasn’t been done yet