wap2app项目创建--保姆级教程(上篇)

539 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

在html5+js开发的页面全部运用到app上,公司使用了wap2app框架来快速实现,而我成为了公司开发app核心人物,一步一步踩坑,才有了这份保姆级攻略

1. 首先,创建项目

填写项目名称和应用入口页面(首页)地址

注意:由于App需实现长期登录态,登录权限全权由后端控制,所以我写的首页地址是一个loading页,再从loading页跳转至login

image.png

2. App配置

2.1 基础配置

App打包之后,会不断迭代更新,要养成打包前更新应用版本名称的习惯,以免需要再次打包 image.png

2.2 图标配置

上传一张App的图标,并【点击】自动生成所有图标并替换;如果公司对于图标要求严格,让UI出不同size的图片

2.3 模块配置

如果公司需要App实现消息推送功能,一定要勾选消息推送,否则无法实现。勾选后需要在dlcoud开发者中心配置相关内容(后续补充

配置push在manifest.json→模块配置→勾选push选项,之后需要在dcloud中上传ios的push.p12证书,并配置密码

image.png image.png

2.4 App 常用其他设置

image.png 自定义404等错误页面:error.html(直接在项目文件夹下方创建一个error.html)

配置安卓和IOS的UrlScheme:在manifest.json→App常用其他设置→Android设置和IOS设置的UrlSchemes

UrlSchemes 使用 hbulder,方便调试,前期可以写hbuilder,后期改成公司规定的

image.png

2.5 源码视图

在manifest.json的源码视图中添加如下代码

// 在 plus 节点中修改或添加如下代码:
    "kernel" : {
        "ios" : "WKWebview" // ios
    },
    // 启动 Webview 窗口的操作
    "launchwebview" : {
        "contentAdjust" : false, /*控制是否根据内容自动调整窗口大小*/
        "statusbarKey" : {  /*设置状态栏样式和背景色*/
            "background" : "#ffffff",
            "style" : "dark"
        }
    },
    // 应用程序启动界面
    "splashscreen" : {
        "autoclose" : true,
        /*是否自动关闭程序启动界面,true表示应用加载应用入口页面后自动关闭;false则需调plus.navigator.closeSplashscreen()关闭*/
        "waiting" : true
        /*表示在等待应用程序启动界面关闭时显示一个旋转图标或其它UI提示信息*/
    },
    // 状态栏设置,关闭沉浸式,隐藏状态栏
    "statusbar" : {
        "immersed" : "false",
        "style" : "dark"
    },
    // 顶部导航栏的安全距离
    "safearea" : {
        "background" : "#fff",
        "bottom" : {
            "offset" : "auto"
        }
    },
    // 注意:此段代码仅在安卓打包时打开,IOS打包时请注释此段代码,否则会循环报错
    "wap2app" : {
        "launchError" : "none" // 应用首页加载错误处理逻辑,"tip"表示弹出提示框(无法连接服务器,请检查网络设置)
    },

左侧项目栏中主要是这些配置,在项目几个脚本中也有需要注意的配置,下篇文章讲解!下期再见👋