uniapp编译教学

uniapp编译基础流程

安装HBuilderX开发工具，官方推荐使用该IDE进行uniapp开发。确保Node.js环境已配置，版本建议在12.0以上。

创建新项目时选择uniapp模板，支持vue2/vue3版本。项目结构包含manifest.json（配置应用信息）、pages.json（路由配置）以及common公共资源目录。

多端编译配置

在manifest.json中设置各平台特有配置。微信小程序需填写appid，H5端需配置路由模式（hash/history）。支付宝小程序需单独配置window属性。

通过HBuilerX工具栏点击"运行"按钮，选择目标平台（微信开发者工具/浏览器/真机）。编译完成后自动生成/dist目录存放各平台产物。

自定义编译条件

使用条件编译注释实现多端差异化代码：

// #ifdef H5
console.log('仅在H5端生效');
// #endif

// #ifndef MP-WEIXIN
alert('非微信平台执行');
// #endif

在pages.json中配置平台特有样式：

{
  "style": {
    "h5": {"navigationBarTitleText": "H5标题"},
    "mp-weixin": {"navigationBarBackgroundColor": "#FF0000"}
  }
}

性能优化技巧

配置分包加载减少初始包体积：

"subPackages": [{
  "root": "subpackage",
  "pages": ["pageA", "pageB"]
}]

开启摇树优化（treeShaking）删除未引用代码。静态资源建议存放于static目录，图片文件使用压缩工具处理后再导入。

调试与发布

真机调试需连接同一局域网，Android设备开启USB调试模式。小程序发布前需在开发者后台配置合法域名。

生成发行版时勾选"压缩代码"选项，H5端可配置CDN地址。App打包需要配置证书信息，iOS需提供p12文件。