跨端开发 —— 套壳H5快速打包发布一个App应用

重阳微噪
4,466 阅读7分钟

1、前言

公司最近准备开发App， 先前已经通过 Taro 开发了小程序和H5项目， 后面计划再将代码编译成 安卓和ios应用， 由于目前公司没有原生开发App的人员， 为了更快的上线验证App的开发，而且项目中也没有很依赖原生能力的功能， 所以想用 webview 套壳快速上线一个 安卓和ios 的 App应用。

因为本人是前端开发， 一点原生移动端开发经验都没有， 所以本文将对 ios 和 安卓 从0-1进行学习， 开发 一个 webview 套壳 h5， 再到发布安装测试进行详细的开发记录， 由于还是原生APP开发 小白， 有不对的敬请指出

2、优缺点

首先分析一下对于套壳的 App 应用优缺点进行分析

优点： 1、 开发成本低， 无需再招APP开发人员， 可以同步H5的所有功能，无需二次开发，功能适配 2、 测试成本非常低， 因为内部环境依然是浏览器环境， 无需进行再一步的测试， 基本H5测的什么样，App端表现就是什么样 3、 快速上线验证， 版本更迭不在是难题， 众所周知， 开发一款App 将会面临发布审核， 用户更新的一系列周期很长的上线与更新过程， 嵌套H5后，这些问题将不在存在

说完优点再来总结缺点： 1、首次打开性能是个问题，会明显打开速度会慢一些 2、无法使用系统的返回，比如右滑返回上一页，需要每个页面单独设置返回按钮 3、无法使用原生能力，比如消息通知、各种原生 sdk 4、需要登录状态的二次开发， APP和H5需要共享登录态，保证用户杀死APP进程后， 不需要每次都重新登录 5、webview 加载的进度条问题，无法加载时的问题排查困难等

3、 IOS 开发

3-1、下载安装xcode 、 新建项目、 开发者账号准备

注意 最好安装15版本的，支持ios 17 ， maxos 系统不够可能需要提示升级才能更新 xcode

开发文档 开发者账号

在开发者账号中，下面的 App 和 证书 是经常要用的

image.png

后续的开发和分发测试与发布可能都需要开发者账号， 大概每年几百人民币， 可以团队共用

3-2、开发

新建项目

image.png

image.png

image.png

项目建好之后，少许等待， 即可看到右侧模拟器会展示出 hello world 的界面， 项目整体看起来还是很简洁的， 我们开始添加webview的功能，

1、首先在 ContentView 的同级右键新建一个 Swift File 的文件， 命名为 WebKit, 输入下面的代码

WebView

import Foundation
import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
  var url: URL
  func makeUIView(context: Context) -> WKWebView {
return WKWebView()
  }
  func updateUIView(_ webView: WKWebView, context: Context) {
let request = URLRequest(url: url)
webView.load(request)
  }
}

2、在 ContentView 内进行使用

