uniapp问题总结
引入u-view
tex
1. 安装：
选择HBuilderX -----> 工具 -----> 插件市场 ----->
搜索u-view UI, 选择用HBuilderX安装。
安装完之后将uni-modules里的u-view拖出来，放入项目根目录。
虽然引入ui有很多种方式，但还是推荐这种引入方式。
js
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
引入多个组件 与 动态组件 配合使用
js
<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>
js
// 打包时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>
js
// 父组件改造
<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'
},
...
..
]
