【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(二）---登陆界面功能实现

打开 main.js,这个文件里定义的是整体小程序中会用到的一些 功能 （即变量之类），也就是说，只要在这里出现的功能，其它页面可以直接拿来使用。可以把它理解为： 共享单车main ，大家都可以用。

我们在它的最下面加一排内容：

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

//以下是添加内容

var APITOKEN = 'myuniapp';  //口令
Vue.prototype.apiServer = 'http://127.0.0.1/api.php?token=' + APITOKEN + '&action='; //数据接口地址


Vue.prototype.checkLogin = function(backpage) { //检测是否登陆
	var UID = uni.getStorageSync('UID'); //用户ID
	if (UID == '') {
		console.log("没登陆")
		uni.redirectTo({
			url: '/pages/login/login?backpage=' + backpage 
		});
		return false;
	} else {
		console.log("已登陆")
		return UID;
	}
}

上面的  apitoken 是我们设置的与数据接口对接的一个口令，就像我们说：“芝麻开门” ，服务器那里一看，对啊，就放我们进去一样，属于一个安全认证的环节。

Vue.prototype.apiServer  这句话，是表示 添加全局变量，名字叫 apiServer ，就是加了一辆名称叫 “apiServer“的共享单车。

Vue.prototype.checkLogin 这句话，与前面的 apiServer 不一样，它是一个 略为复杂的功能性代码，是用来判断用户是否登陆， 如果没有登陆，就跳转到登陆界面去。如果登陆了，就告诉其它页面，用户的UID编号是多少，这个UID存在于 服务器数据库中，就类似我们的身份证，是一个数字。这里，我们又添加了一辆名称叫 “checkLogin“的共享单车。

每个页面修改后记得保存一下。

下面我们看看每个页面的结构与如何把这两个“共享单车”拿来使用。

点开index.vue文件，会发现，所有页面由三大块构成

红色区是一个页面的显示代码，相当于房子的结构

绿色区是功能代码，来设置这个页面实现哪些功能，这里就一些“方法”，“事件”的定义，后面我们遇到再慢慢细说

蓝色区是样式代码，说白了就是 用来 装修 房子显示效果的。

<template>
    <view>
        我是写日记界面
    </view>
</template>

<script>
    export default {
        data() {
            return {   }
        },
        methods: {            
        }
    }
</script>

<style>

</style>

我先把前面的“共享单车”拿来看看效果，修改<script>成以如下

<script>
var _self,loginUID;    //定义两个变量，页面都要用到
    export default {
        data() {
            return {            
            }
        },
        methods: {
        } ,
        onLoad() {
            _self = this; 
            loginUID = _self.checkLogin('/index/index');
            if (!loginUID) {return;    }else(console.log(loginUID));
        }
    }
</script>

保存后，点击 菜单上面的 “运行---》运行到内置浏览器中”，这样我们就在软件右边看到执行后的效果了，会发现，页面跳到了“登陆界面”

将以上代码，分别替换到 edit.vue,list.vue两个页面中。

现在，我们无论点击哪个页面，都会跳到  “登陆界面” login.vue这个页面，所以，我们先制作一下“登陆界面”。

将login.vue页面按以下代码修改，可直接将下面代码拷贝过去：

<template>
	<view class="body">
		<!-- 显示区正式开始 -->
		<view class="myfrom">
			<form @submit="goLink">
				<view class="myfrom">
					<view class="myinput">
						<input v-model="pwd" placeholder="请输入密码" password adjust-position />
					</view>
					<view class="mybutton">
						<button type="primary" form-type="submit">登陆</button>
					</view>
				</view>
			</form>
		</view>
		<!-- 显示区结束 -->
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				pwd: ''
			};
		},
		methods: {
			goLink() {
				if (_self.pwd == '') {
					uni.showToast({
						title: "密码必填",
						icon: "none"
					});
					return;
				}
				uni.request({
					url: _self.apiServer + 'login',
					method: 'POST',
					header: {'content-type': "application/x-www-form-urlencoded"},
					data: {
						'pwd': _self.pwd
					},
					success: res => {
						console.log(res);
						var result = res.data.result;
						if (result == "ok") {
							var uid = res.data.datas.uid;
							var uname = res.data.datas.uname;
							uni.showToast({title: uname + "登录成功",icon: "none"});
							uni.setStorageSync('UID', uid + ''); //字符串形式存储												
							setTimeout(function() {
								uni.switchTab({url: "/pages/index/index"}); // 跳转目标
							}, 2000); //2s后跳转
						} else {
							_self.pwd = '';
							uni.showToast({title: result,icon: "none"});
						}
					}
				});
			} //golink结束
		},
		onLoad() {
			_self = this
		}

	}
