web混合开发

最新推荐文章于 2025-11-27 19:38:45 发布
原创 最新推荐文章于 2025-11-27 19:38:45 发布 · 646 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web混合开发

//web综合题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>购物车</title>
        <script type="text/javascript" src="anglar/angular.js" ></script>
        <script>
            var app=angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                $scope.products=[{
                    id:80,
                    name:"iphone",
                    price:5400,
                    state:false
                },{
                    id:290,
                    name:"ipad",
                    price:1420,
                    state:false
                },{
                    id:500,
                    name:"ipad air",
                    price:2340,
                    state:false
                },{
                    id:910,
                    name:"imac",
                    price:15400,
                    state:false
                },{
                    id:1200,
                    name:"ipad mini",
                    price:2200,
                    state:false
                }];
                //排序
                $scope.selOrder;
            //下拉菜单过滤商品价格范围
                $scope.productPrice = "--请选择--";
                $scope.isShow = function(price) {
                    if($scope.productPrice == "--请选择--") {
                        return true;
                    } else {
                        var priceArr = $scope.productPrice.split("-");
                        var min = priceArr[0];
                        var max = priceArr[1];
                        if(price < min || price > max) {
                            return false;
                        } else {
                            return true;
                        }
                    }
                }

                /*删除*/
                $scope.delete=function(name){
                    var con=confirm("是否删除？");
                    if(con==true){
                        for(i in $scope.products){
                            if(name==$scope.products[i].name){
                                $scope.products.splice(i,1);
                            }
                        }
                        alert("删除成功");
                    }
                }
                //全选，全不选
                $scope.selectAll=false;
                $scope.selectAllFun=function(){

                    if($scope.selectAll){
                        for(index in $scope.products){
                            $scope.products[index].state=true; 
                        }
                    }else{
                            for(index in $scope.products){
                            $scope.products[index].state=false; 
                        }
                    }
                }   
                //反选
                $scope.checkSelectAll = function() {
                    var a = 0;
                    for(index in $scope.products) {
                        if(!$scope.products[index].state) {
                            $scope.selectAll = false;
                        } else {
                            a++;
                        }
                        if(a == $scope.products.length) {
                            $scope.selectAll = true;
                        } else {
                            $scope.selectAll = false;
                        }
                    }
                }
                //批量删除
                $scope.delSelect = function() {
                    var arr = [];
                    for(index in $scope.products) {
                        if($scope.products[index].state) {
                            arr.push($scope.products[index].name);
                        }
                    }

                    if(arr.length <= 0) {
                        alert("请先选择删除项");
                    } else {
                        if(window.confirm("确定删除吗？")) {
                            for(index in arr) {
                                for(index2 in $scope.products) {
                                    if(arr[index] == $scope.products[index2].name) {
                                        $scope.products.splice(index2, 1);
                                    }
                                }
                            }
                        }
                    }
                }

                //添加
                $scope.hidden=false;
                $scope.add=function(){
                    if($scope.hidden){
                        $scope.hidden=false;
                    }else{
                        $scope.hidden=true;
                    }
                }
                $scope.newId="";
                $scope.newName = "";
                $scope.newPrice = "";
                $scope.addProduct=function(){
                        if($scope.newName == "" || $scope.newName == null) {
                        alert("id不能为空");
                    } else if(isNaN($scope.newPrice)) {
                        alert("价格格式不正确")
                    } else if($scope.newId < 0 || $scope.newId > 150) {
                        alert("输入的id不正确")
                    } else {
                    alert($scope.newName);
                    var newProduct={
                            id:parseInt($scope.newId),
                            name:$scope.newName,
                            price:parseInt($scope.newPrice),

                    };
                    $scope.products.push(newProduct);
                }
            }
            //修改
                $scope.updateShow=false;
                $scope.updateId="";
                $scope.updateName = "";
                $scope.updatePrice = "";
                $scope.updateShowFun=function(bg){                 
                    $scope.updateShow = true;
                    $scope.formShow = false;
                    $scope.updateId=bg.id;
                    $scope.updateName = bg.name;
                    $scope.updatePrice = bg.price;
                }
            $scope.updateSub=function(){
                    if($scope.updateName=="" || $scope.updateName==null){
                        alert("产品名称为空");
                    }
                    if($scope.updatePrice=="" ||  $scope.updatePrice==null){
                        alert("产品价格为空");
                    }else if(isNaN($scope.updatePrice)){
                            alert("产品价格不是整数");
                    }
                    //验证不满足

                        for(index in $scope.products) {
                            if(parseInt($scope.updateId) == $scope.products[index].id) {
                                $scope.products[index].name = $scope.updateName;
                                $scope.products[index].price = $scope.updatePrice;
                                $scope.updateShow = false;
                            }
                        }

            }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <center>
                <h3>购物车</h3>
        <input type="text" placeholder="产品名称"  ng-model="search"/>产品价格
        <select ng-model="productPrice">
            <option>--请选择--</option>
            <option>0-2000</option>
            <option>2001-3000</option>
            <option>3001-4000</option>
            <option>4001-5000</option>
            <option>5001-6000</option>
            <option>6001-7000</option>
            <option>7001-8000</option>
            <option>8001-无穷大</option>           
        </select>
        <select ng-model="selOrder">
            <option value="">--排序方式--</option>
            <option value="id">id正序</option>
            <option value="-id">id逆序</option>
            <option value="price">价格正序</option>
            <option value="-price">价格逆序</option>        
        </select>
        <button ng-click="delSelect()">批量删除</button><br /><br />
        <table border="1px soild #000" cellpadding="10" cellspacing="0">
            <tr>
                <th>
                    <input type="checkbox"  ng-model="selectAll" ng-click="selectAllFun()"/>
                </th>
                <th>产品编号</th>
                <th>产品名称</th>
                <th>产品价格</th>
                <th>操作</th>
            </tr>
            <tr ng-repeat="bg in products | filter:{'name':search} | orderBy:selOrder"  ng-show="isShow(bg.price)">
                <td><input type="checkbox"  ng-model="bg.state" ng-click="checkSelectAll()"/></td>
                <td>{{bg.id}}</td>
                <td>{{bg.name}}</td>
                <td>{{bg.price}}</td>
                <td><button ng-click="delete(bg.name)">删除</button><button ng-click="updateShowFun(bg)">修改</button></td>
            </tr>
        </table><br />
        <button ng-click="add()">添加新产品</button>
            <div ng-show="hidden" style="width: 300px;" >
                <h3>添加商品</h3>
                产品编号：<input type="text" placeholder="请输入商品编号" ng-model="newId"/><br /><br />
                产品名称：<input type="text" placeholder="请输入商品名称" ng-model="newName"/><br /><br />
                产品价格：<input type="text" placeholder="请输入商品价格" ng-model="newPrice"/><br /><br />         
                <button ng-click="addProduct()">保存</button>
            </div>
            <!--修改    -->
                <div ng-show="updateShow" style="width: 300px;" >
                <h3>修改信息</h3>
                产品编号：<input type="text" placeholder="请输入商品编号" ng-model="updateId" disabled="disabled"/><br /><br />
                产品名称：<input type="text" placeholder="请输入商品名称" ng-model="updateName"/><br /><br />
                产品价格：<input type="text" placeholder="请输入商品价格" ng-model="updatePrice"/><br /><br />          
                <button ng-click="updateSub()">提交</button>
            </div>
        </center>
    </body>
