uview最简单的引入使用方法

根据官网的说明,懵懵懂懂的去去搞,搞半天发现特么还是没跑起来,一怒之下,直接新建了个demo,依葫芦画瓢导入文件,填写配置文件,完美导入,亲测有效(注意,引用uview是在uni-app项目下面的),下面看看咋玩的:
首先,确认下你的项目有没有装node-scss,没有的话npm install 一下就好
其次,去官网把整个uview的文件下载下来丢到你的根目录下面去
然后再你的根目录下面创建一个文件,
!](https://img-blog.csdnimg.cn/202011201754355.png#pic_center)
这个里面的内容就是这个,贴一下代码吧还是

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

在这里插入图片描述

然后,把这段代码复制到main.js全局引入

import uView from 'uview-ui';
Vue.use(uView);

再然后再再pages.json里面加一段这样的代码

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

然后就可以正常使用了,如下图
在这里插入图片描述
直接使用,无需重新引入,使用时要注意去看它官方文档里面的数据结构,有些数据结构是特定的,如果数据结构不对,会导致显示不正常

这是正常的下载文件使用uview,npm不熟练,搞半天搞不了,这个简单粗暴

  • 11
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在 uView 框架中,你可以按照以下步骤使用上述方法来处理表单提交: 1. 在你的页面中,使用 uView 的表单组件来创建表单。你可以参考 uView 文档中的表单组件相关内容来构建表单界面。 2. 在你的页面中,添加一个按钮或者其他触发事件的元素,当用户点击该元素时,触发表单提交操作。 3. 在触发表单提交的事件处理函数中,通过 uView 提供的 API 获取表单数据,并将其发送到后端进行处理。以下是一个示例代码: ```vue <template> <view> <u-form> <u-input v-model="name" label="Name"></u-input> <u-input v-model="email" label="Email"></u-input> <u-button @click="submitForm">Submit</u-button> </u-form> </view> </template> <script> export default { data() { return { name: '', email: '' }; }, methods: { submitForm() { // 使用 uView 提供的 API 获取表单数据 const formData = { name: this.name, email: this.email }; // 使用 uni.request() 方法发送表单数据到后端进行处理 uni.request({ url: '/submit', method: 'POST', data: formData, success: (res) => { console.log(res.data); // 在此处进行表单提交成功后的操作 }, fail: (err) => { console.error(err); // 在此处进行表单提交失败后的操作 } }); } } } </script> ``` 上述代码示例假设你使用了 uView 框架和 uni-app 来构建小程序。你可以将代码中的 `uni.request()` 部分替换为适合你具体开发环境的网络请求方法。同时,请根据你的后端 API 地址和表单处理逻辑进行相应的调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值