hybird

最新推荐文章于 2024-01-24 16:12:07 发布
最新推荐文章于 2024-01-24 16:12:07 发布
阅读量612 收藏 1
点赞数
分类专栏： 项目开发 文章标签： web vue html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50206068/article/details/109390988
版权

混合开发

什么是混合开发

前端开发(html+css+js)也可以访问设备信息(麦克风，摄像头，通讯录)，也可以开发手机app

目标

把web打包成app

开发方式

web app

网页开发

  • 技术： html5 + css + js(库，框架) 编写移动端
  • 优点：开发周期短，跨平台
  • 缺点：性能一般，默认无法调取设备信息(麦克风，摄像头，通讯录)
  • 场景：手机淘宝，京东，网易
native app

原生手机应用开发、客户端开发

  • 技术：java -> android object-c -> ios
  • 优点：性能高，默认就可以调取设备信息
  • 缺点：开发周期长（迭代慢），团队规模大
hybird app

混合开发，用H5搭建webapp，通过第三方提供的原生（native）库，访问设备信息，之后打包成app

native库从属组合方式输出
cordovaadobeH5+cordova+phonegapapp
wx_jssdk腾讯H5+wx_jssdk，开发出来的是网页web
H5+Dcloudhbuilder + muiapp
reactNative脸书react + reactNativeapp
ionic谷歌民间angular + ionicapp
weex阿里vue + weexapp
跨端开发

前端希望一次开发，到处使用，浏览器里面使用、手机系统里面使用、微信里面使用、支付宝里面使用、扫码使用（快应用)

框架从属组合方式输出
uniappDcloudvue+uniapp+hbuilderXapp/web/小程序(all)
taro京东react+taroapp/web/小程序(all)
mpvue不详vue + mpvue + weexweb/小程序(all)
kbone腾讯vue|react|angular + kboneweb/小程序（微信)

PhoneGap

官网 是个桌面软件，第三方的打包工具，可以搭建开发环境，内部提供 cordova库（访问设备信息)，其他第三方的打包工具: wap2app、 uni-app，

安装

pc端：phonegap desktop，

​ 搭建开发环境， 测试

手端：安卓商城搜索 phonegap developer，ios用户安装包老师copy给你们

​ 用来测试

保证手机和电脑要在同一个网段（保证手机和电脑要在同一个网段(连了同一个wifi，同一路由)

搭建项目环境
  • 打开pc phonegap
  • newproject 新建项目
  • helloworld 选择模板
  • localpath： 选择项目位置
  • name：项目名称|项目目录
  • ID：添写域名
  • create project 创建项目
  • 打开手机端的phonegap，链接 pc端phonegap提供ip

问题： phonegap pc端软件打开卡死,创建项目卡死

解决：phonegap命令行创建项目

npm install -g phonegap@latest
npm install cordova -g  //安装cordova 框架
phonegap serve //运行
开发

使用喜欢的开发工具，打开创建好的项目目录（react|vue)，调用cordova的api

打包到phonegap环境下的www目录,手机端会热刷新

打包到www下面的vue或者react，没有引入cordova的，需要手动引入

白屏问题：vue-cli4打包后index.html引入资源时<script src="js/xx.." ,不可以访问根"/",不然js加载失败，#app的控制失效

打包
命令行打包
npm i cordova -g
cordova build ios | cordova build android     (ipa/apk)
//需要安装个平台jdk环境
在线打包

利用第三方在线生成app办法，完成打包，打包后内容就在线上

  • 代码传到git仓库
    • new repository
    • git clone 仓库
    • 把phonegap项目目录 拷贝到 仓库
    • git add .
    • git commit -m ‘描述信息’
    • git push/wan9alex/14.lo…
  • phonegap 在线打包
  • 登录 adobe id
  • new App
  • 复制git地址
  • pull from git…
  • ready to build

大文件限定

命令行: 配置一次

git config --global http.postBuffer 1048576000

本地仓库目录：.git/config 添加

[http]
	postBuffer = 524288000

然后把缓存清除

git filter-branch --index-filter 'git rm -r --cached --ignore-unmatch <file/dir>' HEAD
cordova

官方文档 第三方文档 中文文档

  • Battery Status 电池信息
    Camera 照相机
  • Contacts 通讯录
  • Device Info 设备信息
  • Device Motion (accelerometer) 重力感应
  • Device Orientation (compass) 罗盘(指南针)
  • Dialogs (notification) 模态框
  • File 文件操作(增删改查)
  • File Transfer 上传
  • Geolocation 地理定位
  • Globalization 全球化
  • InAppBrowser 在app内部开启新窗口
  • Media Capture 采集
  • Network Information 网络状态
  • Splash Screen 欢迎屏幕
  • Status Bar 状态栏
  • Whitelist 白名单
  • Vibration 震动
