Uniapp on pit

For the first time: here are some of the bugs that I have encountered in multi-side development using the UniApp framework, or some that I personally feel have a high error rate, so make a note of them to avoid wasting time again.

  1. The iconfont and CSS files are imported from main.js, but the custom global.css is introduced in app.vue.
  2. Creating a component is sometimes registered in the packge.json file, and changing the location of the component will result in an error, requiring the configuration information to be deleted.
  3. Swiper When using swiper-item, you need to set the height of the swiper-item. You can also set the height of the swiper-item without telling the height of the swiper-item. Rounded corners are only half effective because the image is not long enough.
  4. Swiper disables user swiping. Register custom events and return false.
  5. Icon After setting the background image, set background-size: cover to avoid not displaying the image because it is not centered.
  6. Uniapp has some pseudo-classes that do not work in applets, but h5 does, such as descendant selectors.
  7. Applet authorization login must clear the cache before popup.
  8. Add/to the front of path route redirect path: /pages/index/index
  9. Picker component. National regional call:
<view class="address d-flex"> <label> </label> <view class="uni-list"> <view class="uni-list-cell"> <view class="uni-list-cell-db"> <picker @change="bindMultiPickerColumnChange" :value="aindex" mode = region> <view class="uni-input"> {{aindex[0]}},{{aindex[1]}},{{aindex[2]}}</view> </picker> </view> </view> </view> </view> // The value of aindex is a subscript array: [0,0,0]; bindMultiPickerColumnChange: Function (e) {console.log(' + e.daily. column + ') {console.log(' + e.daily. column + ') ' + e.detail.value) this.multiIndex[e.detail.column] = e.detail.value }Copy the code
  1. Uniapp applet dropdown refresh: the onPullDownRefresh() method only puts the calling function, not the request code in the callback.
  2. Parser Rich text requests content using: HTML =”article”
  3. When the small program is not online, web_view cannot be opened, and the external link can be redirected to a new page by passing in the URL address.
  4. The applet opens the PDF file and passes Filepath through the downloadFile method and then the openDocument method.
  5. You need to carry form_code to share and forward small programs, which is convenient for invite sharing.
  6. Remember to handle thumbnails, set the length of the horizontal image to full, and set the height of the vertical image to full. Fixed telling cannot be set for the round broadcast graph, otherwise the display will be incomplete
  7. Wechat pull album to select pictures
  8. Uniapp applets v-show does not take effect, use dynamic class or V-if resolve.
  9. Url =” /pages/admin/business? id=’ + item.id”,
  10. SCSS is imported globally, using import in the outermost uni. SCSS
  11. You can pass onclick($event,index) inside the function to get the built-in data or embed the subscript.
  12. Use v-if to render local image without SRC value, otherwise error;
  13. Number-box, which becomes a string when changing the value, causes price calculation errors.
  14. Select_info has a deep copy problem when passing product specifications to shopping cart.
  15. Page to share a circle of friends need to add a circle of friends configuration code
  16. Dynamic class, can be passed an array, separately for each value to judge.
  17. Page compilation needs to use the value of vuex, create a calculated attribute to get, and then watch in onshow to judge if true only request.
  18. Requests have to be throttled, especially payments, submitting forms.
  19. Share homepage, share moments, user ID need to read cache, can not get through this.
  20. Function controls the height of the page, which may trigger a pull-down refresh component that sends two requests at the same time so that the data is repeated.
  21. Uni. SetNavigationBarTitle ({title: ‘the new title}); Change the page title,

Pages. json:”navigationStyle”: “custom”, set clear style 31.uni.getSystemInfoSync (). Platform 32. Countdown: enter the page circulator to obtain the current timestamp, pass the end time of the goods with the calculation attribute, calculate the time difference, and convert the minutosecond system to the millisecond time. < 40K can be used directly, larger than 40K require introduction. Function classes need a “[] “;

<view :class="[status_color(item.status)]">{{ item.status | status_text }}</view>
Copy the code

End