# Uniapp端

# 移动端H5前端代码位置

源代码默认位于 module/XxxMobile/resources/mobile

对源码进行打包编译( php build_h5.php ),编译后的源代码会存储在 module/XxxMobile/Asset

在模块安装时会自动将 module/XxxMobile/Asset 的内容复制到 public/vendor/XxxMobile

访问 H5 页面时,系统会直接通过路径 /vendor/XxxMobile/xxx.js 引用 public/vendor/XxxMobile 中的静态文件。

# 移动端代码编译与打包

# 1 准备工作

# 安装HBuilderX

下载并安装HBuilderX:https://www.dcloud.io/hbuilderx.html (opens new window)

# 安装nodejs

下载并安装nodejs:http://nodejs.cn/ (opens new window)

注意:请安装 nodejs 14 版本

# 全局安装 vue-cli

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

# 2 打开项目

  • 进入到移动端代码目录,安装依赖
## 进入到移动端目录
cd module/Xxx/resources/mobile/
## 安装依赖
npm install
1
2
3
4
  • 启动 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

# 微信小程序

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

第 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,根据实际情况发布

# 多端编译

# 打包成H5

按照「移动端代码编译与打包」准备好环境,如果是 Linux或OSX 系统,H5发布只需要运行打包脚本

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

# 打包成微信小程序

按照「移动端代码编译与打包」准备好环境,运行小程序项目后,在小程序IDE中点击发布。

详细和参考 uniapp多端打包教程 (opens new window)

# 打包成Android客户端

按照「移动端代码编译与打包」准备好环境,点击 发行 → 原生App,根据实际情况发布

详细和参考 uniapp多端打包教程 (opens new window)

# 打包成iOS客户端

按照「移动端代码编译与打包」准备好环境,点击 发行 → 原生App,根据实际情况发布

详细和参考 uniapp多端打包教程 (opens new window)

# APP上架应用市场准备事项

# 微信小程序上架准备事项

# 定位信息配置教程

部分应用需要使用定位,定位默认使用了腾讯定位服务,配置流程如下

1 注册并创建腾讯定位服务应用,设置域名白名单

2 设置腾讯定位Key,找到 h5 > sdkConfigs > maps > qqmap > key 修改定位Key为上述步骤获取的定位Key

{
    // ...
    "h5" : {
        // ...
        "sdkConfigs" : {
            "maps" : {
                "qqmap" : {
                    "key" : "XXXX-XXXX-XXXX-XXXX-XXXX"
                }
            }
        },
        // ...
    },
    // ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 修改移动端主色调

  • 图标:图标为SVG图片,可编辑替换图片主色调
    • 路径 module/Xxx/resources/mobile/src/static/image/
  • 样式:修改Less文件主色调变量 @color-primary
    • 路径 module/Xxx/resources/mobile/src/config/theme.less
  • 变量:修改JS配置主色调值 SystemSetting.primaryColor
    • 路径 module/Xxx/resources/mobile/src/config/setting.js

# uniapp跨多端开发常见注意事项

# 小程序出现 undefined

小程序在引用一个不存在的变量 {{ biz.xxx }} ,如果 xxx 不存在,会在页面显式出现 undefined

需要使用 {{ biz.xxx ? biz.xxx : '默认值' }} 这样处理。

# 常见声明周期

  • mounted:子组件挂载完成,这个是在子组件中初始化数据的时机
Last Updated: 6 months ago