微信小程序·云开发初体验

作者:甄玉磊 微信小程序·云开发初体验 简介:2018年9月份微信正式推出云开发平台,一石激起千层浪,什么是云开发?是不是以后就可以和后端研发说拜拜了?是不是未来前端研发就可以一统微信小程序了?想想还有点小激动了呢! 2018年9月份微信正式推出云开发平台,一石激起千层浪,什么是云开发?是不是以后就可以和后端研发说拜拜了?是不是未来前端研发就可以一统微信小程序了?啥?我膨胀了吗?我骄傲了吗?我嘴角流口水了吗?只是想想还有点小激动了呢! 好了,好了,后端童鞋可以放下手里的刀了,这个微信小程序的云开发暂时还无法全面取代你们在微信端的地位,但是!不得不说给前端开发带来了很大的便利,值得前端童鞋们一探究竟。 1.什么是云开发? 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。 也就是说,对于一些小程序,我们无需后端搭建服务器,提供数据库,整个项目完全可以由前端开发者来完成。这意味着前端开发者无需考虑如何构建服务器之类的工作,即可完成整个微信小程序了。 2.云开发功能简介 好了,叨叨了这么多,想必你已经迫不及待的要揭开它神秘的面纱了。 2.1 云开发基本步骤 (1)俗话说“巧妇难为无米之炊”,首先要做的就是下载微信提供的最新开发工具,网址为您奉上: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18101520 (2)在启动界面,选择”建立云开发快速启动模板”,就可以看到下面的开发平台了: 其中,系统默认会建立两个文件夹,分别为: – cloudfunctions 默认存放云函数的文件夹 – miniprogram 默认存放业务代码的文件夹 如果你觉得,这是神马名字,能不能起个高大上的名字。只有私人订制版的名字,才能衬托我无与伦比的高贵气质~ 比如说:李狗蛋和王钢柱… 敲黑板,注意了,当你修改名字后,一定要记得在 project.config.json 中对应修改云函数和程序的路径,否则小程序无法找到对应的入口文件而报错。 2.2 云开发切换环境 细心的童鞋可能发现,云函数的文件夹后面带有一个 cloud-demo 的小尾巴,这个是当前云函数使用的云环境。云环境有啥用处呢? 由于云开发是实时上线更新的,假如你已经上线了一版小程序,在本地开发的时候,实时修改该环境下的数据库和云函数逻辑,那么使用同一环境的线上小程序也会变来变去,再想想用户一脸茫然的看着自已动来动去的小程序界面,很调皮是不是? 好在,微信给每位开发者提供了两套环境: 环境之大, 一次用不下, 一个上线, 一个开发! 每套环境的数据库/云函数都是相互独立的,只有在测试环境检查的没有问题了,再部署到线上。那么问题又来了,如何切换使用的云环境呢? 右击云函数文件夹,如果之前切换过环境的话,会出现两个候选环境,如果之前没有切换过,则选择更多设置,如下图所示在新打开的界面中选择当前要使用的环境即可。 好了,环境准备好后,让我们开始愉快的(踩坑)开发之旅吧! 3.云开发的三大”拦路虎” 曾经有位名人“沃·滋基硕德” 这样教导我们:“你在奔向成功的路上总是会遇到困难,不要伤心,慢慢就习惯了!” 云开发包括三大主要内容:云函数,数据库,存储管理,相当于拦路虎一样,横跨在我们面前,在使用过程中需要注意哪些事项呢?让我娓娓道来: 3.1 大虎:云函数 何为云函数? 云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。 我们可以在代码区域的云函数文件夹,右击新建 node.js 函数,之后平台会提示我们是否安装依赖: 如需在云函数中操作数据库、管理云文件、调用其他云函数等操作,可使用官方提供的 […]

利用交叉观察器解锁懒加载新姿势