vue+cordova

指定vue打包位置到phonegap的www

//修改 vue-cli4 下面  public/index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    
    <div id="app"></div>

    <script src="cordova.js" type="text/javascript"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

//配置webpack cli4
//vue.config.js
module.exports = {
	outputDir: '../仓库/www',
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/'
}

//package.json 打包时 --no-clean 不清除dist [可选]
{
  "scripts": {
    "build": "vue-cli-service build --no-clean"
  },
}

  
  //cli2 可配置保存自动打包
//package.json nodemon监听src完成修改-e指定文件后，自动打包
"scripts": {
    "cordova":"nodemon --watch src -e html,vue,js,less build/build.js",
  },

//build/build.js  不清除dist
注释 //rm(..
  		// if (err) throw err
  
 //config/index.js 
{
  build: {
    // 参考模板 输出到目标
    index: path.resolve(__dirname, '../仓库/www'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../仓库'),
}

微信公众号

特点

  • 可以实时推送一些信息
  • 利用微信推广个人(订阅号)，企业(企业号)
  • 微信一些基本功能(摇一摇周边,投票，微信小店,微信支付)
  • 调取设备信息
  • 默认无需编码(商务，业务人员)，除非要定制（公众号开发）

开通

公众平台->注册->留邮箱1->留个微信

管理

wx_jssdk

微信网页开发，利用jssdk提供的api访问手机设备信息，另外还提供一些微信的业务功能，UI是中文习惯，使用微信jssdk是条件的

条件

  • 真实的域名，端口443
  • 开发出来的是网页
  • 通过腾讯的产品进入
  • jssdk是在线包，需要认证才可以链接使用所有功能

配置

  1. 搞个服务器支持443端口
  2. 双端适配(百度云服务端,微信端)
  3. 使用jssdk的API
部署百度云
申请账号

去 百度云 申请账号，登录（百度账号可以直接登录）-> 控制台 ->余额充值100

购买空间

计算->应用引擎BAE->创建应用（仓库) ->创建环境(服务和域名)

配置环境

让版本管理器每次有上传切换到最新版本：环境-》设置-》自动发布打开

代码上传

SVN：右键SVN-checkout 拉取仓库到本地 -> 开发 -> svn-commit -> 开发 -> svn-commit

需要清空保存SVN密码

找到： C:\Users\你的用户名\AppData\Roaming\Subversion\auth

清空当前目录所有

GIT： git clone 拉取仓库作为项目目录-> 开发 -> git add . -> git commit -m xxx -> git push

数据库

购买： 数据库-》RDS|mongodb->创建实例->选择库-》支付

配置：

  1. 数据库->rds->允许公网访问
  2. 数据库->账号管理->创建账号|创建库

关联到应用：为了让百度的应用可以访问数据库

  • ​ 计算->BAE->环境-》设置->创建关联->选择你创建的rds|monodb

访问

php:

$db=@mysqli_connect('mysql公网地址', 'root', 'root123') or @mysqli_connect('localhost', 'root', '');

node:

let mysql = require('mysql');
var connection = mysql.createConnection({
  host     : '网络连接 域名',//主机名
  user     : 'rds配置>账号管理>你创建的账号',//用户
  password : 'rds配置>账号管理>你创建的密码',//密码
  database : 'rds配置>数据库管理>你创建的库'//库名
  port: 网络连接 端口
});
微信公众平台

为了做双端适配，需要在微信公众平台加入一些配置，允许百度服务器可以抓取jsssdk

申请平台账号

进入微信公众平台，注册->订阅号(个人)

双端适配

百度服务端

//提供配置好的文件 上传到服务器

//wx_sample.php    后台验证   define("TOKEN", "bulala");  
//hello world 示例代码    给代码加入开发秘钥

//获取到文件
//wx_sample.php 百度下载到 的校验文件

//hello world 示例代码
//公众平台账号-》开发->开发者工具->开发者文档(API)->微信网页开发->微信js-sdk说明文档->拉到最后 
// https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

微信端

先登录微信公众管理平台，配置token和开发秘钥，指向百度服务里面的token和开发秘钥

方案1：

正式号，实际开发会用到，需要平台账号要经过认证，没有认证， 部分API可用

  1. 拿到开发秘钥: 开发->基本配置
  2. 设置校验文件位置: 开发->基本配置->服务器配置->url: http://uncle9-1847239832.bceapp.com/php/wx_sample.php->token: 自定义与wx_sample对应->随机生成key(一旦生成，请快速提交)
  3. 设置安全域名: 公众号设置->功能设置->JS接口安全域名->填入 百度域名(不含http)-》下载MP_verify_IrzmAOk81zl6E0V3.txt上传至域名下与wx_sample同位置

方案2： 测试号

所有的API可用，但是限于开发和学习，只有管理员和部分信任的微信账号可访问

  1. 生成临时的测试号，通过测试号生成开发秘钥
  2. 公众平台->开发者工具->公众平台测试账号->获取测试秘钥-》填写到hello示例代码>sample.php里面(yourAppID,yourAppSecret)
  3. 设置校验文件位置
http://xx.baidu域名 .com/你指定的目录/wx_sample.php
token: wx_sample.php里面的token
  1. 设置安全域名
xx.baidu域名 .com     //不要加http
调试

线上测试百度域名，生成二维码，手机扫码测试

//失败了
{errMsg:'config,fail'}

//成功
{errMsg:'config,ok'}

//解决 检查 sample.php
jsApiList 数组:	没有使用api，ready里面为空  时

改：jsApiList['']  //ios ok   安卓fail
改2：ready里面加了调用api的代码   //ios ok   安卓ok
使用jssdk的API

文档

vue + jssdk

开发: jssdk的api调用方式，vue事件触发，或者钩子函数触发

测试:

​ npm run build打包，拷贝到 仓库，commit，刷手机

​ 拷贝到 仓库时要 手动合并vue入口index.html到仓库入口index.php

自动合并

//修改 vue 下面  public/index.html 

<?php
require_once "../php/jssdk.php";
// $jssdk = new JSSDK("xx", "xx");//正式号
$jssdk = new JSSDK("wxcfc056111e4f47c2", "660175f98e2f06105ed18b5cfc1b1cc1");//测试号 无限制

$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    
    <div id="app"></div>

    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
      wx.config({
        debug: true,//调试模式，在手机看到信息（正确，错误)
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
          // 所有要调用的 API 都要加到这个列表中
          'chooseImage','scanQRCode','onMenuShareTimeline','onMenuShareAppMessage'
        ]
      });

    </script>
    <!-- built files will be auto injected -->
  </body>
