混合开发问题

已于 2022-03-21 15:20:39 修改
阅读量268 收藏 1
点赞数
分类专栏： 移动端 文章标签： javascript
于 2022-01-17 08:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37296026/article/details/122189644
版权

样式适配问题

在这里插入图片描述
同一页面，同一元素，展示出左右2中形态（华为mate30pro设备分辨率1176*2400，宽度单位使用的rem）。

大家思考下，为什么会有这个问题？

引申一下

像素分类：设备像素和CSS像素

  1. 设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的
  2. CSS像素(CSS pixels): 又称为逻辑像素，是为web开发者创造的，在CSS和javascript中使用的一个抽象的层
  3. 每一个CSS声明和几乎所有的javascript属性都使用CSS像素，因此实际上从来用不上设备像素 。

在桌面端，css的1个像素往往都是对应着电脑屏幕的1个物理像素。

​
手机端，由于屏幕尺寸的限制，缩放是经常性的操作。

缩小操作时，一个设备像素覆盖了多个CSS像素

放大操作时，一个CSS像素覆盖了多个设备像素

​ 不论缩小或放大，元素设置的CSS像素(如width:300px)是始终不变的，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的。

在HTML中不得不提到viewport，经常会设置viewport的width=device-width，那这个device-width的值是多少呢？

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>　　

​ 在iphone5下device-width=320，iphone6下是375，iphone6+下是414。

DPR:

	设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值

dpr，也被成为device pixel ratio，即物理像素与逻辑像素的比，那也就不难理解：iphone6下dpr=2，iphone6+下dpr=3（考虑的是栅格化时的像素，并非真实的物理像素;
在这里插入图片描述

问题原因：

​ 由于华为浏览器版本问题，低版本华为浏览器支持最小像素为12px，高版本则无限制。

如何规避类似问题：

​ 采用postcss-pxtorem 和 flexible
​ postcss-pxtorem作用：将px转换为rem
flexible 作用：计算根font-size （flexible.js ）

postcss-pxtorem使用方法：

main.js中
// 引入 flexible 用于设置 rem 基准值
import 'lib-flexible/flexible.js';
.postcssrc.js配置
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 117.6;（width/10）
      },
      "propList": ['*'],
　　  "selectorBlackList": ['.norem']　　// 过滤掉 .norem 开头的 class，不进行转换
    }
  }
}

1px 边框（vant）

<!-- 上边框 --> 
<div class="van-hairline--top"></div>
移动端1px实现方案( https://zhuanlan.zhihu.com/p/100752129 )

性能优化

路由懒加载

一、定义

​ 懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

二、写法

常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import

未懒加载写法：import index from '@/pages/index/index.vue';
懒加载写法1：const index = () => import('@/pages/index/index.vue');
	routes: [
    {
      path: '/',
      name: 'index',
	  component：index
	}]
懒加载写法2
	routes: [
    {
      path: '/',
      name: 'index',
      component: resolve=>(require(["@/pages/index/index.vue"],resolve))
    }]
三、打包后区别

未做懒加载dist包中js文件夹
在这里插入图片描述
修改为懒加载dist包中js文件夹
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-se2SOEwe-1640224085403)(C:\Users\0oo0\Desktop\技术分享\懒加载.jpg)]

图片压缩（https://tinypng.com/）

开启gzip

一、配置

config/index.js/productionGzip: true （打包效果如上图）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d6aC5y2e-1640224085403)(C:\Users\0oo0\Desktop\技术分享\开启gzip.jpg)]

二、效果

在这里插入图片描述
在这里插入图片描述
​ 当 HTML 文档解析完成就会触发 DOMContentLoaded，而所有资源加载完成之后，load事件才会被触发。 jQuery 中经常使用的 $(document).ready(function() { // …代码… }); 其实监听的就是 DOMContentLoaded 事件，而 $(document).load(function() { // …代码… }); 监听的是 load 事件。

三、使用安卓壳cdr缓存

在这里插入图片描述
在这里插入图片描述

组件按需加载

一、vant按需加载

在这里插入图片描述

二、echarts按需加载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pbvRgKC1-1640224085405)(C:\Users\0oo0\Desktop\技术分享\echarts1.jpg)]
main.js中
在这里插入图片描述

使用cdn缓存(网络限制未使用)

一、资源引入

在index.html中，添加CDN资源，例如bootstrap上的资源：

 <body>
	<div id="app"></div>
	<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
</body>
二、添加配置

在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入，如下：

module.exports = {
	entry: {app: './src/main.js'},
	externals:{'vue': 'Vue','vue-router': 'VueRouter'}
}
三、去掉原有的引用

去掉import、去掉Vue.use(XXX)等如：

// import Vue from 'vue'
// import Router from 'vue-router'
// Vue.use(Router)

交互优化

一、增加超时时间

ajax.js中，

ajax.defaults.timeout = 10000;

