创建一个UWP应用

这里写图片描述

新建文档

由于我们要采用MVVM的模式所有添加如图文件夹：
这里写图片描述
其中

Model 层

Model 层，对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。

View 层

View 层，作为视图模板存在，在 MVVM 里，整个 View 是一个动态模板。除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态，View 层做的是数据绑定的声明、指令的声明、事件绑定的声明。

ViewModel 层

ViewModel 层把 View 需要的层数据暴露，并对 View 层的数据绑定声明、指令声明、事件绑定声明负责，也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；而当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。一旦值变化，View 层绑定的 ViewModel 中的数据也会得到自动更新。

Controls

里面存放对数据库的操作；

图示：

这里写图片描述
如果大家想深入了解，我参考的文章

在View层中添加视图

这里写图片描述
这里我添加了LoginPage.xaml和RegisterPage.xaml的登陆注册界面，
由于采用MVVM，我们需要将界面都放在View层，所有对UWP应用创建时的MainPage.xaml不做考虑，但是注意在App.xaml.cs中将启动页面MainPage改为LoginPage。
还有一个重点：
虽然我们将xaml的后台操作写在ViewModel层，但我们还是要添加他的xaml.cs文件，并在文件里写上构造函数，不然页面显示不出来。

namespace UWPDemo.Views
{
    public partial class LoginPage : Page
    {
        public LoginPage()
        {
            InitializeComponent();
        }
    }
}

虽然界面很丑但如果大家想看源码的话，看文章末尾的GitHub地址

在ViewModel 层中添加视图的后台文件

这里写图片描述
如图添加俩LoginPageViewModel.cs和RegisterPageViewModel.cs，View层对应的ViewModel文件
添加了还没完要想要想View层的事件和ViewModel关联，必须将他们绑定。
这里我们使用PageContext x:band的方法。
这里我参考的文章
方法为在View层的xaml代码前：
先引入ViewModel的命名空间

xmlns:vm11="using:UWPDemo.ViewModels"

在使用PageContext （类似于进行实例化）

<Page.DataContext>
        <vm11:LoginViewModel x:Name="ViewModel"/>
 </Page.DataContext>

最后在你要绑定的控件的事件：（这里为Register键的click事件）

Click="{x:Bind ViewModel.Register_Click}"

在View层进行绑定后，在ViewModel 层写对应事件的代码（这里仅为页面跳转）
例如：在LoginPageViewModel.cs中的Register_Click事件

namespace UWPDemo.ViewModels
{
    public class LoginViewModel : INotifyPropertyChanged
    {
        public LoginViewModel()
        {
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void Register_Click()
        {
            //将当前激活页面实例
            Frame root = Window.Current.Content as Frame;//获取当前激活页面
            root.Navigate(typeof(RegisterPage));
        }
    }

}

最后：

这样我们的UWPDemo就能愉快的跳转啦 (≧∇≦)ﾉ
那今天就先讲到着，后续还有Model 层的Sqlite数据库的操作，欢迎大家关注！
GitHub源码

UWPDemo(一)创建一个简单MVVM模式的UWP应用