# swift_5_0

**Repository Path**: xuan1206/swift_5_0

## Basic Information

- **Project Name**: swift_5_0
- **Description**: 顺风速达项目5.0版本
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-07
- **Last Updated**: 2025-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

WebView混合开发
1.什么是混合开发
    鸿蒙：ArkTs原生开发语言解决问题
    Web前端：html/js/css 框架 vue react angular
    鸿蒙+web前端：解决问题，混合开发
    鸿蒙提供网页容器用来容纳h5所实现的html页面和js渲染，本质上就相当于在我们的app应用中存在一个浏览器，我们需要将访问的地址放置到
    webview的网页容器中，这就混合开发。


2.混合开发中web组件的使用

    import { webview } from '@kit.ArkWeb';
    Web({
        src: "https://www.bilibili.com" 或者放一个本地网页 $rawfile("demo.html"),
        controller: new webview.WebviewController()
    })
    .width("100%")
    .layoutWeight(1)

3.混合开发中2中通信方式
   3.1 通过端口通信模式：可以分配2个端口，网页端一个，鸿蒙端一个
    1.分配端口
       a、鸿蒙中创建端口，并分配其中一个给网页
        createPorts() {
            //1.创建通信端口
            this.currentPorts = this.controller.createWebMessagePorts()
            //2.分配端口
            if (this.currentPorts.length) {
              //将创建的第二个端口分配给网页
              this.controller.postMessage("trans_port", [this.currentPorts[1]], "*")
            }
          }
         什么时候调用该方法呢？web组件加载完网页后调用创建端口的方法
            Web({
                ...
               })
                ...
                 .onPageEnd(() => {
                   this.createPorts()
                 })
        b、网页中接收端口
        <script>
            var currentPort
            //给窗体添加一个message事件监听
            window.addEventListener("message", (event)=>{
                if(event.data=="trans_port"){
                    currentPort = event.ports[0] //接收鸿蒙端分配的端口
                    if(currentPort){
                        alert("获取"+currentPort+"成功！")
                    }
                }
            })
        </script>

    2.双方通信
        a、网页发送数据给鸿蒙端
            <button onclick="sendMessage()">发送一个数据给网页</button>
            function sendMessage(){
                if(currentPort){
                    currentPort.postMessage(JSON.stringify({type:"alert", message:"我是网页中的数据"}))
                }
            }

           在鸿蒙端添加消息监听
            createPorts() {
               //1.创建通信端口
               this.currentPorts = this.controller.createWebMessagePorts()
               //2.分配端口
               if (this.currentPorts.length) {
                 //将创建的第二个端口分配给网页
                 this.controller.postMessage("trans_port", [this.currentPorts[1]], "*")

                 //通过留下来的这个端口接收网页数据
                 this.currentPorts[0].onMessageEvent((result: webview.WebMessage) => {
                   if (typeof result === "string") {
                     const data = JSON.parse(result) as DataResult
                     if (data.type == "alert") {
                       promptAction.showToast({ message: data.message })
                     }
                   }
                 })
               }
             }

        b、鸿蒙端发送数据给网页端
            1.鸿蒙端发送数据
             sendMessage() {
                this.currentPorts[0].postMessageEvent("我是鸿蒙端的数据")
              }
             Button("原生组件")
                 .onClick(() => {
                   //promptAction.showToast({ message: "原生提示" })
                   this.sendMessage()
                 })
            2.网页端接收数据
            //给窗体添加一个message事件监听
            window.addEventListener("message", (event)=>{
                if(event.data=="trans_port"){
                    currentPort = event.ports[0] //接收鸿蒙端分配的端口
                    if(currentPort){
                        currentPort.onmessage=(event)=>{
                            document.querySelector("#myDiv").innerText = event.data
                        }
                    }
                }

            })


   3.2 调用方法方式传值
    1.网页端调用鸿蒙端方法
        a、先在鸿蒙端将方法描述清楚
        Web({
               src: $rawfile("demo2.html"),
               controller: this.obj.controller
             })
               .width('100%')
               .layoutWeight(1)
               .javaScriptProxy({
                 name: "atstudy", //定义一个名称，可以任意
                 object: this.obj, //方法的对象
                 methodList: ["openPhoto"], //方法名
                 controller: this.obj.controller //控制器
               })
        b、网页端调用方法
             window.atstudy.openPhoto()
    2.鸿蒙端调用网页端方法
        a、在网页端定义方法
            function setPhoto(url){
                document.querySelector("#myImg").src=url
                document.querySelector("#myDiv").innerText=url
            }
        b、鸿蒙端调用方法
            this.controller.runJavaScript(`setPhoto('${result.photoUris[0]}')`)

二、项目架构
APP/HAP/HSP/HAR
APP:是一个应用
    HAP:应用安装和运行的基本结构，包括代码、资源、第三库、配置文件，entry/feature
    HSP、HAR:共享包
        HSP:动态共享包，包括代码、资源和配置文件，一般作为HAP的依赖项，运行时与应用在同一个进程中
        HAR:静态共享包，包括代码、资源和配置文件，一般作为HAP的依赖项，打包构建时，HAR的编译产物会被放入HAP中，作为HAP的一部分
            HAR还可以作为第三方库发布OHPM中共大家使用

三、项目签名
配置能够发布应用的签名：需要4中类型的配置文件p12、p7b、cer、csr
1.申请秘钥和证书请求文件，生成一个*.p12的文件，请求文件就是csr文件，包括秘钥对中详细信息
       申请秘钥需要配置文件名及密码：swift.p12, 密码：swift123456,别名为：swift
2.申请发布证书（申请调试证书）
        生成成功后，需要下载本地  *.cer
3.申请发布Profile
        生成成功后，也需要下载本地  *.p7b
4.配置签名
        有些场景还需要给当前项目添加公钥指纹,然后在entry模块下的module.json5文件中添加client_id


5.编译打包
6.上架

四、性能问题
    1、布局的优化\渲染性能优化
        减少组件的节点数，合理使用布局容器组件
        使用@Builder替代自定义组件
        控制渲染的范围，长列表的优化:List优化、Grid优化【ColumnStart,ColumEnd】、瀑布流优化【WaterFlow】：LazyForEach
        组件复用， id

    2、感知的优化
        转场动画、导航转场【Navigation\router】
    3、运行性能
        并发能力，多线程的使用，TaskPool、Worker线程的使用
        图片上传不需要全用原图节省资源，上传图片时先进行图片压缩然后再上传
        1.建立多线程-子线程
        2.将主线程拿到图片，然后给子线程
        3.子线程进行图片的压缩
        4.压缩完成后，将完成的图片给主线程
        5.子线程关闭销毁
        6.主线程继续完成上传操作

五、毕业项目
    1、自选题材：
                https://www.axureshop.com/
                https://js.design
        案例1：https://www.axureshop.com/ys/2319227
        案例2：https://js.design/v?i=ZFEixv&p=VdGWIn41JR&f=0eFRuSdMrRgEdJ8S7uT81&wi=true&box=14pm&scale=fit&mode=programmer

    2、要有完整的业务功能
        要做相关应用的行业背景参考，尽可能有对应app的使用经验【搜索对应的app、微信小程序】，能够走通一条业务线

    3、最好结合个人实际情况选题
        专业、工作背景

    4、完成项目后需要准备一个ppt，主要介绍项目的背景、业务功能和使用的技术及总结！

    5、完成后将项目和ppt一起打包发给我！！！

    注：计划时间2周，如何情况特殊情提前说明！
   80% 做鸿蒙的适配工作！