作者:宋成林 懒加载,一个在我们前端性能优化中高频出现的词汇,无论是懒加载图片还是懒加载模块,无非都是希望用户可以在滚动指定视区再去加载相应的资源, 从而达到节省用户流量、提升首次加载时间、减轻服务器的压力的目的。 “懒加载”不是一个新的概念,对于经验丰富的你们来说,一定积累了很多实现方法,但为什本文还要提出来呢?因为我们开发过程中,常用的实现方式都是通过监听页面的 scroll 事件来实现的,这种方法在使用过程中,scroll 事件会被高频触发,强制浏览器重排和重绘,从而不断增加浏览器的压力,导致浏览器性能的损失,有时可能出现卡顿或是闪烁的现象,即使使用了节流与去抖等方法,但还是会产生高昂的计算开销。那是否有更好的方法来解决呢,本文会讲解一种新实现方式,在此之前,先让我们回顾一下常用的实现姿势吧! 常用姿势 姿势一:getBoundingClientRect() 方法 通过 Element.getBoundingClientRect() 方法可以返回元素的大小及其相对于视口的位置。 rectObject = object.getBoundingClientRect() ;返回值 rectObject 对象包含了一组用于描述边框的只读属性—— left 、top 、right 和 bottom ,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。 如下图: 随着页面滚动,我们可以获取懒加载元素相对于视口的顶点位置 rectObject.top 的像素值,当这个值小于可视区高 window.innerHeight ,表示已经进入可视区,开始加载数据,如果要提前加载,可以设置一个 threshold 阈值。 姿势二: 首先我们获取元素 Element.offsetTop ,获取可视区高度 window.innerHeigh 。 随着页面滚动,实时获取滚动条的高度 scrollTop ,如果元素 Element.offsetTop – 滚动条的高度 scrollTop 小于可视区高度 window.innerHeight 的时候,开始加载数据。 这两种实现方式都是通过监听页面的 scroll […]

快速小程序开发之微信小程序内嵌 H5

作者:王悦 微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以及在实战中如何调试一次性带你感受小程序内嵌 H5 的风采,帮你更有底气的使用微信小程序新组件 web-view。 一、技术选择: 1.H5 转成小程序方案路线优缺点对比: 上表是从原有 H5 转相似业务逻辑的微信小程序的方案路线优缺点对比,基于时间的限制以及当前主流多端编译的可靠性考量,最终团队认为通过使用小程序组件 web-view 内嵌 H5 的方式比较适合当前的开发需求。 web-view 的兼容性问题主要是要在基础库在1.6.4+及以上才可以用,而微信官方统计基础库在1.6.4+ 的覆盖率已达 95% 以上,这个指标也符合产品大人的要求,于是便愉快的选择了 web-view 内嵌 H5 的技术方案。 2.H5 和小程序技术对比: 从上表中可以对比出 H5 相较于小程序的优缺点,方便各位前端大大评估需求。尤为重要的是因为小程序封装的比较严重所以小程序开发的灵活性没有 H5 那么高,这就要我们注意对交互设计的评估。 二、web-view 微信小程序配置系列问题 1、配置域名 注意: 业务域名中配置的就是小程序以及 H5 和 H5 中引用 iframe 的域名。这里要特别注意的是假如 H5 中有内嵌的 iframe 也要配置进去 这里需要服务端的朋友配合一下,将校验文件放置在将要嵌套的业务域名的根目录。所以要注意后端是否可以支持,否则会有各种扯皮的问题 2、选择基础库 开发的时候不要忘记配置微信小程序的基础库,注意 […]

可以说的秘密-那些我们该讨论的前端加密方法

作者:孙印凤 随着信息安全重要性的日益凸显,如何保证用户数据的安全成为开发者重点关注的内容。目前,可供我们选择的加密方法有很多,我们需要根据实际的情况选择符合自己的安全解决方案。本文将介绍前端开发中常用的加密方法并给出其适用场景。 常用加密方法 1. Base64 编码 大家经常说的是 Base64 加密,有 Base64 加密吗?真木有,只有 Base64 编码。 Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法,详见 [1]。常用于在通常处理文本数据的场合,表示、传输、存储一些二进制数据,包括 MIME 的 email,email via MIME,在 XML 中存储复杂数据;主要用来解决把不可打印的内容塞进可打印内容的需求。很多编程语言中都内置了该编码方法,比如 Python 内置的 base64 方法使用如下:

