学习uni-app的错误以及解决方案

前言：图片缺失，确实找不到了

1.基本介绍

1.pages文件夹下存放的都是页面，新建的vue文件需要在pages.json里注册

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKki8SOx-1586582173993)(D:\xiaoyu\小于笔记\ass\pages.PNG)]

2.static里不止可以存放图片，也可存放全局使用的js文件

3.main.js存放公共的js，可以将staic里存放的js文件引入main.js中，需要设置 Vue.prototype. 属性使utils.js 成为全局js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S2WH5Fvh-1586582173994)(D:\xiaoyu\小于笔记\ass\mainjs.PNG)]

4.manifest.json是进行配置的

5.一个基本的 vue文件有三个同级父节点

<template>
//写HTML
	<view>
	
	</view>
</template>

<script>
//写js
	export default {
	//数据
		data() {
			return {
				
			}
		},
		//挂接事件：onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
		onLoad(p) {
		
		},
		//方法
		methods: {
			
		}
	}
</script>

<style>
//写CSS样式
</style>

6。如果要应用uni的组件 需要在

import {uniBadge} from '@dcloudio/uni-ui'

2.应用错误和解决办法

1.没有运行环境和npm–》安装nodejs，node.js自带npm

2.跳页 ：

方法一：可以用navigator实现（一定要写open-type=“navigate”，否则navigator组件会不好使）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yWKSiPlx-1586582173994)(D:\xiaoyu\小于笔记\ass\跳页组件.PNG)]

方法二：也可以将事件挂在按钮上写一个方法利用navigateTo实现跳页

  <button form-type="submit" @click="pagekip()">提交</button>

 methods: {
	pagekip:function(e){
			// uni.navigateTo({
			//     url: '../index/index?id=1&name=uniapp'
			// });
			}
			}

3.页面间传参问题

方法一：利用navigateTo 在url传输时一起将参数传输 “地址？（？间隔地址和参数）键=值&（参数之间用&间隔）键=值”

方法二：解决input传参问题

一些公共数据需要在utils.js里写一个变量用来接值

var formdata = {};

export default{
	//其他文件调用的名字：方法名（不用加小括号）或属性变量名
	formdata:formdata
}

在login.vue的script里写

methods: {
            formSubmit: function(e) {
                console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                var formdata = e.detail.value;
				this.utils.formdata = formdata;
                }
        } 

需要接值的index.vue页面里写

onLoad(p) {
			//挂接事件
			console.log(this.utils.formdata)
			//解决方法一的传值问题
			console.log(p.id);
			console.log(p.name);

​
},

4.showModal组件无效

由于把跳页事件挂在提交按键上了，所以先跳页了–》showModal有原生的属性回调

uni.showModal({
                    content: '表单数据内容：' + JSON.stringify(formdata),
                    showCancel: false,
					 success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
								uni.navigateTo({
								    url: '../index/index?id=1&name=uniapp'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
                });

5.关于提交和重写的写法

		<template>
		 <form @submit="formSubmit" @reset="formReset">
			<view class="uni-btn-v">
                    <button form-type="submit" @click="pagekip()">提交</button>
                    <button type="default" form-type="reset">重写</button>
			
            </view>
             </form>
        </template>

 <script>
 
 
 methods: {
            formSubmit: function(e) {
                console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                var formdata = e.detail.value;
				this.utils.formdata = formdata;
                uni.showModal({
                    content: '表单数据内容：' + JSON.stringify(formdata),
                    showCancel: false
					
            },
            formReset: function(e) {
                console.log('清空数据')
            }
            }
 </script>

),
showCancel: false

        },
        formReset: function(e) {
            console.log('清空数据')
        }
        }

```