二、增加超时提示

ajax.js后置拦截器error中,增加

	if (error && error.stack.indexOf('timeout') > -1) {
       		Toast.fail({message: '连接超时，请检查你的网络'});} 
		else if (error && error.stack.indexOf('Network Error') > -1) {        
			Toast.fail({ message: '当前网络不可用，请检查你的网络'});    
	}

weixin-js-sdk用法

npm i -S weixin-js-sdk

使用

//引入
import wx from 'weixin-js-sdk';
//请求接口获取jsapi_ticket
const params = {
    //当前页面url
    url:location.href.split('#')[0],
    //随机字符串
    noncestr:Math.random().toString(36)
    .substr(2, 15),
    //时间戳
    timestamp:parseInt(new Date().getTime() / 1000)
};
//接口返回票据后注册
   wx.config({
       debug: false,
       appId: 'wld341060039',
       timestamp:params.timestamp,
       nonceStr: params.noncestr,
       signature: res.ticket,
       //注册事件 选择照片/拍照  获取本地照片数据
       jsApiList: ['chooseImage', 'getLocalImgData']
   	});
    // 通过ready接口处理成功验证
    wx.ready(function () {
        console.log(666);
    });
    // 通过error接口处理失败验证
    wx.error(function (res) {
        console.log('error', res);
    });
    // 判断当前客户端版本是否支持指定JS接口
    wx.checkJsApi({
        // 需要检测的JS接口列表，所有JS接口列表见附录2,
        jsApiList: ['chooseImage', 'getLocalImgData'],
        success: function (res) {
            console.log(res);
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
	});

拍照或从手机相册中选图接口

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    quality: 0.8, //压缩质量，范围0～1，数值越小，质量越低，压缩率越高（仅对jpg有效）
    success: function (res) {
    	// 返回选定照片的本地ID列表（绝对路径），localId可以作为img标签的src属性显示图片
   		 var localIds = res.localIds; 
    }
});

获取本地图片接口

wx.getLocalImgData({
    localId: '', // 图片的localID
    success: function (res) {
    //localData是图片的base64数据，可以用img标签显示
    let localData = res.localData;
    //ios与安卓兼容问题
    if (localData.indexOf('data:image') != 0) {
        // 判断是否有这样的头部
        localData = `data:image/jpeg;base64,${localData}`;
        }
        localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg'); 
    }
});

ios压缩图片问题

图片压缩方法
 cutImageBase64(base64, w, callback) {
      const newImage = new Image();
      let quality = 0.6; // 压缩系数0-1之间
      newImage.src = base64;
      newImage.setAttribute('crossOrigin', 'Anonymous'); // url为外域时需要
      let imgWidth, imgHeight;
      newImage.onload = function () {
      imgWidth = this.width;
      imgHeight = this.height;
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      if (Math.max(imgWidth, imgHeight) > w) {
          if (imgWidth > imgHeight) {
                  canvas.width = w;
                  canvas.height = w * imgHeight / imgWidth;
              } else {
                  canvas.height = w;
                  canvas.width = w * imgWidth / imgHeight;
              }
          } else {
              canvas.width = imgWidth;
              canvas.height = imgHeight;
              quality = 0.6;
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
      let base64 = canvas.toDataURL('image/jpeg', quality); // 压缩语句
      // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
      while (base64.length / 1024 > 150) {
          quality -= 0.01;
          base64 = canvas.toDataURL('image/jpeg', quality);
      }
      // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
      while (base64.length / 1024 < 50) {
          quality += 0.001;
          base64 = canvas.toDataURL('image/jpeg', quality);
      }
      	// 必须通过回调函数返回，否则无法及时拿到该值
      	callback(base64);
      };
  }
使用压缩图片
this.cutImageBase64(base64, 700, this.uploadImgbas);
压缩后的数据
uploadImgbas(base64) {	console.log(base64)}
ios注意事项

在IOS中，canvas绘制图片是有两个限制的：
  首先是图片的大小，如果图片的大小超过两百万像素，图片也是无法绘制到canvas上的，调用drawImage的时候不会报错，但是你用toDataURL获取图片数据的时候获取到的是空的图片数据。
  再者就是canvas的大小有限制，如果canvas的大小大于大概五百万像素（即宽高乘积)的时候，不仅图片画不出来，其他什么东西也都是画不出来的。
  应对上面两种限制，我把图片宽度、高度压缩控制在1000px以内，这样图片最大就不超过两百万像素了。在前端开发中，1000px*1000px基本可以满足绝大部分的需求了。当然了还有更完美的瓦片式绘制的方法，我们这里就说瓦片式绘制方法了。
  如此一来就解决了IOS上的两种限制了。

除了上面所述的限制，还有两个坑，一个就是canvas的toDataURL是只能压缩jpg的，当用户上传的图片是png的话，就需要转成jpg，也就是统一用canvas.toDataURL(‘image/jpeg’, 0.5) ， 类型统一设成jpeg，而压缩比就自己控制了。

