【uniapp】uView2快速安装与实际场景遇到的问题

286 阅读1分钟

uView2安装

1. 将下载的uview-ui文件夹移动到根目录(只需要根目录文件就好)

2. 文件配置

2.1 pages.json

{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [
            ------
        ]
}

2.2 uni.scss

@import 'uview-ui/theme.scss'; // 引入uview2主题样式

2.3 main.js

// 引入uview2
import uView from 'uview-ui';
Vue.use(uView)

2.4 App.vue

<style lang="scss">
/*引入uview基础样式*/
@import 'uview-ui/index.scss';
</style>

实际开发遇到的问题

1. 官网遗漏

  1. u--textarea 需带着 confirmType='done' ,不然浏览器会报红
<u--textarea v-model="value2" confirmType='done' placeholder="您可以在这里给我们留言"></u--textarea>

2. 打包成微信小程序时,在template中不能使用upx

在template中使用upx,Hbuilder并不会转义成rpx

错误:
<u-album  space='12upx'></u-album>
正确:
<u-album  space='12rpx'></u-album>

3. 跨端兼容

uniapp.dcloud.net.cn/tutorial/pl…

  • Android 和 iOS 平台不支持通过条件编译来区分,如果需要区分 Android、iOS 平台,请通过调用 uni.getSystemInfo 来获取平台信息。支持ifiosifAndroid代码块,可方便编写判断。

u-button的@click时间不能使用.stop

包一层view即可,点击事件不要写在按钮上

<view @click.stop="openReceivePopup($event,item)">
        <u-button  type="primary">去收货</u-button>
</view>