Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.

Introduction to the

Today to introduce uniAPP development small program has what convenient places, at the beginning of the use of UNIAPP before, write small program has been written in wechat developer tools, then with the previous web development h5 development when the page layout is different, the label is not the same, the body element selector please change to page, the same, Div and ul and li are changed to view, span and font are changed to text, A is changed to navigator, img is changed to image… There are a lot less tags, and the layout inside is a little inefficient, for example, you can’t write the shortcut keys after writing view, before writing div>ul> Li *5>a direct shortcut layout, this is a little slow.

Uniapp development small program introduction

1. Uniapp has advantages over other applets or native applets

  1. Uni-app does not need to follow wechat upgrades and is not restricted to using all current or future APIS of WX in conditional compilation
  2. Uni-app performs better than the average person’s handwritten wechat native code. Just like the vUE operation is better than the ordinary people write JS operation DOM performance. The underlying automatic diff difference updates the data, which has higher performance than manual setData. The evaluation data are shown below
  3. Uni-app is a pure VUE syntax, there is no need to learn another DSL. You don’t have to switch between projects
  4. Uni-app has a wide range of components and templates, and thousands of plug-ins are available in the market. The performance of uni-APP plug-ins outperforms wXParse, WX-Echart and other wechat applet components, such as rich text parsing, charts, and custom pull-down refresh
  5. HBuilderX is more powerful and efficient than wechat tools. Even if you use tools like vscode, the development results will be better because these tools support vue more than they do WXML
  6. Wechat native development does not support many functions such as Webpack, precompiled language and engineering process management. Large companies rarely use wechat native development, instead, they use frameworks to improve development efficiency
  7. Uni-app supports two-way data binding and VUEX state management, which is much easier than native development of applets
  8. Sooner or later there will be multiple demands to useuni-appNo further concerns
  9. Uni-app is not only used for cross-terminal applications, but also for H5 applications and apps. For details, see uniapp.dcloud. IO /case. About uni – app and WeChat development detailed comparison evaluation, reference: ask.dcloud.net.cn/article/364…

2. Attention to using vue.js

  • The data property must be declared as a function that returns an initial data object; Otherwise, data is not automatically destroyed when the page is closed. When you open the page again, the last data is displayed
Data () {return {title: 'Hello'}} data: {title: 'Hello'}Copy the code
  • On the wechat applet,uni-appDelegate the data binding functionality toVue, developers need to clickVue 2.0Data binding is not supported for wechat applet data binding, so the following is not supported:
<view id="item-{{id}}"></view>
Copy the code

Change the value to:

<view v-bind:id="'item-' + id "></view>	
Copy the code

3. The Css

  • Although most CSS styles can be supported in wechat mini programs and apps, flex layout model is recommended, which is more flexible and efficient and supports more platforms (e.g. NVUE, Quick application only supports Flex layout).
  • Unitwise, UNI-app defaults to RPX.
  • Reference mode: Use@importStatements can import an external style sheet,@importFollowed by the relative path of the outbound style sheet that you want to import, with;Indicates the end of the statement.

Sample code:

<style> @import ".. /.. /common/uni.css"; .uni-card { box-shadow: none; } </style>Copy the code

4. Reference static resources

  1. Importing static resources into templates

When importing static resources, such as the SRC attribute of the image and video tags, to the template, you can use a relative path or an absolute path in the following format

<! -- absolute path, /static: static directory under the root directory, <image class="logo" SRC ="/static/logo.png"></image> <image class="logo" src="@/static/logo.png"></image> <! <image class="logo" SRC =".. /.. /static/logo.png"></image>Copy the code
  1. The CSS introduces static resources

You can use relative or absolute paths to import CSS files (SCSS or LESS files) in a CSS file or style label

/* absolute path */ @import url('/common/uni.css'); @import url('@/common/uni.css'); /* relative path */ @import url('.. /.. /common/uni.css');Copy the code

The image paths referenced in the CSS file or the style tag can be relative or absolute. Note that some applet side CSS files do not allow references to local files (see precautions).

/* Absolute path */ background-image: url(/static/logo.png); background-image: url(@/static/logo.png); /* Background-image: url(.. /.. /static/logo.png);Copy the code

Tips

  • For the introduction of font ICONS, see font ICONS
  • @The absolute and relative paths at the beginning are verified by base64 conversion rules
  • Platforms that do not support local images, less than 40KB, must be base64. (A total of four platforms mp-Weixin, MP-QQ, MP-Toutiao, APP V2)
  • For H5 platform, base64 will be transferred if the value is smaller than 4KB, and base64 will not be transferred if the value exceeds 4KB.
  • Other platforms will not switch to Base64

Js file import

When importing JS files from within a JS file or script tag (renderJS, etc.), you can use relative and absolute paths as follows

Import add from '@/common/add.js'; import add from '@/common/add.js'; // Relative path import add from '.. /.. /common/add.js';Copy the code

Pay attention to

  • Js files are not supported/The way the beginning is introduced

5. Uniapp font icon reference

How to use font ICONS in UNI projects:

  1. Go to the icon website to download the fonts you need. After downloading the fonts, create a new font under the static directory and put the downloaded file in it. Unzip and copy the relevant files in the folder and put these files in your new fonts.

  2. Then introduce the CSS path to the style in the app.vue file;

@import './static/fonts/iconfont.css'
Copy the code

  1. Modify the import path of iconfont. CSS file. Modify the path of @font-face in the style change, for example, add the path ~@/static/font/ before iconfont in all urls

  2. To use in any page:

<view class="iconfont icon-XXX"></view>
Copy the code

conclusion

This article mainly explains some advantages of uniAPP writing applets, as well as the introduction of uniAPP writing applets with the use of the method, when using the need to pay attention to what problems, how to reference, how to reference external ICONS and so on, thank you for watching ~