</script>

<style>
	.myfrom {
		margin: 30% 10px 40px 10px;
	}

	.myinput {
		border: 1px solid #ccc;
		border-radius: 5px;
		height: 30px;
		padding: 5px;
		text-align: center;
	}

	.mybutton {
		margin-top: 20px;
	}
</style>

这个文件中，丰富了 显示区，这里要说明的是，显示区以一对 <template> 开始，里面的第一个标签只能是 一对 <view>

<template>
    <view class="body">
        <!-- 显示区正式开始 -->
           <view class="myfrom">
                <form @submit="goLink">        
                <view class="myinput">
                    <input v-model="pwd" placeholder="请输入密码" password adjust-position />
                </view>
                <view class="mybutton">
                    <button type="primary" form-type="submit">登陆</button>
                </view>  
                </form>
            </view>
      
        <!-- 显示区结束 -->
    </view>
</template>

我们要提交出去的内容，全部放到一个       <form> </form>的包装（组件）中，在这段代码中，还有一个  <button>按钮，上面写  form-type="submit"  就表示点它，就执行写在form上的 @submit="goLink" 方法，去处理数据，这两个 submit是绑定关系，一条绳上的蚂蚱。
goLink是我们自己起名一个处理提交事件的方法名，在我们这个应用中，全部用这个名字，表示与服务器时行数据的沟通。

在 input 用户输入框里有一个重要知识点：v-model=”pwd“      ，这个表示这个是可以变化的值，它会实时把输入的内容 传递给 功能区<script> 里对应叫做”pwd“的变量 ，在功能区中就是_self.pwd ，  v-model 理解成一个镜子功能就行，你做什么，镜子里的你也做什么

password表示 这是密码输入， adjust-position表示手机上的键盘不要挡住输入框

接下来，我们看一下功能区<script>的主要知识点

首先，我们自己命名的所有方法，基本上都要放到 methods这个{ }大括号之内，并且，每个名字之间要用 ，逗号隔开，最后一个不能带 ， 逗号。

以goLink()来讲， 这里的 uni.request 表示 要与数据服务器进行深入交流一下，可以理解为发快递，POST是一种比较安全的传递方法，就好比咱们的快递商品加了一个包装盒，一般人看到里面的商品，记着一定要加上header: {'content-type': "application/x-www-form-urlencoded"} 组合到一起用就行了。还有GET方式，这种就相当于邮寄商品没加包装盒，外人一眼能看到你寄的是啥。

console.log 是一个监控指令，初学的同学，可以在开发工具的下面直接看到调试内容，实际成品中是看不到的。

uni.showToast是一个可以让用户看到的提示，与console.log 有类似功能，区别就是这个特意要在成品中显示出来的

uni.setStorageSync 表示我们收到货后，先存放起来，其它页面还要用到。这个应用中，我的收到是从服务器返回来的 用户身份UID。

uni.switchTab 是指的完成功能操作后，进行跳转，系统有多种跳转方式，但由于我们的页面是 tabbar这个卡式切换，所以，只有选这个，下一节还会用到。

以上代码可以先运行起来，可以日后再了解更详细的知识点，入门后，网上有更多专业的教程。

好了，这节课我们学习了页面的基本构成结构，并完成了 登陆界面的制作。