搜索中心
搜索中心 搜索快照

Uniapp端 - 移动端代码编译与打包

1 准备工作

安装HBuilderX

下载并安装HBuilderX:https://www.dcloud.io/hbuilderx.html

安装nodejs

下载并安装nodejs:http://nodejs.cn/

注意:请安装 nodejs 14 版本

全局安装 vue-cli

## 全局安装 vue-cli
npm install -g @vue/cli

2 打开项目

  • 进入到移动端代码目录,安装依赖
## 进入到移动端目录
cd module/Xxx/resources/mobile/
## 安装依赖
npm install
  • 启动 HBuilderX 软件
  • 点击 文件 → 打开目录,选择 module/Xxx/resources/mobile/ 目录

3 配置项目

Uniapp项目配置需要修改接口地址为网站地址,需要修改以下地方

文件 src/config/setting.js

image-20220415181044708

网页H5

网页H5-预览开发

image-20220415180602742

网页H5-打包编译

提示:默认模块中打包好的前端静态文件位于 module/Xxx/Asset/ 目录中

如果是 Linux或OSX 系统,H5发布只需要运行打包脚本

cd module/Xxx/resources/mobile/
php build_h5.php

微信小程序

第 1 步,安装并打开 微信开发者工具
右上角 → 设置 → 安全设置 → 服务端口,打开服务端口

第 2 步,打开 HBuilder,点击 发行 → 小程序-微信,生成小程序项目

image-20220415180634186

正常会自动打开微信开发者工具,如果没有自动打开,使用微信开发者工具手动打开项目目录,
微信小程序项目目录位置:module/XxxMobile/resources/mobile/dist/build/mp-weixin/

第 3 步,使用微信开发者工具预览代码并上传发布

常见问题:

Q:出现“您不是这个应用的项目成员,*****”

点开 manifest.json ,重新获取应用标识

Android/iOS客户端

连接的后继到电脑,打开USB调试模式

点击 运行 → 运行到手机或模拟器 → 选择连接的手机

5 项目发布

发布H5端

发布微信小程序

运行小程序项目后,在小程序IDE中点击发布。

发布Android端

点击 发行 → 原生App,根据实际情况发布

发布iOS端

点击 发行 → 原生App,根据实际情况发布

查看原文
QQ
微信