Uni-app development tips and considerations

1. Gets path parameters, similar to applets, that accept parameters in onLoad. No Query and param in Vue

   / / path/pages/index/index? a=1&b=2onLoad(config) {
       const { a, b } = config
   }
   Copy the code

2. Vuex is built into UNI-App, but vuE-Router is not supported

3. Easycom (automatically import components and on demand)

   Components installed from the plug-in market default to Easycom, custom components can be re matched

   "easycom": {
     "^u-(.*)": "@/uview-ui/components/u-The $1/u-The $1.vue".  "comp": "@/pages/index/comp"
   }
   Copy the code

4. Life cycle (the following is full support). In principle, pages should use the life cycle of pages, and components should use the life cycle of components

   • Application life cycle, which can only be listened on in app.vue

     The function name	instructions
     onLaunch	Triggered when uni-app initialization is complete (globally only triggered once)
     onShow	When uni-app is started, or from the background into the foreground display
     onHide	When UNI-app goes from the foreground to the background
     onUniNViewMessage	For details about how to listen data sent from nvUE to VUE, see NvUE Communication to VUE

   • Page life cycle

     The function name	instructions
     onLoad	Listen to the page load with the data passed from the previous page and the parameter type Object (for page passing)
     onShow	Listen to the page display. Fires every time the page appears on the screen, including returning from sub-page points to reveal the current page
     onReady	The listener page is rendered for the first time. Note that if the rendering is fast, it will trigger before the page is animated
     onHide	Listening page hiding
     onUnload	Listening page uninstallation
     onPullDownRefresh	Monitor the user’s pull-down actions, generally used for pull-down refresh
     onReachBottom	The event of a page being rolled to the bottom (not to the bottom of the scroll view), often used to pull up data to the next page. If there is no scrolling at the page level due to the use of scroll view, the event of bottoming will not be triggered
     onPageScroll	Listen for page scrolling with Object

   • Vue component life cycle

   Pages also have a component life cycle, but components do not have a page life cycle

   Onload does not have direct access to the DOM during the page life cycle, onReady does

// There is both a page life cycle and a component life cycle in a page    created() {
      console.log('create')
    },
    onLoad() {
 console.log('load')  },  beforeMount() {  console.log('beforemount')  },  beforeCreate() {  console.log('beforecreate')  },  onReady() {  console.log('ready')  },  mounted() { console.log('mounted')  },  // h5, app sequence // beforecreate -> load -> create -> beforemount -> ready -> mounted  // Order in wechat and Alipay applet // beforecreate -> create -> beforemount -> load -> mounted ->ready Copy the code

OnLoad () {console.log('load')}, OnReady () {console.log(' console.log ')} // component beforeCreate() {console.log('comp-before-create')}, beforeMount() { console.log('comp-before-mount') }, created() { console.log('comp-create') }, mounted() { console.log('comp-mounted') }
// load -> comp-before-create -> comp-create -> comp-before-mount -> comp-mounted -> Ready // order in wechat applet // comp-before-create->; comp-create -> comp-before-mount -> load -> comp-mounted -> readyCopy the code
Copy the code




Conditional compilation
// #ifdef H5 || MP-WEIXIN
H5 and wechat small program platform unique// #endif

// #ifndef APP-PLUS || MP-ALIPAY
Platforms other than APP and Alipay applets are unique// #endif Copy the code
Different files use different comments. Js uses // comments, CSS uses /* comments */, vue templates use
      
Static resources Conditional compilation can also be used in the static directory, as long as the directory name corresponds to the platform name to achieve conditional compilation
Conditional compilation does not distinguish between Android and ios. Use uni.getSystemInfo to distinguish between the two


socped
Scoped is enabled by default on H5, but not on other platforms


v-html
Applets do not support V-HTML


The component named
It is suggested to add prefix to prevent conflicts (u and UNI cannot be used, wX cannot be used in wechat applet)


Component style
Prop that uses class directly on a parent component on a child component and class is not a child component does not apply to alipay applet. When a parent component styles a child component, it needs to use a native component such as a View
<comp class="m"></comp>


For native components, such as view, text set ref, in the small program to undefined, H5, APP normal. Encapsulated components can be used normally.


The position of use: fixed; And bottom: 0; Or top: 0; , h5 end appears as fixed element overlapped with title bar or navigation bar. The reason is that on the H5 side the title and navigation are both components, and the available window sizes include both. You can use uni.getSystemInfo to get system information. WindowTop and windowBottom parameters in H5 and app indicate the top and bottom positions of available Windows. Use conditional compilation to dynamically set the values of top and bottom.


promise
The framework promises to encapsulate parts of the API (such as uni.request), where the callback argument is an array of error messages in the first item and returned data in the second.


If the CSS uses the local image path and font path, use the absolute path starting with ~@ ~@/static/imgs/a.png. Local images or fonts below 40K will be converted to Base64, and those over 40K will need to use network resources.


uview-ui


U-input and U-field in applets do not support vUE modifiers (trim, number, lazy). Property or method $$V “is not defined on the instance but referenced during render”; The component provides the trim attribute.


TypeError: Cannot read property ‘label’ of undefined will be reported if the Alipay applyte uses the U-cell-item component and does not use the label attribute. Line 28 of u-cell-item source code.


version
HBuilderX v2.9.3 uview – UI v1.7.7
This article is formatted using MDNICE