uni-app项目反思1.获取组件实例 uni-app里非h5页面，在纯vue组件中无法使用this.$refs的方法获

1.获取组件实例

uni-app里非h5页面，在纯vue组件中无法使用this.$refs的方法获取到该组件下带有ref属性的组件实例，解决办法利用this.$children来获取实例，在uni-app页面组件中this.$refs可以获取到当前页面展示的组件中注册过ref的组件

2.自定义的组件样式无法在引用页修改

直接在自定义的组件上加class或者监听事件等是无效的
解决办法是在自己封装的组件上在包裹一层view,注意封装的组件层级高于包裹的view样式会被封装的组件覆盖
活着进入封装的组件内部修改深入源码修改，封装组件的时候尽量封装业务逻辑较少的模块，多看看优秀的插件源码看看他们是如何封装组件的

3.如何在uni-app里跳转H5页面

<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为跳转过来的query
            this.url = decodeURIComponent(options.url + '&token=' +     uni.getStorageSync('uni_user_token'))
            // 设置 navigationBarTitleText
            uni.setNavigationBarTitle({
                title: options.title
            })
            
        },
    }
</script>

然后在page.json里面注册这个页面，相当于这个页面嵌入了H5,此页面相当于作为一个承载H5的容器，别的页面可以直接跳转到此页面，只需要携带h5页面URL/pages/webview/indexurl=www.h5.com

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 官方文档地址

4.生命周期

vue页面只有vue的组件生命周期， uni-app页面只有uni-app的页面生命周期， App.vue入口页面只有uni-app的应用生命周期相比较页面生命周期额外有onLaunch(只会触发一次,app被加载时触发)

5.scss安装问题

由于项目构建时在导入node-scss包时没有--save导致我在npm install安装项目依赖时自动安装了最新版本的node-scss，导致与scss-loader不兼容，所以以后在构建项目npm导入包时记得加--save [-dev]，还有node-scss与电脑里的node版本也要对应,不然也会报错，可以参照下图

最后在项目安装包时npm i尽量使用外部的终端，编辑器内置的终端容易安装失败error: can't binding current node（感觉是因为翻墙的工具对内置的终端无效导致）

6.动态配置不同开发模式的BASE_URL

文档中提供了三种方式，我采用的是第三种创建.env文件配置环境变量,使用方式和vue相同，.eve.[mode]， mode可选development,production,test(没实验过是否支持uni-app), 其中有几个关键词VUE_APP,NODE_MODE(当前模式如'development'),BASE_URL(同vue.config.js里定义的publicpath)
其中VUE_APP_NAME(APP的名称),VUE_APP_PLATFORM(当前运行的环境，如‘mp-weixin’)内置
只有这几个关键词开头的才会被静态嵌入客户端中，也就是这几个开头的变量才能从process.env中获取到

uni-app项目反思