在信息安全越来越受重视的今天，前端的各种加密也变得更加重要。通常跟服务器的交互中，为保障数据传输的安全性，避免被人抓包篡改数据，除了 https 的应用，还需要对传输数据进行加解密。

目前常见的加密算法可以分成三类

1) 对称加密算法：AES、…

2) 非对称加密算法：RSA、…

3) Hash 算法：MD5、…

阅读更多

• ECMAScript 6 - ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。

• lodashjs - Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

  阅读更多

问题来源：小程序使用的是高德地图，后台的数据来源于百度地图，导致小程序的定位不是太准确

在开发中使用了第三方的数据，由于经纬度使用的是第三方的数组，他们使用的是百度的地图坐标。在项目中使用时，能用百度地图去解析自然是最好的，但是呢，该项目是基于微信小程序的，百度地图针对小程序提供的API功能不是很完善，难以实现想要的需求，所以采用腾讯官方的地图。

将百度地图经纬度转换为腾讯/高德地图经纬度

阅读更多

效果如下：

阅读更多

需求

设计师给了一堆任务头像，文件名乱七八糟的，我这边其实就一个循环就渲染出来了，所以得统一按下标重新命名一下，五百多张不可能一张一张改吧，那只能通过程序来循环改了，前端页面仔这可怎么搞？

阅读更多

– html/css

— css 的布局方式

1.table 布局
2.flex 布局
3.float 布局
4.响应式布局

— 盒子模型

IE 盒子模型：宽高包括 content + padding + bording; box-sizing: border-box
标准盒模型：宽高就是元素的实际宽高 content; box-sizing: content-box

阅读更多

中国继续医学教育网 - 卫健委 - 2022/01 ~ 2022/04/10

项目介绍

中国继续医学教育网是国家卫健委健康委能力建设和继续教育中心的线上为各级医院的医师做专业技能课程的培训和线上考级的线上平台。项目主要承载的直播，录播，音频，线上视频购买，线上考试和线上证书的发放。

项目架构选择

项目主要包括3个系统：
后台管理系统：https://www.ncme.org.cn/admin/#/login?redirect=%2F；
PC端的线上学习网站：https://www.ncme.org.cn/；
手机端的H5学习网站：https://www.ncme.org.cn/ncme-h5/；
后台管理系统采用的是：vue + element + vuex的全家桶的前端架构模式；
PC端的线上学习网站采用的是：nuxt + element-ui
手机端的H5学习网站采用的是：nuxt + vant

ToB的网站，项目要求首屏渲染速度要快，尤其是SEO的要求比较高，所以选择了服务端渲染，有头部标签管理方便，SEO优化比较好的nuxt，并且项目资金压力不大，服务器方面的费用不用考虑。

项目的坑

1.首先管理系统包括用户、属性、课程、项目、运营、财务、消息、权限、统计、学院等十大系统，需求太多，前期给的文档需求不全，导致后期工期不变，需求一直再加，工期没有商量余地，导致时间太紧，bug率太高。
2.项目的需求文档不全，导致课程、项目系统变成了俄罗斯套娃，代码变得非常的难维护。
3.nuxt当时没有接触过这个框架，在时间紧的基础上还是不要采取不熟悉框架，不过好赖都过来了。
4.直播相关的业务采用的第三方的CC，导致调用他们的API各种问题，沟通很麻烦。

项目的交付

国家级别的项目相对来说还是比较好交付的，就是应为功能太多，导致有些问题没有测试到，结果到了线上数据全部上去，访问量达到30W+的时候暴露了一些没测到问题，但是整体还能说得过去。

项目总结

1、大型项目前期的需求一定要确定好，最起码要确定十有八九。
2、前期项目的框架要尽量选择自己熟悉的，大项目不适合去选用新的框架。
3、工期是最重要，那其实就是需求一定要仔细过，做到时间功能的合理安排。
4、UI层面的适当找比较初级的程序员写好，但前提是一定要有自己的代码书写规范文档。

阅读更多

视觉效果

阅读更多

参考链接：https://pay.weixin.qq.com/wiki/doc/api/index.html

1.开通H5支付，注意：在申请时填写的域名必须和调起H5支付访问的页面一样！
2.跟小程序支付类似，拿到公众号的appId, 商户号、商户秘钥.

H5支付采坑问题记录：

当所有参数准备好，并调用接口时，返回MWEB_URL如下：
MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096

访问该链接，出现以下错误：

原因：商户侧统一下单传的终端IP(spbill_create_ip)与用户实际调起支付时微信侧检测到的终端IP不一致导致的，

（在网上找了各种各样的方法，获取本地真实的ip，全都无效，问题依旧如此）

解决方法：要获取spbill_create_ip。在前端js中引入了搜狐的js库，

1

<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

document.write(returnCitySN[“cip”]+’,’+returnCitySN[“cname”]);

这条语句即可拿到手机端的真实ip,returnCitySN[“cip”]将该值作为参数传到后台，作为spbill_create_ip的值调起微信支付接口。

当前调起微信支付的域名和申请H5授权的域名不一致时会出现如下图所示：

原因：当前调起微信支付的域名和申请H5授权的域名不一致。

解决方法：将该项目放到域名服务器上，并使得调起支付的访问链接的域名和H5授权的域名一致！

1.解决以上两个问题后，不能在浏览其中访问返回的MWEB_URL，而是要通过前端类似于window.location.href=”MWEB_URL”去调用。
① 不能直接在手机微信端，必须在手机浏览器上调用。会提示“系统繁忙，请稍后再试”