Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use nvue in uniapp". In daily operation, I believe many people have doubts about how to use nvue in uniapp. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to use nvue in uniapp". Next, please follow the editor to study!

Start creating the first nvue page.

Directory structure:

The index.nvue code is as follows:

{{text}} export default {data () {return {text: 'Hello World'}

In this way, a real machine may encounter the following error:

The reason for this problem is that there must be a vue page in the uni-app project, so there will be no problem if you create a new vue page and rerun it.

Image sets border-radius

You cannot set border-radius for image in nvue. To change the rectangular pattern into a circle, you need to wrap a layer of div around the image. The code is as follows:

Set real pixel

In the weex specification, there is only one unit of length: px, and the total screen width is 750px. After setting the length, the weex engine will dynamically calculate the actual length based on the width of the phone's screen, similar to uni-app 's upx.

However, in the actual development process, you may not want such a dynamic unit of length, you can use a unit of length in weex version 1.x: wx. This unit is the actual pixel unit, and although it is not mentioned in the weex documentation, it is still available, and of course wx may no longer support it as weex is updated.

Introduce external css

Common styles written in App.vue do not work in nvue. If multiple nvue want to use common styles, they need to introduce external css.

Due to the limitation of weex, you cannot use @ import "xxx.css" under the style node to introduce external css. Instead, you need to introduce css in the following ways:

.test {color: # E96900;}

It should be noted that writing styles in nodes does not work.

Use ttf Font File

Font files cannot be imported directly in nvue or weex through @ font-face in css. You need to use dom module in js to import font files. Refer to weex documentation:

Const domModule = weex.requireModule ('dom'); domModule.addRule (' fontFace', {'fontFamily': "iconfont2",' src': "url ('http://at.alicdn.com/t/font_1469606063_76593.ttf')"});vue passes parameters when opening nvue

Because vue cannot carry parameters after url when opening nvue, it can only be passed by storage.

Open nvue on the vue page

Uni.setStorageSync ('test',' hello'); uni.navigateTo ({url: "/ pages/nvue/nvue"})

Get the parameters in the nvue page. It takes a period of time to call the api of uni-app in created. (the latest version of the uni-app framework has fixed this problem and can be successfully called without delay).

Export default {created () {console.log ("nvue created!") SetTimeout (() = > {uni.getStorage ({key:'test', success: (res) = > {console.log ("get the data passed on the previous page" + res.data)}})} Imitate the effect of Wechat moments.

In development, there is a page that needs to look like Wechat moments: the overall list is arranged from top to bottom, with two columns left and right, with user profile on the left and message content on the right.

When developing, the first thing that comes to mind is that the parent element uses flex-direction: row; to display the avatar and content on the left and right, respectively. However, there is a problem that the height of the content area cannot be stretched according to the length of the text; if the parent element is arranged up and down, the height of the content area can be stretched by the text.

The code that causes the problem is as follows:

You can support the content when you arrange it up and down, and you can support it when you arrange it up and down. You can't spread the content when arranging left and right. Do not spread the content export default {} .items {background-color: # fff when arranging left and right Margin-bottom: 50px;} .headImg {width: 100px; height: 100px; background-color: # 555;} .rgtBox {background-color: # fff;}

This problem should be the bug of weex. After setting the height of the left element, if the height is not set on the right, the maximum height is the height of the left element. The solution is to arrange the avatar and content up and down, and then set the margin-left, margin-top, and min-height of the content area to achieve a similar effect.

The code is as follows:

A short text. Here is a long text. Here is a long text, here is a long text Here is a long text, here is a long text, here is a long text export default {} .item {background-color: # fff Margin-bottom: 50px;} .headImg {width: 100px; height: 100px; background-color: # 555;} .rgtBox {width: 600px; min-height: 100px; margin-left: 130px; margin-top:-100px; background-color: # fff At this point, the study on "how to use nvue in uniapp" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.