话题
高磊 移动开发
前面 上一篇文章 手把手教会你小程序登录鉴权 [https://juejin.im/post/5ac9b72cf265da23906c486a] 介绍了小程序如何进行登录鉴权,那么一般小程序的用户标识可以使用上文所述微信提供的 jscode2session 接口来换取,小程序还提供了一个 getUserInfo 的API来获取用户数据,这个用户数据里面也可以包含当前的用户标识openid。本文就 如何获取小程序中的用户数据及数据完整性校验 等内容来展开详述 API介绍 wx.getUserInfo 是用来获取用户信息的API接口,下面是对应的参数字段: 字段 类型 是否必填 withCredentials Boolean 否 lang String 否 timeout Number 否 success Function 否 fail Function 否 complete Function 否LANG lang 指定返回用户信息的语言,有三个值: * zh_CN 简体中文 * zh_TW 繁体中文 * en 英文,默认为en TIMEOUT ...显示全部
3 个月前发表 189次浏览 0条评论 0次收藏
王少飞 javascript
关于Badjs2.0的一些特性以及腾讯云镜像安装的可以参考文章 badjs2.0 [https://ivweb.io/topic/59cf917f12203967d35ca7be] 下面主要介绍如何通过docker部署badjs2 1 首先要有一台服务器,可以安装DOCKER-CE。 CENTOS 7 老版本不支持安装docker DEBIAN 64位系统 Buster 10 (Docker CE 17.11 Edge only) Stretch 9 (stable) / Raspbian Stretch Jessie 8 (LTS) / Raspbian Jessie Wheezy 7.7 (LTS) UBUNTU 64位系统 Artful 17.10 (Docker CE 17.11 Edge and higher only) Xenial 16.04 (LTS) Trusty 14.04 (LTS) FEDORA 26,27 2 安装DOCKER可以参考官方文档 ...显示全部
3 个月前发表 203次浏览 0条评论 0次收藏
杨磊 工具建设
ROLLUP 下一代打包工具,这是rollup对自己的定位。如今的前端领域,构建工具并不缺少,每个前端工程师都用过或者听过webpack。可以看到的是像React、Vue等框架的构建工具使用的都是rollup。既然如此,这些框架为什么会选择rollup?它的特性是什么?面对不同场景,我们要怎么选择构建工具?本文将一一为你呈现。 TREE SHAKING tree shaking是rollup提出的,这也是rollup一个非常重要的feature,那什么是tree shaking,rollup的解释是在构建代码时,在使用ES6模块化的代码中,会对你的代码进行静态分析,只打包使用到的代码。这样的好处是减少代码的体积。 可以看到它的实现依赖于静态分析,为什么必须使用ES6 modules呢?我们来复习一下ES6 modules的几个特性: * import 的模块名只能是字符串常量 * import binding 是 immutable 的,类似 const * 只能作为模块顶层的语句出现,不能出现在 function 里面或是 if 里面等块级作用域中 ...显示全部
3 个月前发表 154次浏览 0条评论 0次收藏
程柳锋 工具建设
最近Github 10周年在朋友圈里沸沸扬扬刷屏,小编在工作中却惊讶的确发现不少同事对版本号中的beta和rc没有概念,使用 npm install package@next 时,也不清楚next代表的含义。于是,决定写一篇文章科普一下由 Github 起草的Semver(语义化版本)的相关知识。 实际案例 首先,我们来看看目前最流行的前端框架之一的React最近5个月的版本发布日志,截图来自npmjs.com: [https://user-gold-cdn.xitu.io/2018/4/16/162cc6d0b4c8e782?w=663&h=432&f=png&s=25386] 从上图,我们不难得出几个结论: * 软件的版本通常由三位组成,形如:X.Y.Z * 版本是严格递增的,此处是:16.2.0 -> 16.3.0 -> 16.3.1 * 在发布重要版本时,可以发布alpha, rc等先行版本 * alpha和rc等修饰版本的关键字后面可以带上次数和meta信息 ...显示全部
3 个月前发表 4086次浏览 0条评论 0次收藏
高磊 javascript
导语 为了方便小程序应用使用微信登录态进行授权登录,微信小程序提供了登录授权的开放接口。乍一看文档,感觉文档上讲的非常有道理,但是实现起来又真的是摸不着头脑,不知道如何管理和维护登录态。本文就来手把手的教会大家在业务里如何接入和维护微信登录态 接入流程 这里官方文档上的流程图已经足够清晰,我们直接就该图展开详述和补充。 img [https://mp.weixin.qq.com/debug/wxadoc/dev/image/api-login.jpg?t=201842] 首先大家看到这张图,肯定会注意到小程序进行通信交互的不止是小程序前端和我们自己的服务端,微信第三方服务端也参与其中,那么微信服务端在其中扮演着怎样的角色呢?我们一起来串一遍登录鉴权的流程就明白了。 1. 调用wx.login生成code wx.login()这个API的作用就是为当前用户生成一个临时的登录凭证,这个临时登录凭证的有效期只有五分钟。我们拿到这个登录凭证后就可以进行下一步操作:获取 openid 和 session_key wx.login({ ...显示全部
3 个月前发表 260次浏览 0条评论 0次收藏
程柳锋 javascript
导语:TypeScript(以下简称TS) 是由微软开发的编程语言,是JavaScript的超集,于2013年10月发布第一个正式版0.9。最先代码托管在Codeplex,2014年7月移到了Github。它的代码风格和C#很像,这是因为TS是由C#首席架构师设计并主导开发的。 开发环境 编辑器首选MS自家开发的VS Code (推荐)。当然,Webstorm在2016年2月推出的版本内置了TS编译器,atom 需要安装 atom-typescript包,sublime需要安装Typescript-sublime-plugin。 TS程序以.ts扩展名结尾。运行TS程序很简单,只需要安装编译器TS compile即可,需要通过npm 的方式安装它。 npm install typescript-g 安装完后,在全局会有tsc命令,需要通过它编译TS程序 tsc hello.ts 类型系统 ...显示全部
4 个月前发表 274次浏览 0条评论 0次收藏
程柳锋 构建工具
导语: webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件。借助loaders和plugins,它可以改变、压缩和优化各种各样的文件。它的输入是不同的资源,比如:js、css、图片、字体和html文件等等,然后将它们输出成浏览器可以正常解析的文件。 当下最流行的模块打包器 webpack 于2018年2月25日正式发布v4.0.0版本,代号legato。从官方的 发布日志 [https://github.com/webpack/webpack/releases/tag/v4.0.0] 来看, 本次大版本更新带来了很多新特性更新和改善,这将会让webpack的配置更加简单。本文,笔者将会全面介绍webpack4的新特性及实践。 环境支持 在发布日志里的 Big changes 板块,官方宣布不在支持Node 4, Node 6 [https://nodejs.org/en/blog/release/v6.0.0/] 使用的是v8 5.0版本,支持93%的ES6语法。不难看出,这个决定是为了更好的利用ES6语法的优势,来编写出更加整洁和健壮的代码。 ...显示全部
4 个月前发表 526次浏览 0条评论 0次收藏
高磊 工具建设
背景 我们平常在进行项目开发时,一般都会把代码上传至代码托管平台上方便管理和维护。目前大家使用的托管平台最多的还是Github,国内外还有一些比较知名的代码托管平台,比如Gitlab、BitBucket,码云和码市等。 但我们在多人合作开发下,经常碰到的最头疼的问题是,其他开发者在交接给我们一个项目时只是对项目目前现有的功能简单的描述了下,我们在后续迭代功能时突然发现连最基本的项目如何运行都没有给我们交代,当时心中一万只那个什么马奔腾而过,只能去查看package.json的scripts,自己意会了。 那么问题来了,我们在交接一个项目时,如何保证项目能快速完整地交付给基友,从此过上无忧无虑的生活呢?答案是我们只需要甩给他一份标准规范的README。 -------------------------------------------------------------------------------- 规范的README需要哪些内容 我们通过一张截图一起来看看一份简单的README规范都有哪些内容: ...显示全部
4 个月前发表 386次浏览 0条评论 0次收藏
caorich 工具建设
WEBPACK+REACT+TYPESCRIPT简单配置指南 1、WEBPACK添加TS-LOADER 以下例子使用的是webpack3。 先在命令行安装依赖: npm i babel-core babel-loader babel-preset-env babel-preset-react ts-loader tsconfig-paths-webpack-plugin typescript-D 然后为webpack.config.js添加以下loader: rules: [{ test: /(\.js(x?)$|\.ts(x?)$)/, exclude: /node_modules/, use: [ loaders: [ { loader: 'babel-loader' }, { loader: 'ts-loader', }, ] ] ] 然后创建.babelrc文件,写入以下内容: { "presets": [ [ "env", ...显示全部
4 个月前发表 315次浏览 0条评论 0次收藏
杨磊 构建工具
webpack是现代前端开发中最火的模块打包工具,只需要通过简单的配置,便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置,便可以轻松实现对代码的构建呢? WEBPACK的配置 const path = require('path'); module.exports = { entry: "./app/entry", // string | object | array// Webpack打包的入口 output: { // 定义webpack如何输出的选项 path: path.resolve(__dirname, "dist"), // string// 所有输出文件的目标路径 filename: "[chunkhash].js", // string// 「入口(entry chunk)」文件命名模版 publicPath: "/assets/", // string// 构建文件的输出目录/* 其它高级配置 */ }, module: { // 模块相关配置 rules: [ // 配置模块loaders,解析规则 ...显示全部
4 个月前发表 276次浏览 0条评论 0次收藏
程柳锋 工具建设
[https://qpic.url.cn/feeds_pic/eMJXws7FFlauUALSWA3S7iceia5xM4HrEfUve3X4PJyAw/] 本篇文章主要介绍 腾讯IVWEB团队 [https://ivweb.io/] 从0到1在工程化的思考和实践。 feflow [https://github.com/feflow/feflow] 的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案。愿景是通过feflow,可以使项目创建、开发、构建、规范检查到最终项目上线的整个过程更加自动化和标准化。 要解决的问题 * 项目的目录结构按约定生成 * 团队有一套开发规范进行约束 * 支持多种类型的构建,包括Fis构建和webpack构建 * 团队内部的代码贡献统计、离线包内置App等 为了解决上述问题,我们于17年2月底开始投入工程化feflow工具的开发和相关规范的制定,目前已经研发出了 feflow 的 CLI [https://github.com/feflow/feflow] 版本,后续会推出 GUI 版本。 架构设计 ...显示全部
5 个月前发表 407次浏览 0条评论 0次收藏
caorich React
[http://7tszky.com1.z0.glb.clouddn.com/Fl3OX8zyBhCu3pT-VUBT0XKibgzk] REACT的状态管理 说到react的状态管理工具,大家都会想到redux或者mobx。 redux || mobx // => true REDUX redux出现较早,包括我们项目组在内,redux几乎已经成了react工程的标配。 redux带来的事件分发机制,将复杂的操作分发到各个reducer,有一种大事化小的睿智,确实将复杂的数据更改逻辑解耦得足够简单。包括我leader在内的很多同学都觉得redux的事件分发机制对于现代前端工程是再适合不过的了。 重绘 但redux的缺点也是足够明显的。每一次dispatch事件之后都会导致整个虚拟dom至顶向下的重绘。重绘剪枝需要在 shouldComponentUpdate 中完成,如果事件足够复杂, store足够大, shouldComponentUpdate 方法的剪枝粒度就不那么容易控制了(实际情况下, shouldComponentUpdate 基本和 TODO 一样不可保证)。 ...显示全部
6 个月前发表 1766次浏览 0条评论 0次收藏