因此,Base64 适用于小段内容的编码,比如数字证书签名、Cookie的内容等;而且 Base64 也是一种通过查表的编码方法,不能用于加密,如果需要加密,请使用专业的加密算法。 2. 哈希算法(Hash) 哈希(Hash)是将目标文本转换成具有固定长度的字符串(或叫做消息摘要)。当输入发生改变时,产生的哈希值也是完全不同的。从数学角度上讲,一个哈希算法是一个多对一的映射关系,对于目标文本 T,算法 H 可以将其唯一映射为 R,并且对于所有的 T,R 具有相同的长度,所以 H 不存在逆映射,也就是说哈希算法是不可逆的。 基于哈希算法的特性,其适用于该场景:被保护数据仅仅用作比较验证且不需要还原成明文形式。比较常用的哈希算法是 MD5 和 SHA1,详见 [2][3]。 我们比较熟悉的使用哈希存储数据的例子是:当我们登录某个已注册网站时,在忘记密码的情况下需要重置密码,此时网站会给你发一个随机的密码或者一个邮箱激活链接,而不是将之前的密码发给你,这就是因为哈希算法是不可逆的。 需要注意的是:在 Web 应用中,在浏览器中使用哈希加密的同时也要在服务端上进行哈希加密。 现在,对于简单的哈希算法的攻击方法主要有:寻找碰撞法和穷举法。所以,为了保证数据的安全,可以在哈希算法的基础上进一步的加密,常见的方法有:加盐、慢哈希、密钥哈希、XOR […]

利用prerender-spa-plugin提升单页面应用的体验

作者:汪楠 简介: Vue、React单页面的应用给开发者和用户都带来了更好的体验,但是首屏加载慢、白屏和SEO等问题也日益突出,本文主要针对此用户体验问题给出渐进的处理方式-预渲染 目前 Vue、 React 在前端界混的风生水起,它们的开发思想使得我们能真正做到前后端分离、解耦。单页面的使用给用户带来了更好体验。不过对于 Vue 和 React 这种框架来说, HTMLinJS 的思路在首屏加载慢、白屏以及 SEO 等问题就日益突出了。 不仅需要拼框架的功能、生态,当然还不能忘记“用户至上的原理“,拼体验。孜孜不倦的前端朋友们给出了几个解决方案:1.Server-side rendering(SSR),2.Prerendering。下面我将一一介绍一下。 什么是SSR? SSR 直译就是服务端渲染,通过设置 SSR,你就可以在后台的 Node.js 环境中完成渲染逻辑,然后将 HTML 视图直接返回给客户端。这样你不仅可以使用 Vue 和 React 技术,而且可以直出页面内容。而非只有一个空壳子在后端那里。这样也方便了搜索引擎的蜘蛛获取页面,解决 SEO 问题。 SSR有什么问题? 你可以回想一下我们在很早之前的前端开发模式,其实就是后端直出页面。前端重构页面,交由后端套页面渲染首页的数据。当然一些异步的数据,则通过 ajax 获取数据渲染。这似乎又回到了之前的开发模式。前端和后端还是紧密联系在一起了。给维护和迭代带来的不便。 那它没有好处吗?有的!目前,社会上还是有成熟的框架和线上的产品,比如 Nuxt.js[1], , 说明它还是具有价值的。它很明显可以解决首屏白屏或者SEO等问题。但是它也引入很多问题,其一,对工程师要求较高,需要同时掌握的前后端知识。其二,要考虑在服务端 Node.js 环境中的内存泄露、运行速度、并发压力等问题。 Node 层的服务可以用“脆弱”两个字来形容。其三,开发成本增加,研发周期变长等。一般来说,是需要一个强大且稳定的基础架构来支撑服务端的压力。 如果你可以应付这些,无疑 SSR 对于增强应用体验是非常棒的~,但对于像我这样有点焦虑的人来说,是否有其他解决办法呢?有的, Prerendering! Prerendering 有时候,我们开发的单页面应用也就几个页面,非常小型,仅仅是为了 SEO、首页白屏问题,大家都觉得有点校枉过正了。可以利用第三方插件 prerender-spa-plugin[2],在客户端实现渲染,这样无需将 Vue 或者 React 代码部署在服务端。 […]

© 2018 JDC. All Rights Reserved.