另一个就是如果是png转jpg，绘制到canvas上的时候，canvas存在透明区域的话，当转成jpg的时候透明区域会变成黑色，因为canvas的透明像素默认为rgba(0,0,0,0)，所以转成jpg就变成rgba(0,0,0,1)了，也就是透明背景会变成了黑色。解决办法就是绘制之前在canvas上铺一层白色的底色。

没理由的花呗
关注
专栏目录
混合开发
qq_45271323的博客
04-08 2397
混合开发三类App: 一. NativeApp(原生APP) ​ 纯工具类APP ​ 特点？ ​ 开发：由Native人员进行开发的 安卓（Android） 苹果（IOS） ​ 语言：Android(Java+XML) IOS（Objective-c / Swift + XML） ​ 更新维护：版本更新、打补丁包 都得需要用户从app store里面进行下载 ...
谈一谈Android Flutter混合开发问题
weixin_45365889的博客
11-06 871
之前介绍过一些Android Flutter混合开发的注意点以及一些基本知识， 接下来介绍一下实际开发过程中，目前一定会遇到的两个坑。 在Flutter开发过程中，如果是以module的形式进行依赖，是无法进行android原生部分的调试的，无法进行attach debug to android process操作； 为了解决这一问题，我们需要考虑使用aar的方式，以library的形式进行...
探索高性能混合应用开发：BlackHawk项目介绍
gitblog_01020的博客
08-29 538
探索高性能混合应用开发：BlackHawk项目介绍 BlackHawkHigh performance Cordova compatible javascript-native reflection bridge based on fast and sexy WKWebView written in pure Swift.项目地址:https://gitcode.com/gh_mirrors/b...
谈谈AndroidApp混合开发
02-01
混合开发的App（HybridApp）就是在一个App中内嵌一个轻量级的浏览器，一部分原生的功能改为Html5来开发，这部分功能不仅能够在不升级App的情况下动态更新，而且可以在Android或iOS的App上同时运行，让用户的体验更好...
安卓混合开发
03-14
安卓混合开发是现代移动应用开发领域中的一个重要概念，它结合了原生应用开发与Web应用开发的优势，旨在提供更高效、灵活且成本效益高的开发解决方案。混合开发模式通常使用HTML5、CSS3和JavaScript等Web技术来构建...
Android开发方式之Java+html+javascript混合开发
10-22
混合开发模式允许开发者快速实现应用的功能，且能较好地兼容多种设备，提供一致的用户体验。 描述部分强调了这种混合开发模式相对于传统的Android原生开发模式可以节省开发时间，同时保证不同设备用户获得相同的...
vue项目开启Gzip压缩和性能优化操作
01-18
vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能 第一步：在vue项目中安装依赖并将productionGzip改为true，开启Gzip压缩： npm install –save-dev compression-webpack-plugin 第二步：运行 npm run build打包项目，这时可能会报错，提示ValidationError: Compression Plugin Invalid Options。 根据官网提示，需要将CompressionWebpackPlugin的设置由asset改为filename。 第三步：再次运行 npm run buil
关于混合开发
qq_45335911的博客
10-08 1783
app原生开发与app混合开发有什么区别？ 一、app原生开发 原生开发（Native App开发），在Android、IOS等移动平台上利用提供的开发语言、开发类库、开发工具进行App软件开发，比如Android是利用Java、Eclipse、Android studio；IOS是利用Object—C和Xcode进行开发。 优点： 可访问手机所有功能（如GPS、摄像头等）、可实现功能齐全。 运行速度快、性能高，有绝佳的用户体验。 支持大量图形和动画，不卡顿，反应快。 兼容性高，每个代码都经过程序员精心设
web混合开发
AbyssalMagic的博客
11-22 583
//web综合题<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <script type="text/javascript" src="anglar/angular.js" ></script> <script>
Flutter 混合开发
老孟Flutter
12-03 2029
文章目录1、双分支、aar的形式2、flutter模式 1、双分支、aar的形式 2、flutter模式
混合开发-JSBridge
最新发布
2301_80345482的博客
09-21 557
混合开发是一种融合了原生开发和Web开发优势的移动应用开发方式。具体来说，混合开发通常指的是利用一种框架或平台来创建应用程序，这种程序结合了原生应用的一些功能和特性（比如访问设备的摄像头、相册、GPS、蓝牙等），并且使用Web技术（HTML5、CSS和JavaScript）来编写大部分的应用代码。
Android与HTML5混合开发实战总结
这种混合开发方式在处理动态内容、实现跨平台兼容性以及减少应用更新频率等方面具有显著优势。 首先，Android中的WebView组件是实现混合开发的核心。WebView是一个可以加载和显示网页的视图，它支持JavaScript执行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值