在前面随笔的介绍中，我们已经为各种框架，已经准备了Web API、Winform端、Bootstrap-Vue的公司动态网站前端、Vue&Element的管理前端等内容，基本都是基于Web API基础的。完成这些基础准备和布局后，我们继续将技术的触角放到使用Vue语言开发小程序的场景中，本篇随笔介绍使用uView UI+UniApp开发微信小程序，介绍使用准备过程中的一些注意点和经验总结。

1、小程序的开发准备工作

我们在开发小程序之前，需要了解一些基本的知识，以及掌握一些常规的开发工具，相关知识最好能够在着手开始前有所掌握，然后在开发过程中逐步加强巩固即可。

1）Vue语言掌握

我们通过Vue官网https://cn.vuejs.org/v2/guide/index.html，了解相关的语言基础只是，这个部分我们利用Vue开发小程序的基础，必须先有所掌握相关基础知识，以及开发组件中涉及到的知识点。

Vue可以是我们后续前端开发的强力助手，如果我们掌握的好，对很多相关的处理会一目了然，否则可能不明所以，如Mixin混入、以及组件的事件属性的通讯关系、Vuex的存取处理、常用的JS模块、ES6的函数定义及Promise的处理等等。

随着我们对Vue开发的逐步熟悉，各种特性我们会一一记在脑中并能够熟练运用。

2）UniApp官网

我们需要了解UniApp的基础，包括它的相关理念，下面介绍的uViewUI本身也是基于它的进一步封装，使用UniApp和HbuliderX 工具可以开发各种不同的小程序，APP、H5等场景，不过我们这里着重考虑微信小程序。

3）uView UI官网

通过官网https://www.uviewui.com/components/intro.html，了解组件的使用，以及一些基础的知识，如easycom的约定、全局变量特别是Vuex的混入及使用过程、JS类库等处理。

我们本次开发小程序，需要利用uView UI的组件代码下载下来进行项目的整合使用，或者利用HBuilder X的工具，直接下载使用UniApp官网的uView UI插件模块。

uView UI提供了各种界面上用到的组件，几乎封装了我们常见到的各种界面元素，极大的方便了我们小程序界面的开发工作，如果有些特殊的功能界面，也可以从UniApp官网的插件列表中寻找进行整合。

4）官方小程序网站

通过官网https://developers.weixin.qq.com/miniprogram/dev/framework/了解微信小程序的基础知识，我们利用uView UI+UniApp开发微信小程序，本身还是对官方小程序接口的封装处理，我们有时候还是需要对其中的相关生命周期，底层函数等有一定的了解，才能更好的理解微信小程序的各种机制和处理方式。

5）开发工具

我们这里开发UniApp程序，推荐还是使用HBuilderX来开发，相对通用的前端开发工具VS Code来说，它的有些处理更特性化，然后熟悉配合《微信开发者工具》进行小程序的调试和部署即可。

2、uView UI的使用

以Web API为业务数据的接口基石，我们可以扩展很多业务管理端，包括Winform端、Vue&Element业务管理端、动态门户网站、微信小程序等等。

 我们循例介绍一下uView UI的基础使用步骤，首先在项目中main.js引入对应的组件-引入uView主JS库。

检查uni.scss中已经加入了uView UI的样式，引入uView的全局SCSS主题文件

App.vue

一般来说，我们创建示例项目，都有这些基础的设置了，我这里只是循例介绍一下，让我们有所了解它的工作原理。

 我这里还是主要介绍uView的this.$u的相关对象处理，它是通过Vue.prototype进行挂载进去的，也就是我们使用这些，都是uView加入的，如下main.js部分内容所示。

在项目中，我们可以找到对应项目的store实现，以及uview对象Mixin混入的部分

它把登录信息相关的用户和令牌信息，通过storage的方式进行存储起来，并处理好相关的逻辑，这样混入后我们可以方便的通过混入的Computed属性获取到对应的值，或者快速的设置存储起来。

这里的SaveStateKeys就是设置存储到storage中的键，只要存在这两个键的内容，都可以快速的使用Vuex的处理，如下是获取内容。

由于是页面对象的自动混入，我们甚至在JS代码里面都没有定义这两个对象，只需要记得这个键是我们的全局存储的对象即可。

例如我们在JS的模块里面，通过VM获得this的参数

即可直接调用对象存储处理，如下代码所示。

如果是在页面组件中，我们则使用this代替vm的变量进行调用

storage的信息，可以通过小程序的调试工具进行查看到，如下截图所示。

3、小程序的登录状态判断及跳转

 在业务系统中，我们需要根据登录用户的身份获取对应的数据，如果用户没有登录，这些信息是无法获到的，那么我们可以在app.vue中判断用户是否登录，然后调准到对应的页面，如下所示。

 跳转判断在app.vue的程序启动逻辑中进行处理，如下代码所示。

其中 uni.switchTab 是跳转到首页的某个tab页面，如果我们的页面有tabbar页面的话。

用户登录的时候，需要输入用户名，密码，构建相关的参数后，进行登录处理

其中 this.$u.api.User 是用户API接口的统一调用方式

我们在main.js代码里面看到安装了两个不同的JS模块，如下代码所示。

其中第一个是统一http调用的设置，第二个这是引入一个api对象，方便调用api对应的接口，如下： this.$u.api.User 

以及统一整合各个API对象

 其中在http.interceptor.js里面，统一设置了api的Url的baseUrl，这样可以不用配置反向代理的转义，就可以简化API中URL的定义了。

另外我们返回的Response对象里面，有统一定义对象的，相关的数据可以参考随笔《利用过滤器Filter和特性Attribute实现对Web API返回结果的封装和统一异常处理》了解。

一旦程序处理过程中，有错误抛出，都会统一到这里进行处理，有异常的返回JSON如下所示。

其中结果result是用于检查是否执行成功的标识，这里用来判断是否有错误即可，有错误，则显示自定义错误信息

上面的拦截默认是基于状态码200的，如果我们自定义一些异常，指定了状态码的也需要拦截，需改uview-ui/libs/request/index.js 根据状态码自己去加入，如下代码所示。

 用户完成登录，并成功获取身份信息后，切换到指定的页面，如下界面效果所示