怎样使用微信小程序的第三方js库?

JavaScript010

怎样使用微信小程序的第三方js库?,第1张

方法一:rpn.js:使用rpn.js实现eval函数功能

操作链接:网页链接

方法二:

(1)使用Underscore.js:操作链接:网页链接

(2)使用Immutable.js:操作链接:网页链接

(3)使用UUID、Base64、Chance:操作链接:网页链接

扩展微信小程序框架功能(1)——Promise

ES6 对 Promise 有了原生的支持,但微信开发者工具更新版本(0.11.112200)后, 移除了开发者工具对 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 库。

扩展微信小程序框架功能(2)——Generator

Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。

扩展微信小程序框架功能(3)——函数功能增强

Underscore.js 和 Lodash 是最常用的JavaScript库。

扩展微信小程序框架功能(4)——Immutable.js

Immutable.js 是 Facebook 开发的不可变数据集合。Immutable

Data(不可变数据)一旦创建就不能被修改。通过使用Immutable

Data,可以更容易的处理缓存、回退、数据变化检测等问题,应用开发更简单。

扩展微信小程序框架功能(5)——Redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。

扩展微信小程序框架功能(6)—日期时间

Moment.js是一个JavaScript的日期、时间处理工具类,其对于JavaScript的日期时间处理功能非常强悍和全面。可以用在浏览器环境中使用,也可以在Node.js中。

扩展微信小程序框架功能(7)——正则表达式

XRegExp 是一个开源的 JavaScript库,提供一个参数化、可扩展的支持各种浏览器的正则表达式的实现库,支持附加语法、标志以及方法。

扩展微信小程序框架功能(8)——Xml处理

x2js是一个 实现 XML 与 JavaScript 对象之间相互转换的工具库。

扩展微信小程序框架功能(9)——加解密

node-uuid可以快速地生成符合规范 的 UUID。js-base64可以实现Base64编码和解码。crypto-js可以非常方便地在 JavaScript 进行加解密。

扩展微信小程序框架功能(10)——测试辅助

Chance是一个 JavaScript 随机数生成工具。Mock.js可以生成随机数据,拦截 Ajax 请求。

方法三:moment

