uni-app框架引用第三方库在手机端和电脑端的差别

最近在写手机端的app和小程序。用的uni-app的框架——使用vue.js开发的一种框架。

碰到了好几次第三方库

md5算法的引用

写登录或者注册功能的时候会对密码进行md5加密。uni-app不可能使用非官方第三方库,又没有封装好的md5第三方库,所以会引用第三方原生js。
起初只是简单的在components文件夹里加了md5.js(待会儿后面上传这个js),然后引用其函数。在开头引用

	import md5 from '@/components/md5.js';

在要用到md5的地方,直接md5()就ok。
在电脑端用HbuilderX内置浏览器调试app的时候没有报出任何问题。但是在手机端就会报找不到md5这个模块。查资料知道,手机端App和电脑端的解析引擎是不一样的,所以手机端无法解析原生js。后来在网上查了好久,找到了一种解决办法。在根目录用npm安装js-md5模块。命令npm install js-md5 --save,引用如下,

	import md5 from 'js-md5'

使用函数方法和上面一样。

RSA的引用

在引用了非官方js之后。出现同样的问题,因为解析引擎的原因,手机端也会出现问题,会显示如下问题:

reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Exception: ReferenceError: Can't find variable: navigator

白屏的问题,排查了半天才找到是RSA引用第三方库的问题。尝试了和如上一样的解决方式,npm 安装jsencrypt,但是没有用。在网上搜到了一个模块是uni-app可以进行RSA加密的模块fucking-util-signature,具体使用方法点击这里

可是有没有什么办法让jsencrypt.js可以成功使用,在网上找到了一篇大佬的文章解决了这个问题(链接),在之前用npm安装好的jsencrypt.js里加上如下一段

  var navigator2 = {
    appName: 'Netscape',
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1'
  };
  //  用来替换window
  var window2 = {
    ASN1: null,
    Base64: null,
    Hex: null,
    crypto: null,
    href: null
  };

如图所示,之后将代码中所有navigator的变量改成navigator2,将window的变量改为window2。
uni-app框架引用第三方库在手机端和电脑端的差别_第1张图片

elementUI的引用

同样的原因,导致这个插件不能用。会在手机端白屏。
关于uni-app的ui库、ui框架、ui组件,这篇文章写了电脑端手机端使用ui组件的区别。
在小程序端最好使用vant weapp。uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤。

你可能感兴趣的:(开发,前端,#,uni-app)