uni-app 是一个使用 Vue.js 开发的跨平台应用前端框架，允许开发者编写一套代码，发布到 iOS、Android、H5 以及各种小程序和快应用等多个平台。它通过条件编译和平台特有 API 调用，可以针对特定平台编写个性化代码，同时保持跨端兼容性。uni-app 生态丰富，支持 npm 包管理、第三方 SDK 集成和大量插件，上手容易，采用 Vue 语法和微信小程序 API，降低了学习成本。
在本教程中，我们将构建一个微信小程序博客应用，后端使用云函数，实现登录、注册、文章列表、文章详情、国际化和主题更换等功能。样式基于 ColorUI，项目利用 uni-app 和 uniCloud 进行开发。
起步
本教程将引导你创建一个 uni-app 项目，并集成常用功能。你需要具备 Vue 基础知识，了解 uni-app API 和 uniCloud 的基本概念，并安装好微信开发者工具。
项目开始
首先，创建一个新的 uni-app 项目，并启用 uniCloud（选择阿里云服务）。项目目录结构包括标准 uni-app 文件，如 App.vue、pages.json 等。注意，在 App.vue 中避免编写 template 布局或进行路由跳转，应用首页由 pages.json 的第一项定义；推送等配置可在 App.vue 的 onLaunch 中处理。
由于使用自定义导航栏，登录页和注册页不需要默认导航，因此在 pages.json 中设置 navigationStyle 为 custom：
// /pages.json
"globalStyle": {
"navigationStyle": "custom"
}
引入 ColorUI
从插件市场下载 ColorUI 的 ZIP 包，将其解压到项目根目录。在 App.vue 中引入样式文件：
// /App.vue
<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "colorui/animation.css";
</style>
在页面中添加测试按钮，如 <button type="default" class="bg-blue btn cu-btn">click</button>，运行微信小程序以验证导入成功。
使用 Vuex
在根目录下创建 store/index.js 文件，用于状态管理。本项目中，使用 Vuex 结合本地存储实现主题更改和多语言支持。
多语言实现：
在根目录下创建 language/zh.js 和 language/en.js 文件，定义语言包，例如：
// /language/zh.js
module.exports = {
langType: 'zh-CN',
login_title: '博客'
}
// /language/en.js
module.exports = {
langType: 'en',
login_title: 'UBLOG'
}
在 Vuex store 中，优先读取本地缓存的语言设置，若无则获取系统语言，并加载对应语言文件：
// /store/index.js
let userLang = uni.getStorageSync("userLang");
if (!userLang) {
const sys = uni.getSystemInfoSync();
userLang = sys.language;
}
let lang;
if (userLang.substring(0, 2) == 'zh') {
lang = require('../language/zh.js');
} else {
lang = require('../language/en.js');
}
const store = new Vuex.Store({
state: {
lang: lang,
themeColor: { title: '嫣红', name: 'red', color: '#e54d42' }
},
mutations: {
changeLang: function(state) {
uni.showActionSheet({
itemList: ['简体中文', 'English'],
success(e) {
let lang;
if (e.tapIndex == 0) {
lang = require('../language/zh.js');
} else {
lang = require('../language/en.js');
}
uni.setStorageSync("userLang", lang.langType);
state.lang = lang;
}
});
},
setThemeColor(state, val) {
state.themeColor = val;
}
}
});
在 main.js 中设置全局混入，使每个页面都能访问 lang 和 themeColor：
// /main.js
Vue.mixin({
computed: {
lang() {
return this.$store.state.lang;
},
themeColor() {
return this.$store.state.themeColor;
}
}
});
在页面中，使用 {{lang.login_title}} 显示文本，并通过按钮触发语言切换。
主题更换实现：
在页面目录下创建 theme.js，定义颜色列表：
// /pages/index/theme.js
export const ColorList = [
{ title: '嫣红', name: 'red', color: '#e54d42' },
// ... 其他颜色定义
];
在页面中，引入 ColorList 并实现模态框选择主题颜色。通过随机选取颜色列表中的六种颜色，显示在模态框中，用户选择后更新 Vuex 状态。页面按钮动态应用主题类，如 :class="['bg-' + themeColor.name]"，实现颜色切换。
功能测试
完成上述步骤后，可申请 AppID 并生成二维码，在手机端预览应用。真机调试时，可使用 vConsole 查看日志。
附加内容：打开第三方小程序
在 uni-app 开发中，有时需要打开其他小程序。使用 wx.navigateToMiniProgram API，并配置 manifest.json 中的 navigateToMiniProgramAppIdList 字段。例如：
wx.navigateToMiniProgram({
appId: 'wxfd5241d66a07713f',
path: 'pages/index/index',
success(res) {
// 打开成功
},
fail(e) {
console.log(e);
}
});
在 manifest.json 中配置：
// /manifest.json
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"navigateToMiniProgramAppIdList": ["wxfd5241d66a07713f"],
"usingComponents": true
}
通过获取目标小程序的 AppID 和页面路径，即可实现跳转。
参考资料
- ColorUI 插件：https://ext.dcloud.net.cn/plugin?id=239
- uni-app 官网：https://uniapp.dcloud.io/
- 项目地址：https://github.com/Bluestar123/ublog
本教程涵盖了 uni-app 项目的基础搭建、状态管理、多语言和主题功能的实现，帮助你快速入门跨平台开发。你可以在此基础上扩展功能，如添加 tabBar 并同步更新主题和语言。