操作链接:网页链接

       目前主要是做PC端项目,但是偶尔也会有移动端需求提来,有在原生APP中的,也有在微信和浏览器中的,目前也就接触过这三个场景,对于移动端的坑入得也不深,本文介绍也是偏应用,如有不足请见谅。 一、开发移动端页面的工具 ①移动端浏览器页面        这里开发静态页面的做法和普通的PC页面开发一样,使用chrome浏览器进行开发和调试,但是不一样的地方是把PC端的开发模式切换到手机开发模式(PC调试模式切换到移动端,点亮图中 ②即可,图中①处可以模拟不同移动端设备,同时可以自己添加设备),效果如下:该方式可以直接调试 ②嵌入APP中的移动端页面        对于某些经常举办针对用户活动的APP对于嵌入H5页面的需求是比较多的。因为这样会节省开发的成本、减少原生APP的迭代速度、对用户友好。        开发嵌入原生APP的方式和第一种方式基本一致,唯一和第一种方式有些差别的是:如果h5页面和原生APP存在一些交互(js需要获取原生APP放回的数据),这种方式是没法做到的,因为上述方式是放在浏览器这个APP下的,而不是某个特定的原生APP。 解决方法:         先和原生APP开发的同事商议好接口,使用方式一进行静态页面开发(这里面要写好正常的逻辑),然后与后台同事联调好接口,发不到测试,最后与原生开发的同事进行测试环境联调。过程看起来复杂,如果原生接口没问题,一般很快搞定。缺点就是和原生联调的时候,如果有问题,不好排查。(不知各位有什么好的方法,请指教!) ③开发微信端页面        其实这个不应该拎出来说的,因为微信页面和在普通浏览器页面“一样”,可以认为微信中浏览网页就是在用QQ浏览器浏览。所以不再赘述。 总结:移动端开发,还是f12“大法”,然后切换移动调试就行了。 二、微信开发者工具之移动调试的使用        对于f12开发小型的页面是没问题的,但是如果是基于微信的项目就有些力不从心了。所以大部分针对微信开发的项目基本上都可以使用 微信开发者工具 。 针对微信的开发者工具,真的是极大的方便了开发微信项目的效率。        下面是一个应用于本地的个税计算器(其实控制台操作和浏览器f12基本一致,所以这个东西前端的同事一般立马上手):        但是,这个开发者工具虽然是微信官方开发工具,但是毕竟是模拟器,现实情况的复杂会导致有些样式不兼容。例如vivo的微信客户端,显示总是错乱的(测试的同事发现的问题,她的手机可以还原场景,但是我的手机端是正常的)。所以,我们需要有针对性的在这款手机真机上调试,如何做呢?下面简要介绍如何利用微信开发者工具进行真机调试。        相对于iOS移动端调试,Android移动端调试更丰富一点,所以以安卓为例,ios调试方式同Android调试中的“普通调试”。 ①普通调试 普通调试的步骤如下: 步骤解释: 第一步:选择无线网卡地址,默认即可,工具会自动查询你的无线网卡ip v4地址 第二步:意思就是你的手机连接的网络要和第一步得到的ip v4在同一个网段内(什么是网段?看这里)。简单的做法就是把手机的网络和电脑的网络设置为同一个源(连接到同一个无线网上) 第三步:这个步骤很清楚了,还有一个快捷的方式就是“下拉工具栏——长按无线连接图标”然后就可以直接进入到无线列表在做后续操作了。iOS操作如下: iOS: 设置 - 无线局域网 - 选中网络 - HTTP代理手动第四步:设置好上面步骤以后,重启微信,这可能是让微信重新检测目前的网络情况,然后打开你想调试的页面(注意,要先打开要调试的页面才可以开始调试) 第五步:这个不在上面的说明里,但是需要说明下,打开调试的网页以后,在点击下面的开始调试按钮! 如果你的操作正确,弹出框会是这样的: 如果你当前没有在微信打开调试页面或打开的本地页面地址错误,则会失败:        请注意 ,如果你想调试本地开发的页面,需要你开启web服务,使用http://host<:port>的方式来访问,如果只是一个本地页面,是无法打开调试的,形如webstrom里面快捷打开的页面地址:http://localhost:63342/17-app-calculate/index.html 这个是无法调试的。需要你搭建WEB服务,使用类似于http://192.168.0.108:8090/17-app-calculate/ 这种url。(http://127.0.0.1:8090/17-app-calculate/ 这种写法也是无法调试的,因为微信根本打不开)。 调试模式开启以后,我们就可以直接在手机上查看调试的结果或者修改东西: 我选中这里,手机就会有类似于PC端选中的状态一样被选中        好了,可以直接看着手机调页面了,对于一些手机端的兼容性处理更有针对性,而且可以在network那里看网络请求,十分方便。 ②X5 blink内核调试 X5 blink调试步骤如下:       首先开发者工具要验证你的手机是不是支持该调试功能,所以,首先选择验证,然后在按下面的步骤做:        上面三步结束以后,直接点击开始调试按钮,工具会给出一个弹框,检测出你的手机信息,但是其他什么都没有,像这样 那是因为——微信还没有打开能调试的页面!!! 同样,打开一个能调试的页面,这个“白板”就变了样子了, 注意:过程中会提示“是否允许USB调试”,选择同意即可 然后点击箭头指向的“inspect”,熟悉的画面再次出现!!!好啦,这样就可以愉快的去调试真机界面了! 本文以应用为主,说的不深,不足之处还请见谅!心如繁星,是美还是罪?

微信Web开发工具有很多,包括比如说Liveweave、JS Bin、Codepen、Dabblet等等。但是,Web开发人员没必要全部精通,找到适合自己使用的就可以了,然后学到真正的开发技术,成为互联网大型企业都在高薪招聘的web开发人才。

第一种微信Web开发工具——Liveweave

它还有一个吸引我眼球的地方,就是它的协作功能。如果你过去曾经使用过Teamviewer,你会发现它们是相似的。你需要做的事只是点击协作链接,你就可以分享来自于你到weave的链接了。

第二种微信Web开发工具——JS Bin

JS Bin和以前开发平台的区别在于它允许你把文件下载到你的电脑上,这对于开发者,尤其是在离线状态下调试代码的程序员来说,是一个很不错的特点。你还可以创建私人的Bin空间,不过你需要对此付费。另外,JS Bin不支持协作功能。

第三种微信Web开发工具——Codepen

Codepen用于CSS的预处理器包括SCSS、SASS,LESS和Stylus,用于JS的有CoffeeScript和LiveScript,用于HTML的包括Haml、Markdown、Slim和Jade。

第四种微信Web开发工具——Dabblet

现在,Dabblet最棒的地方在于它允许用户以5个不同的视角进行预览,分别是CSS编辑器和效果,HTML编辑器和效果,CSS和HTML的编辑器和效果,JavaScript及运行结果,全部综合效果。这些功能在绝大部分的开发环境中都没有。

第五种微信Web开发工具——JSFiddle

如果你在与其他开发者合作,我强烈建议你使用JSFiddle。在所有的开发环境中,JSFiddle的协作特性是同类型应用中最好的,而且区别于Codepen的是,它的这个特性是操作简单并且免费的。

第六种微信Web开发工具—— CSSDeck C

SSDeck虽然很简洁,但它有一个让我很吃惊的特性,就是它支持用户改变字体大小,这是一个简单却实用的功能。所以说,如果你在寻找有很多很炫的功能的开发平台,CSSDeck可能不适合你。它的简洁性让你更专注于最重要的事情,这也是它最大的特点。