# 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

文件 src/manifest.json

# 4 运行项目

# H5页面

# 微信小程序

# Android/iOS客户端

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

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

# 5 项目发布

# 发布H5端

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

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

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

1
2

# 发布微信小程序

运行小程序项目后，在小程序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上架应用市场准备事项

环境准备
- 本地安装 HBuilder
- uniapp 环境搭建
系统准备
- APP 图标（PNG 格式，大小 1024x1024 像素）
- uniapp 开发者账号：注册 https://dev.dcloud.net.cn/ (opens new window) 账号，并且完成实名认证
- 申请开通 unipush 1.0 功能
- 软著或软件著作权许可
  - 对于自行开发的软件系统，需要提前申请软著
  - 对于使用魔众商业系统，可申请使用魔众商业系统的软件著作权许可
- 手机支付准备（根据系统是否需要支付功能而定）
  - 微信手机支付申请 https://pay.weixin.qq.com/index.php/core/home/login (opens new window)
  - 支付宝手机支付申请 https://open.alipay.com/platform/home.htm (opens new window)
- 手机授权登录（根据系统是否需要授权登录而定）
  - 微信授权登录申请 https://open.weixin.qq.com/ (opens new window)

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

环境准备
- 本地安装 HBuilder
- uniapp 环境搭建
- 微信小程序开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html (opens new window)
系统准备
- 后台系统部署完成，需要配置 https 支持
- uniapp 开发者账号：注册 https://dev.dcloud.net.cn/ (opens new window) 账号，并且完成实名认证
- 已认证微信小程序（地址 https://mp.weixin.qq.com (opens new window) 注册后在设置页面补充小程序基本信息）
- 已开通的微信支付（如果需要的话）
- 微信小程序后台 开发管理 → 开发设置 设置以下信息
  - 生成 AppSecret，生成后会显示 AppSecret，需要记录下来
  - 开启 IP 白名单，添加服务器 IP 到白名单中
  - 服务器域名 → request合法域名：https://example.com
  - 业务域名：https://example.com

# 定位信息配置教程

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

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：子组件挂载完成，这个是在子组件中初始化数据的时机