</html>

  
  
//配置webpack
//vue.config.js  cli3/cli4
module.exports = {
  indexPath: 'index.php',  //打包vue/public/html->php
	outputDir: '../svn|git仓库地址',//指定打包到jssdk仓库目录
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/'
}

//package.json 打包时 --no-clean 不清除dist
{
  "scripts": {
    "build": "vue-cli-service build --no-clean"
  },
}


//cli1/2 可配置保存自动打包
//package.json nodemon监听src完成修改-e指定文件后，自动打包
"scripts": {
    "jssdk":"nodemon --watch src -e html,vue,js,less build/build.js",
  },

//build/build.js  不清除dist
注释 //rm(..
  		// if (err) throw err
  
 //config/index.js 
{
  build: {
    // 参考模板 输出到目标
    index: path.resolve(__dirname, '../仓库/index.php'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../仓库'),
}
太阳与我肩并肩
关注
专栏目录
全局路径规划之4.4：hybird A*算法（附C++代码）
qq_35635374的博客
04-28 340
认知有限，望大家多多包涵，有什么问题也希望能够与大家多交流，共同成长！本文先对hybird A算法、Kinodynamic A算法做个简单的介绍，具体内容后续再更，其他模块可以参考去我其他文章提示：以下是本篇文章正文内容规划用hybrid a 星（改成了rs曲线），hybrid A*的启发函数有两个，通过切换更好的引导启发效果！（1）hybrid a*算法探索出来的是圆弧和直线连接的局部路径，后端经过轨迹优化后更加平滑了算法是在A。
hybird简介以及安卓应用hybird初体验
JUSTYiSheng的博客
05-24 6565
hybird简介：        有一篇文章写的很好，有兴趣的同学可以去看一下hybird app        如今app应用大概分三种：        1、原生app    顾名思义是纯原生写出的app        2、web app   顾名思义是web写出的app        3、hybird app 原生+web写出的apphybird app 用通俗的话来解释就是web运行在app...
hybird简介
weixin_34130389的博客
05-26 492
hybird是客户端与前端的混合开发 hybird存在的核心意义在于快速迭代，无需审核 弊端就是需要前端，后端一起联调修改 转载于:https://www.cnblogs.com/Aaron1Tall/p/10926260.html...
Hybird
eof.guo的博客
06-21 649
浅谈Hybrid技术的设计与实现 http://www.cnblogs.com/yexiaochai/p/4921635.html
hybird命令
weixin_55609833的博客
03-14 3376
这里写目录标题hybird命令作用心法口诀命令 hybird命令 作用 Hybrid接口：既有access接口功能，也有trunk接口功能。 不需要借助任何设备就可以实现跨vlan功能。 需要tagged或untagged方式加入某个vlan或者多个vlan。 心法口诀 数据帧出口检查:查untag表， 有标时，脱标;无标时，查tag表，有则放通，无则丢掉。 数据帧进口检查:先查有无标签，有标时，查tag表，有则放通，无标则丢弃; 无标时，打上PVID后，放通。 命令 ...
Hybird 放大器介绍
10-20
Hybird放大器是一种将拉曼放大器（Raman Amplifier, RFA）和掺铒光纤放大器（Erbium-Doped Fiber Amplifier, EDFA）两种不同技术结合的放大器，它能够有效地提高系统的信噪比（OSNR），并提升100G传输系统的性能指标...
融合Hybird Web APP应用的云应用开发模型的设计与实现.pdf
08-26
【标题】和【描述】提及的是一个关于"融合Hybird Web APP应用的云应用开发模型的设计与实现"的研究，这涉及到现代移动互联网技术的发展以及如何将传统的Web应用转化为跨平台的云服务。在这个过程中，开发者需要面对...
Hybird 放大器介绍.pdf
09-05
根据提供的文件内容，Hybird放大器（Hybrid Amplifier，HYFA）是结合了拉曼放大器（Raman Amplifier，RFA）和掺铒光纤放大器（Erbium-doped Fiber Amplifier，EDFA）的技术特点，形成了具有低噪声指数和高增益的放大...
Hybird混合学习框架
01-30
混合学习框架是一种结合了原生应用(NativeApp)和网页应用(WebApp)开发模式的技术方案，它允许开发者在一个统一的架构下整合多种技术的优点，以应对不同场景的移动应用开发需求。混合学习框架特别适合对混合开发模式...
android-hybird（一）
jianpan_zouni的博客
10-19 249
hybird混合开发是现在应用开发中非常常见的 1.成本低，展示丰富 有些公司的产品刚刚开始可能甚至只投入后h5的应用，也就是你打开应用，都是h5页面。为什么呢，成本低啊 2.h5展示，更新方便 h5真是的web页面，是后台推送来的数据，由服务器随时更新，而应用端不用关心他的变化 3.实际需要 比如淘宝，京东，滴滴页面都有h5部分，都是混合开发，还有各种广告，都是web 但是纯的h5...
eNSP 配置交换机三种端口链路类型：Access、Trunk、Hybird
鱼丸丶粗面
08-15 8178
eNSP 配置交换机三种端口链路类型：Access、Trunk、Hybird
1.hybird、VLAN基本概念
qq_41116260的博客
11-08 2654
1.hybird、VLAN基本概念
Cordova + Vue创建Hybird App
qq_15506265的博客
06-17 271
Cordova + Vue创建Hybird App Cordova介绍 Cordova是由Apache 基金会支持的使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架。其支持调用手机系统（Android、IOS、Windows phone）原生 API，它可以将你写的 Web 程序包裹进原生的 APP 壳中，也就是我们常说的 Hybrid APP （混合应用）。本文是一个前端开发者如何从 0 开始结合 Vue 来构建一个简单的 APP 环境介绍 nodeJs V10.3.
[Hybrid App]--Android混合开发,Android、Js的交互
weixin_30696427的博客
03-28 204
AndroidJs通信 Hybird App Hybrid 开发：JsBridge - Web 和客户端的桥 Hybrid开发中，web页面往往会跟native进行交互，而JSBridge就是web页面和native进行通信的桥梁，通过JSBridge可以实现web调用native的方法，native可以通过webview.loadUrl之类的方法，将javascript:xxx代码...
Hybird开发之webview
Dovar_66的博客
06-04 545
为什么打开一个 H5 页面会有一长段白屏时间？因为它做了很多事情，大概是： 初始化 webview -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 -> dom 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片 一般页面在 dom 渲染后才能展示，可以发现，H5 首屏...
eNSP学习——理解交换机Hybird接口的应用
最新发布
TXFBAP的博客
01-24 2496
1、掌握配置Hybrid接口的方法； 2、理解Hybrid接口处理Untagged数据帧过程； 3、理解Hybrid接口处理Tagged数据帧过程； 4、理解Hybrid接口的应用场景。
Hybird-App之选择器详解(二)
Dwyane_Coding
01-01 379
Hybird App之选择器详解(一) 学习混合app开发，要学会一些基础才能上手。本文主要介绍ID选择器、属性选择器、后代选择器、子元素选择器，其中ID选择器和属性选择器较为常用 ID选择器详解1、ID选择器： ID选择器类似于类选择器；不过也有一些重要差别 例如： #id{} index.html<!DOCTYPE html> <html lang="en"> <head>
Hybird热更预研汇总（0.8.0）
qq_40833062的博客
03-23 701
HybridCLR接入Unity总结
ensp hybird
09-15
Hybird是一种端口链路类型，它可以同时支持access和trunk两种模式。在Hybird模式下，一个接口可以允许通过多个VLAN。它通常用于连接交换机与交换机之间的链路。配置Hybird接口时，需要使用相应的命令进行配置。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值