1. Obtain the component instance

Uni-app: $this.$refs: $this.$children: $refs: $this.$children: $this. In the uni-app page component this.$refs can get the component registered with ref from the component displayed on the current page

2. Custom component styles cannot be modified on the reference page

  • It is not valid to add classes or listen for events directly to a custom component
  • The solution is to wrap a view layer on top of the wrapped component. Note that views above the wrapped component level will be overwritten by the wrapped component
  • Live into the internal modifications of encapsulated components

Go deep into the source code and try to encapsulate modules with less business logic when wrapping components. Look at the good plug-in source code and see how they encapsulate components

3. How to jump to H5 page in UNI-app

<template>
    <view>
        <web-view class="webView"  :webview-styles="webviewStyles" @message="handleMessage" @onPostMessage="handlePostMessage" :src="url"></web-view>
    </view>
</template>
<script>
    export default {
        onLoad(options) {
            //options is the jump query
            this.url = decodeURIComponent(options.url + '&token=' +     uni.getStorageSync('uni_user_token'))
            / / set navigationBarTitleText
            uni.setNavigationBarTitle({
                title: options.title
            })
            
        },
    }
</script>
Copy the code

Register it and then on the page. The json this page, embedded with the H5 is equivalent to the page, the page is equivalent to a carrying containers of H5, other pages can be directed to this page, only need to carry the H5 page URL/pages/webview/indexurl=www.h5.com

For each applets platform, the URL loaded by web-view needs to be configured in the background with a domain name whitelist, including other urls embedded in iframe

Official Document Address

4. Life cycle

Vue page only has the component life cycle of Vue, uni-app page only has the page life cycle of UNI-App, app. vue entry page only has the application life cycle of UNI-App.

5. SCSS installation is faulty

Since node-SCSS package was imported without –save during project construction, I automatically installed the latest version of Node-SCSS when INSTALLING project dependencies in NPM install, resulting in incompatibility with SCSS-Loader. –save [-dev] –save [-dev] –save [-dev] –save [-dev] –save [-dev] –save [-dev

Finally, when the project installs the packagenpm iTry to use an external terminal, the editor built-in terminal is prone to installation failureerror: can't binding current node(It seems that the wall climbing tool does not work on the built-in terminal)

6. Dynamically configure BASE_URL for different development modes

There are three ways to do this in the documentation. I used the third to create an. Env file to configure environment variables in the same way as vue. Mode optional development, production, test (does not experiment support uni – app), There are a few keywords VUE_APP,NODE_MODE(current mode like ‘development’),BASE_URL(same as publicPath defined in vue.config.js) VUE_APP_NAME(APP name),VUE_APP_PLATFORM(currently running environment, such as’ mp-weixin ‘) will be statically embedded in the client, that is, these start variables can be obtained from process.env

7. The embedded H5 page v-show and V-if appear and do not update the page style with the value change (unknown reason, the next day when opened, probably due to caching)