# 检查 Node.js 版本
node -v # 需要 >= 12
# 检查 npm 版本
npm -v
# 安装依赖
npm install
# 或使用 yarn
yarn install
修改 common/config.js 配置不同环境:
// 生产环境
export const apiBaseUrl = 'https://backend.qicai321.com';
// 测试环境
export const apiBaseUrl = 'http://192.168.66.187:8083';
在 manifest.json 中配置小程序 AppID:
{
"mp-weixin": {
"appid": "wxc9655eeaa3223b75",
"setting": {
"urlCheck": false
}
}
}
# H5 开发
npm run dev:h5
# 微信小程序开发
npm run dev:mp-weixin
# App 开发 (需要在 HBuilderX 中运行)
创建新页面的步骤:
在 pages 目录下创建新的目录和 .vue 文件:
pages/
new-page/
new-page.vue
在 pages.json 中添加页面配置:
{
"path": "pages/new-page/new-page",
"style": {
"navigationBarTitleText": "新页面"
}
}
页面跳转
// 保留当前页面,跳转到应用内的某个页面
uni.navigateTo({
url: '/pages/new-page/new-page'
});
// 关闭当前页面,跳转到应用内的某个页面
uni.redirectTo({
url: '/pages/new-page/new-page'
});
// 跳转到 tabBar 页面
uni.switchTab({
url: '/pages/index/index'
});
// 方式一:直接导入
import { getUserInfo } from '@/api/user.js';
export default {
methods: {
async fetchData() {
try {
const userInfo = await getUserInfo();
console.log(userInfo);
} catch (error) {
console.error('获取用户信息失败:', error);
}
}
}
}
import { useUserApi } from '@/composables/useUserApi.js';
export default {
setup() {
const { fetchUserInfo, loading, error } = useUserApi();
const loadData = async () => {
try {
const data = await fetchUserInfo();
console.log(data);
} catch (err) {
console.error(error.value);
}
};
return {
loadData,
loading,
error
};
}
}
uni-app 使用 rpx 作为响应式单位:
/* 750rpx 等于屏幕宽度,自适应不同屏幕 */
.container {
width: 750rpx;
height: 200rpx;
padding: 20rpx;
}
/* 弹性布局 */
.flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
/* 居中对齐 */
.center {
display: flex;
align-items: center;
justify-content: center;
}
/* 按钮样式 */
.btn-primary {
background-color: #0039b3;
color: #fff;
border-radius: 44rpx;
height: 88rpx;
line-height: 88rpx;
text-align: center;
}
// 在页面中使用
console.log('调试信息', data);
console.error('错误信息', error);
console.warn('警告信息', warning);
针对不同平台开发:
// #ifdef APP-PLUS
console.log('App 平台');
// #endif
// #ifdef MP-WEIXIN
console.log('微信小程序');
// #endif
// #ifdef H5
console.log('H5 平台');
// #endif
App 真机调试:
微信小程序调试:
查看网络请求:
// 在 utils/request.js 中已有 console.log
console.log('request:', options);
console.log('response:', response);
使用抓包工具:
npm run build:h5
构建产物在 unpackage/dist/build/h5
npm run build:mp-weixin
构建产物在 unpackage/dist/build/mp-weixin
问题: 跳转后白屏或报错
解决方案:
pages.json 配置是否正确问题: 网络请求返回 404 或 500
解决方案:
问题: CSS 样式显示不正确
解决方案:
!important 提高优先级问题: 真机上无法正常运行
解决方案:
问题: 请求返回 401 未授权
解决方案:
uni.removeStorageSync('token')变量命名: 使用驼峰命名法
const userName = 'John';
const isLogin = true;
方法命名: 使用动词开头
function getUserInfo() {}
function handleLogin() {}
function fetchData() {}
组件命名: 使用 PascalCase
<UserInfo />
<VoiceCheckModal />
pages/
page-name/
page-name.vue # 页面文件
page-name.js # 页面逻辑(如果复杂)
page-name.scss # 页面样式(如果复杂)
/**
* 获取用户信息
* @param {Number} userId - 用户ID
* @returns {Promise} - 用户信息
*/
export function getUserInfo(userId) {
// 实现代码
}
# 创建新分支
git checkout -b feature/new-feature
# 提交代码
git add .
git commit -m "feat: 添加新功能"
# 推送分支
git push origin feature/new-feature
feat: 新功能fix: 修复 bugdocs: 文档更新style: 代码格式调整refactor: 代码重构test: 添加测试chore: 构建过程或辅助工具的变动// 按需加载组件
const Component = () => import('@/components/Component.vue');
// 缓存 API 数据
const cachedData = uni.getStorageSync('cachedData');
if (cachedData) {
// 使用缓存数据
} else {
// 请求新数据
}
// 防抖
function debounce(func, wait) {
let timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(func, wait);
};
}
// 节流
function throttle(func, limit) {
let inThrottle;
return function() {
if (!inThrottle) {
func.apply(this, arguments);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// 测试 API 方法
import { getUserInfo } from '@/api/user.js';
test('getUserInfo should return user data', async () => {
const userInfo = await getUserInfo();
expect(userInfo).toHaveProperty('id');
});