import SwiftUI
import WebKit
struct ContentView: View {
    @State private var showWebView = true
    var body: some View {
        WebView(url: URL(string: "https://m.kalodata.com/login")!)
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

image.png

大功就搞成了， 然后就是发布给其他用户进行安装测试

3-3、打包安装、测试

安装测试之前很重要的一步是配置证书， ios 的证书配置比较麻烦

证书配置的链接地址： developer.apple.com/account/res…

image.png

配置的大体思路是， 创建证书， 这个可以在xcode 里面 setting 中的 accounts 中进行添加

image.png

然后新建 Identifiers

最后新建 profiles

image.png

profiles 新建好后， 可以把证书进行下载下来， 后面的发布会用到， 项目里可以选择勾选自动管理证书， 也可以取消勾选， 将下载下来的证书， 上传上来，手动管理。 这个证书大致逻辑就是 本地生成 证书， + Identifiers + Devices 组合 生成最后的 profiles 证书， 进行使用校验。

image.png

证书准备完成后， 就可以进行打包了，在 product 中选择 Archive

image.png

会提示要不要新建一个 flow 工作流， 后续的提交或者打包 都可以自动化的进行构建应用。 可以先跳过

build 完成后， 会出现 Archives 窗口， 看到我们的构建产物

image.png

右侧有两个按钮，我们现在第一个 distribute app

image.png

选择第一个

image.png

选择语言, 注意名称不能被别人采用， 需要独一无二， 没问题的话就会开始上传

image.png

不出意外的话会遇到这样的一个报错， 需要上传一个icon， 上传位置在这里， 上传一张图后， 我们继续重复上面的操作

image.png

image.png

上传成功！

然后我们到APP的管理界面 查看 appstoreconnect.apple.com/apps

image.png

然后我们就可以到这个地方进行内容分发了 image.png

测试分发的大致流程是 1、添加测试群组， 将测试人员邀请进入 2、发送安装链接， 测试人员将用 tesfight 进行安装 测试

到此，提供给公司成员进行内部测试的任务就完成了， 下面是简单记录一下，xcode 提供的工作流。

3-4、xcode cloud git flow 使用

使用xcode cloud 进行自动化发布 ， 在项目的 Integrate 选项中， create workflow 工作流 image.png

创作git flow 之前需要先 创建一个 git 仓库

image.png

image.png

App 管理的 xcode cloud flow 工作流就建立好了

image.png

4、安卓开发

4-1 新建项目， 使用webview

创建一个 Empty Activity 作为项目模版

image.png

MainActivity 是入口文件， 启动模拟器会发现文案是在这里进行输出的 image.png

添加webview 一共分为三步

第一步： 修改 MainActivity 在 onCreate 函数下 执行下面的代码

image.png

package com.kalodata.kalodata_android;
import android.os.Bundle
import android.webkit.WebView
import androidx.activity.ComponentActivity

class MainActivity : ComponentActivity() {
    private lateinit var webView: WebView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        webView = findViewById(R.id.webview)
        webView.settings.javaScriptEnabled = true // 启用JavaScript
        webView.settings.domStorageEnabled = true // 启用 DOM 存储 API (这对于一些以 AJAX 技术构建的网页很重要)
        // 加载网页
        webView.loadUrl("https://www.baidu.com")
    }
}

第二步： 在 res 目录下， 新建一个 layout 的目录， 新建 activity_main.xml 的文件， 输入以下代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

第三步： 修改权限

image.png

在app/manifests/AndroidManifest.xml 文件的红色区域输入

 <!--   添加网络权限-->
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

image.png

github代码

安卓套壳一个百度的webview就搞定了， 接下来就是打包上传到谷歌市场

4-2 打包项目

在 build 下 点击 generate signed App xxx image.png

勾选APK

image.png

image.png

创建新的密钥， 勾选记住密码

image.png

勾选release 进行发布

image.png

生成的代码会输出到 app/release app-release.apk 即是安卓可以直接发布的版本

5、 总结

本文总结了ios 和 安卓的大致开发到测试流程， 后续将继续补充发布上架相关的内容， 对于前端来说， 开发起 原生 APP来还是很有挑战的， 一个是文档看了不是很清晰， 语法也不熟悉， 编辑器也是第一次用， 网上找的 文档也时间久远了， 看似东西不多， 实则还是踩了不少坑， 特此记录。

踩坑点， 比如安卓的webview url 在输入百度等网址可以正常显示， 但是输入公司的域名无法显示， 出现白屏， 后面问了一下人， 在代码里加上了 webView.settings.domStorageEnabled = true 解决了问题 比如 ios 的 build 发布不是很顺畅， 比如开始的时候xcode 14 发布失败，要求升级xcode ， 结果xcode 15 又有maxos 要求， 又继续升级， 然后证书认证也比较麻烦， 开始兜兜转转发现是必须管理员才有添加 profiles 的权限能力

avatar
文章
阅读
粉丝