</html>
混合开发
qq_45271323的博客
04-08 2569
混合开发三类App: 一. NativeApp(原生APP) ​ 纯工具类APP ​ 特点？ ​ 开发：由Native人员进行开发的 安卓（Android） 苹果（IOS） ​ 语言：Android(Java+XML) IOS（Objective-c / Swift + XML） ​ 更新维护：版本更新、打补丁包 都得需要用户从app store里面进行下载 ...
关于混合开发
qq_45335911的博客
10-08 1873
app原生开发与app混合开发有什么区别？ 一、app原生开发 原生开发（Native App开发），在Android、IOS等移动平台上利用提供的开发语言、开发类库、开发工具进行App软件开发，比如Android是利用Java、Eclipse、Android studio；IOS是利用Object—C和Xcode进行开发。 优点： 可访问手机所有功能（如GPS、摄像头等）、可实现功能齐全。 运行速度快、性能高，有绝佳的用户体验。 支持大量图形和动画，不卡顿，反应快。 兼容性高，每个代码都经过程序员精心设
Android H5+原生应用混合开发方案
最新发布
ZouZou的专栏
11-27 976
摘要：Android H5+原生混合开发结合了原生应用的高性能和H5应用的跨平台优势，适用于电商、资讯等需要快速迭代的应用。其核心是WebView组件实现双向通信，支持三种交互方式：JS接口注入、URL拦截和JS弹窗拦截。开发模式包括原生主导、H5主导和混合模式（集成小程序）。关键技术涉及WebView优化、统一通信协议设计、权限管理和离线包机制。通过合理的模块划分、性能优化和安全防护，该方案能有效平衡开发效率与应用质量，适合跨平台需求强烈且需调用原生能力的场景。
android web混合开发 混合开发实例——JS与Java的交互
一名屌丝程序员的秘密花园
06-22 3070
今天说说安卓混合开发。  曾经有一个话题是web终会一统app，然后我们看到随着时间的推移。web越来越强大（H5啊，js各种框架啊），但同时原生app也在不断发展。  或许在将来还会再有这种话题论战，但目前，混合开发，结合web和原生app二者各自的优势，已经是众望所归了。 其中最常见的一种方式，在安卓的webview中嵌套web，通过各类设计，让二者进行交互。使得用户体验上几乎无法分
WEB开发者之混合开发APP（一），概述
KnuthZ的博客
06-24 1059
        WEB开发者，直接入手app原生开发的门槛较高，但是找到优秀的app混合开发工具，再加上详细丰富的文档说明，则可以相对容易的开发出高质量的app，性能堪比原生app性能。        开发工具来自dcloud官网，http://www.dcloud.io/index.html        开发工具叫Hbuilder，飞速编码的极客工具。技术规范采用HTML5 Plus规范。通过...
