uniapp问题总结

发布日期: 2022-04-30

文章字数: 1.1k

阅读时长: 5 分

阅读次数:

uniapp问题总结

引入u-view

1. 安装：

   选择HBuilderX -----> 工具 -----> 插件市场 -----> 

   搜索u-view UI, 选择用HBuilderX安装。

   安装完之后将uni-modules里的u-view拖出来，放入项目根目录。

   虽然引入ui有很多种方式，但还是推荐这种引入方式。

2. 配置

 // 1. main.js
  import App from './App'
  import uView from "uview-ui";
  Vue.use(uView);
  
  /*
  *
  * 2. uni.scss  引入uView的全局SCSS主题文件 
  *
  *  在项目根目录的uni.scss中引入此文件。
  */

  @import 'uview-ui/theme.scss';


  // 3. 引入uView基础样式

  <style lang="scss">
      
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
  </style>

  // 4. 配置easycom组件模式

  // pages.json

  // uni-app为了调试性能的原因，修改easycom规则不会实时生效，

  // 配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。

  //请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

  {
    "easycom": {
      
      // 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
            // 下载安装方式 (1)
      "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
      
      // npm方式下载的引用 (2)
            //"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },

    // 此为本身已有的内容
    "pages": [
      // ......
    ]
  }

 /* 注意点： 
 *
 * 第二种引入方式 为npm下载方式的引用，但是微信开发者工具并没有npm构建，
 *
 * 找不到 u-button 所以就会出现 ...之类的报错，
 *
 * 解决方法就是给路径前加@/,
 * 
 * 采用下载安装方式。
 * 
 * 遂解！
 */

参考资料： 
   
   // u-view在微信开发者平台报错解决

   https://blog.csdn.net/weixin_46231579/article/details/120913279

   // u-view引入配置
   
   https://www.csdn.net/tags/MtTaEg0sMTEzODQyLWJsb2cO0O0O.html

引入多个组件与动态组件配合使用

        <view class="category-content">
            <view class="category-left">
                <view v-for="(item,index) in tabPane" :key='item.key' 
                        class='tab-panes' @click='changeTabpane(item, index)' 
                        :class="{'chooseIndex': item.key === chooseIndex}">
                      {{item.text}}
                </view>
            </view>
            <view class="category-right">
                <component :is='changePriview' class="changeComponent">
                  </component>
            </view>
        </view>
  
     export default {
<script lang="js">
    import {
        TAB_PANE
    } from './constants.js';
    import RenderContent from './renderContent/renderContent.vue'
    const path = require('path');
    const files = require.context('./categoryCommon', false, /.vue$/);
    const modules = {};
    files.keys().forEach(key => {
        const name = path.basename(key, '.vue');
        modules[name] = files(key).default || files(key);
    });

    export default {
        components: {
            ...modules,
        },
        data() {
            return {
                tabPane: TAB_PANE,
                chooseIndex: 'HomePriview',
                changeCom: modules
            }
        },
        methods: {
            changeTabpane(val, index) {
                this.chooseIndex = val.key;
            }
        },
         computed: {
       changePriview() {
          return this.changeCom[this.chooseIndex];
       }
   }
    }
</script>

// 打包时uniapp提示不支持动态组件，

// 如何能像动态组件一样有相同的效果？

// render 、jsx

// 新建一个组件，它将起到像 component 那样的中转作用

// renderContent.vue
<script>
    export default {
        props: {
            changeCom: {
                type: Object,
                default: () => {}
            },
            chooseIndex: {
                type: String,
                default: () => 'HomePriview'
            }
        },
        data() {
            return {
                name: '天启帝君'
            }
        },
        methods: {
            autoChange() {
                this.name = '瀚宇星皇'
            }
        },
        computed: {
            getNums() {
                return 1 + 1;
            }
        },

        render() {
            // Vue render函数内部可以访问整个实例上(整个export default {}内部)的变量
      
      // (data上的)和方法(methods上的)
      
            this.autoChange();
            console.log('this.name', this.name,'this.getNums', this.getNums); 
      
      // 在render中，计算属性中的方法同样不用加 () 直接可以获得值，
      
            // 计算属性能用，watch在render函数中也可以良好使用
      
            let Renderview = this.changeCom[this.chooseIndex];
            return <view >
                <Renderview / >
            </view>
        }
    
    // 第二种render render(h) h 是一个渲染函数，会返回一个虚拟dom

        render(createElement) {
            // Vue render函数内部可以访问整个实例上(整个export default {}内部)的变量*
      
      // (data上的)和方法(methods上的)
      
            this.autoChange();
      
      // 计算属性中的方法不用加() 直接可以获得值，
      
            console.log('this.name', this.name, 'this.getNums', this.getNums); 
      
            // console.log('this.changeCom', this.changeCom, 'chooseIndex', this.chooseIndex)
      
            // 计算属性能用，watch在render函数中也可以良好使用
      
            let renderview = this.changeCom[this.chooseIndex];
      
            return createElement(renderview)
      
        },
   
     // 然而这两种方式在小程序中都不支持，
     
     // 第一种 return 一个元素的方式 (</>)，uniapp打包时就会报错，

     // 第二种 因为没有模板，在小程序无法生成wxml, home 找不到 renderContent.wxml ，
      
     // 就会报错无法展示。
      
     // 目前没有很好的解决办法
    }
</script>

<style>

</style>

// 父组件改造

<template>
    <view class="category">
        <view class="top-title">
            <view class="title-left">
                总览
            </view>
            <view class="title-right">
                列表
            </view>
        </view>
        <view class="category-content">
            <view class="category-left">
                <view v-for="(item,index) in tabPane" :key='item.key' 
          class='tab-panes' @click='changeTabpane(item, index)' 
          :class="{'chooseIndex': item.key === chooseIndex}">
                    {{item.text}}
                </view>
            </view>
            <view class="category-right">
                <RenderContent :changeCom='changeCom' :chooseIndex='chooseIndex' />
            </view>
        </view>
    </view>
</template>

<script lang="js">
    import {
        TAB_PANE
    } from './constants.js';
    import RenderContent from './renderContent/renderContent.vue'
    const path = require('path');
    const files = require.context('./categoryCommon', false, /.vue$/);
    const modules = {};
    files.keys().forEach(key => {
        const name = path.basename(key, '.vue');
        modules[name] = files(key).default || files(key);
    });
    console.log('modules', modules)
    export default {
        components: {
            ...modules,
            RenderContent
        },
        data() {
            return {
                tabPane: TAB_PANE,
                chooseIndex: 'HomePriview',
                changeCom: modules
            }
        },
        methods: {
            changeTabpane(val, index) {
                this.chooseIndex = val.key;
            }
        },
    }
</script>

// constants.js 

export const TAB_PANE = [{
        text: '全部',
        key: 'HomePriview'
    },
 ...
 ..
]