uniapp教学笔记

基础环境搭建

确保安装最新版HBuilderX，这是官方推荐的开发工具，内置uniapp项目模板。创建项目时选择uni-app类型，根据需求选择默认模板或自定义模板。

Node.js版本需保持在12.0以上，用于依赖管理。配置微信开发者工具路径，以便真机调试时调用微信小程序模拟器。

目录结构解析

项目根目录包含pages存放页面组件，static放置静态资源，components为公用组件。manifest.json配置应用名称、图标等基本信息，pages.json定义路由与页面样式。

注意静态资源路径需使用绝对路径/static/logo.png，组件引入需通过@components别名。

页面开发规范

每个页面由.vue文件构成，包含template、script、style三部分。使用Vue语法但需注意平台差异，例如小程序不支持部分HTML标签。

路由跳转使用uni.navigateTo，传参通过URL拼接，接收参数使用onLoad生命周期函数的参数对象。页面样式建议采用flex布局，适配多端显示。

跨端兼容处理

通过条件编译实现多端差异代码：

// #ifdef MP-WEIXIN
wx.login()
// #endif
// #ifdef H5
location.href
// #endif

使用uni.getSystemInfo获取设备信息，动态调整布局。公共组件开发时需测试各端表现，建议使用scss变量管理平台专属样式。

数据请求封装

推荐使用uni.request封装全局请求方法：

const request = (url, method = 'GET') => {
  return new Promise((resolve) => {
    uni.request({
      url: 'https://api.example.com' + url,
      method,
      success: (res) => resolve(res.data)
    })
  })
}

配置请求拦截器处理Token自动添加，响应拦截器统一处理错误码。注意小程序端需配置合法域名，H5端解决跨域问题。

状态管理方案

简单场景可使用全局变量：

// main.js
Vue.prototype.$store = {
  userInfo: {}
}

复杂项目建议引入vuex，按模块划分状态。持久化存储使用uni.setStorageSync，注意小程序端同步存储有容量限制。

发布打包流程

H5版本通过发行->网站-H5手机版生成，需配置部署路径。小程序版本需在开发者工具中导入unpackage/dist/dev/mp-weixin目录。

App打包需配置证书与签名，通过原生平台云打包或本地打包生成安装包。各平台发布前需仔细检查权限配置与隐私政策。