2024年最新Qt与Web混合开发：实现双向通信_qt与web交互(2)，2024年最新物联网嵌入式开发中高级面试题
2401_85012467的博客
05-14 609
QWebChannel填补了C++应用程序和HTML/JavaScript应用程序之间的空白。通过将QObject派生对象发布到QWebChannel并在HTML中引用qwebchannel.js脚本。在HTML端，可以透明地访问QObject的属性、公共槽和方法。无需手动传递消息和数据序列化，C++方面的属性更新和信号发射将自动传输到可能远程运行的HTML客户机。在客户端，将为任何发布的C++ QObject创建JavaScript对象。它镜像C++对象的API，因此可以直观地使用。
基于Qt框架的综合性开发示例与功能模块集合-包含网络编程图表绘制数据库操作样式美化绘图功能图形视图框架OpenGL开发Web混合开发多线程并发编程以及地图功能开发等.zip
11-04
Web混合开发方面，集合提供了在Qt应用程序中嵌入网页内容的示例，这些示例演示了如何利用Qt的Web引擎类，如QWebEngineView，实现丰富的Web交互功能。 多线程并发编程是提升应用程序性能的关键技术之一，集合中的...
Qt与Web混合开发：实现双向通信_qt与web交互
2401_85013983的博客
05-17 629
/ 发送信号到Qt。
2024年物联网嵌入式最新Qt与Web混合开发：实现双向通信_qt与web交互(1)，近期想跳槽的程序员必看
2401_85012088的博客
05-14 517
/ 发送信号到Qt。
一套PYQT-web混合开发的NATIVE框架
weixin_44247218的博客
04-30 3977
PYQT_VUE_NATIVE框架 介绍 数据交互方式: QWebChannel，web框架: vue-element-admin，QT框架 QWebEngineView web框架 通过QWebChannel封装的组件 调用QT程序, QT 通过信号返回给前端。 通过此框架，前端与PYQT的交互会非常简单!，可以轻易的进行混合开发 项目地址 QT端pyqt_vue_native，下载后可直接运行main.py，web页面已打包进去了 web端pyqt-vue 开发模式和流程 组件式的开发 结构如下
鸿蒙开发中怎么和web混合开发
07-05
在 HarmonyOS 中实现混合开发（Hybrid Development）是一种结合原生应用和 Web 应用的开发模式，能够充分发挥两者的优势。通过集成 Web 技术，开发者可以在鸿蒙系统中构建具有动态内容、跨平台兼容性和灵活更新能力...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值