【下载与安装】

首先下载并安装HBuilderX开发工具，这是uni-app官方推荐的IDE。安装完成后，打开软件，点击“文件”->“新建”->“项目”，选择uni-app模板。由于我们仅需一个基础壳子套H5页面，直接使用默认模板即可，无需复杂配置。

【基础代码编写】

在项目中新建页面，编写简单的逻辑代码。重点是通过@监听H5回传的消息，实现原生功能调用。例如，将需要打开的链接部署在固定服务器上，便于后续更新配置。通过SDK可调用摄像头、蓝牙等原生功能，代码示例如下：

uni.onMessage(res => {
  if (res.action === 'openCamera') {
    uni.openCamera();
  }
});

【manifest.json配置】

1. 基础配置：填写AppID和包名（需唯一且不可随意更改）。

2. 图标设置：准备一张1024x1024的PNG图标，工具会自动生成多分辨率适配的图标。

3. 模块配置：按需添加推送、定位等模块。注意阅读官方文档，避免踩坑（部分高级功能需付费技术支持）。

4. 权限声明：在配置文件中明确权限，如相机（camera）、麦克风（audioCapture）。命名与官方文档一致，建议搜索确认避免错误。

【云打包流程】

1. 打包方式：优先选择“传统打包”，“快速安心打包”可能因缓存导致问题。

2. 证书管理：备份证书和密码，建议上传至私有Git仓库。iOS需额外申请开发者账号（99美元/年）。

3. 包名规范：打包面板提供“生成证书”教程链接，包名一旦确定不可更改，需提前规划。

【Vue集成与路由控制】

1. 引入SDK：通过CDN或本地引入uni-webview-js SDK，解决H5页面在App壳内无法原生后退的问题。

2. 自定义路由：在main.js中注入路由逻辑，示例：

Vue.prototype.$router = {
  back() {
    uni.navigateBack();
  }
};

页面中调用this.$router.back()即可触发原生后退。

【上架注意事项】

此类套壳App通常仅适合企业内部或私有客户使用。若需上架应用市场，需完成以下步骤：

企业资质：提交营业执照、法人身份证（部分平台如vivo需手持身份证照片）。

const control = {
    // 在这些页面上后退按钮点两次会退出app
    homePaths: ['/index','/login'],
    state: [],
    vueObj: null,
    init(vueObj){
        this.vueObj = vueObj;
        this.addListener();
        return this;
    },
    // 判断是否首页（需要后退能退出app的页面）
    isHome(path) {
        return this.homePaths.includes(path);
    },
    // 在beforeEnter里面加上它，把路由状态保存起来
    pushState(path) {
        if(path!==this.state[this.state.length-1]){
            this.state.push(path);
        }
    },
    // 页面在后退的地方调用它
    back() {
        // 在首页等需要退出app的地方直接后退
        if(this.isHome(this.vueObj.$route.path)){
            window.uni.navigateBack();
            return
        }
        // 如果在非app环境刷新了页面
        if(this.state.length){
            // 自己的路由状态保存
            this.state.pop();
            // 这里这么写是因为有些手机后退，页面状态会很奇怪，所有即使直接push上一个页面进来
            this.vueObj.$router.push({ path: this.state[this.state.length-1] });
        } else {
            history.go(-1);
        }
    },
    // 监听后退按钮
    addListener(){
        // 本地开发的时候不用监听后退
         if(typeof window.plus === 'undefined'){
             console.log("当前不是app环境");
             return;
        }
        const _this = this;
        document.addEventListener('UniAppJSBridgeReady', function() {
            var webview = window.plus.webview.currentWebview();
            window.plus.key.addEventListener('backbutton', function() {
                webview.canBack(function(e) {
                    if (e.canBack) {
                        _this.back();
                    } else {
                        window.uni.navigateBack();
                    }
                })
            });
        })
    }
};
export default control;

多平台适配：各厂商（华为、小米等）需单独注册开发者账号，流程繁琐。小公司可通过第三方资质解决，但存在合规风险。

【总结与资源推荐】

本文介绍了uni-app开发套壳App的核心步骤，涵盖配置、打包及上架要点。如需进一步优化UI，可参考uni-app官方开源组件库（如uView），支持多端演示（扫码或点击链接查看）。实际开发中，建议结合业务需求权衡原生功能与H5的混合方案。

import Vue from 'vue';
import VueRouter from 'vue-router';
import HistoryCtrl from "static/js/history-ctrl";
const router = new VueRouter({
    routes: routerConfig
});
router.beforeEach(async (to, from, next) => {
    // 自己的路由
    HistoryCtrl.pushState(to.path);
    next();
});
const vueObj = new Vue({
    el: "#app",
    router,
    store
});
// 把自己做的前进后退挂载到vue里面方便调用
Vue.prototype.$historyctrl = HistoryCtrl.init(vueObj);
// 解决弹窗遮罩滑动穿透的问题
document.querySelector('body').addEventListener('touchmove', function(e) {
    e.preventDefault();
})