uni-app 结合云函数开发小程序博客（一）：环境搭建

本文由图雀社区认证作者 测不准 写作而成，图雀社区将连载其 uni-app 结合云函数开发小程序博客系列，感谢作者的优质输出，让我们的技术世界变得更加美好????

uni-app 是一个使用 Vue.js 开发的跨平台应用的前端框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台；uni在跨端的同时，通过条件编译和对应平台特有API地调用，可以很好得为某个平台写个性化的代码、调用其独有能力而不影响其它平台；生态丰富，支持npm包管理，丰富的第三方SDK集成和高达1600个插件的支持；上手容易，采用vue语法和微信小程序api，无额外学习成本，同时开发利器HbuilderX具有强大的语法提示。相信它将是你跨端开发的不二选择。

开始学习

起步

在这一系列教程中，我们将构建一个微信小程序应用 —— 博客（最近在准备面试，还没有测试其它端），后端使用云函数，包括登录、注册、文章列表、文章详情、国际化、更改主题等，样式使用 colorui^[1] ，感谢作者，开源真香。云函数对于前端开发来说又是一项新技能。

uni-app官网^[2]

项目地址^[3]

我们将实现什么？（样式略差请原谅）

具体有四个页面：

1. 登录：输入用户名密码，同时也可以微信登陆 openid （个人项目无法获取手机号登录）。

2. 注册：输入用户名密码注册（暂只限制了不为空）。

3. 首页：文章列表，种类tab标签，上拉刷新，下拉加载。

4. 我的：只做了语言和主题切换。

提示开始前需要了解的知识：

1. Vue基础知识

2. 了解 uni-app 的API

3. 简单了解 uniCloud

4. 安装好微信开发者工具（记得在运行配置中添加微信开发者工具路径，运行会自动启动）

项目开始

创建新的uniapp项目，记得勾选启用uniCloud，我选用的阿里云

目录结构如下

提示

App.vue 中不要写 template 布局，不像 vue 包裹 <router-view></router-view> ， 应用打开首页为 pages.json 第一项。App.vue 中尽量也不要做路由跳转。但是像推送需要在App.vue 中onLaunch中配置， 根据条件跳转页面。

由于我们使用自定义导航栏，登录页和注册页不需要，所以 pages.json 中 navigationStyle 为 custom

// 以下代码在 /pages.json 文件中

"globalStyle": {
 "navigationStyle": "custom"
},

引入colorUI

首先插件市场下载zip包

文件放在项目的根目录，之后我会把自己的组件或者样式文件都放其中。在App.vue 文件中引入

// 以下代码在 /App.vue 文件中

<sty