Common Problems and Solutions for Fast Application Development [Continuous Update]

I have been in contact with apps for a while now. I have stepped on the big and small pits and let me live to this day. Prepare to post continuous updates here, record the problems encountered and solutions for the benefit of the public.

css aspect

1. Vertical text does not support

Currently, the official does not support writing-mode. In addition to waiting for the official support of this API, you can also use a hack: set a relatively small width for the element.

2. text-align: center; center invalid

Since the quick app defaults to the flex layout, justify-content: center should be used when centered;

template aspect

1. After using the list component, the entire page cannot be scrolled

The list component needs to add "scrollpage = true". https: //doc.quickapp.cn/widge ...

2. The list component slides back and forth for no reason-sorry, "Quick Application" has stopped running.

Most likely it is caused by a different file structure in your list-item

<list-item>
 <div if={{item.img}}>
   <image src='{{item.img}}'>
 </div>
 <div else>
   <text>{{item.text}}</text>
 </div>
</list-item>

The same type of list-item must have a completely consistent DOM structure . The dom structure of the list-item in the above example will change, and it should be possible to use two different types of list-item.

<list-item type="img" if={{item.img}}>
 <div>
   <image src='{{item.img}}'>
 </div>
</list-item>
<list type="text" else>
 <div>
   <text>{{item.text}}</text>
 </div>
</list-item>

3. Can't I change the style of the HTML fragment inserted by richtext? Sometimes the picture is beyond the edge of the screen

Since there is no official interface to modify the style of richtext, one method that can currently be used is to use regular search to match, and then add the style where needed

4. The list component sometimes fails to render

It took me a lot of time to solve this problem. This is a known bug of Kuai Application.
This problem cannot be rendered when the list is used in the third layer.

<template>
<div>
  <div>
    <list>
    ...
    </list>
  </div>
</div>
</template>

Solution: Change to div, or do not put it on the third layer.

js aspect

1, storage.get set variable in success no response

var a;
storage.get({
  key: 'a',
  success: function (data) {
    a = data;
  }
})
console.log(a) //undefined 

The reason is that storage is asynchronous.

other

1. How to achieve the effect of full screen

Set display in the configuration file manifest.json, "fullScreen": false, to hide the battery status bar of the battery signal; "titleBar": false; to hide the titleBar. This will make it full screen.

2. After the project is upgraded, the background-image becomes a white background

The background-image uses a relative path, and the project handles the relative path a bit bug; temporarily change it to an absolute path.

3. The hap command cannot be found after windows installation

This is probably because the npm installation directory does not have environment variables configured.

npm prefix -g 
// 会打印一个出一个路径，将它添加进系统变量中
// 再次运行
npm install -g hap-toolkit

Reference:
Quick application of mining pits and flex layout to explain
development documents