Fork me on GitHub

昨天微信小程序(应用号)内测的消息把整个技术社区炸开了锅,
我也忍不住跟了几波,可惜没有内测资格,听闻破解版出来了,
今天早上就着原来的项目资源试开发了一下,总结一下体验.

总体体验

  1. 开发效率高,6:40左右按教程破解完IDE,7:20左右点做完了首页和导航栏的布局,微信把觉见的布局都做了封装,比传统的前端开发效率高。
  2. 前端可以快速上手:熟练的前端可以很快上手,可能只要一小时读文档的时间加一个官方的例子。
  3. 开发工具难用,很多目录的操作和IDE常见的xml配对等功能暂不支持。
  4. 开发限制了很多前端常见的Dom,window操作,开发的灵活度和难度降低。
  5. 我没有内测资格,小程序还不能上传体验,只能下载代码本地体验。

本文代码放在github

上截图

image

image

相关资源

  1. 破解的IDE
  2. 开发资源集合

IDE技术栈:NodeWebkit + React

进入的安装目录:微信web开发者工具\package.nw\app
这个*.nw就能十有八九猜出是NodeWebkit封装的Web应用,
详看依赖node_modules证实了猜想。
在package.json "main": "app/html/index.html"定义了入口。

所有的组件本质是React组件

在入口中可以看到直接引用了React 和React DOM
image

"use strict";
function init() {
    tools.Chrome = chrome;
    var n = require("../dist/lib/react.js"),
        e = require("../dist/lib/react-dom.js"),
        i = require("../dist/common/loadInit/init.js"),
        o = require("../dist/components/ContainController.js"),
        t = require("../dist/common/proxy/startProxy.js"),
        r = require("../dist/actions/windowActions.js"),
        s = require("../dist/actions/webviewActions.js"),
        d = require("../dist/stroes/webviewStores.js"),
        u = require("../dist/common/log/log.js"), c = require("../dist/common/shortCut/shortCut.js"), l = global.appConfig.isDev;
        //...
}

看一下组件Dropdown的定义,这不就是我们熟悉的React在ES5中创建组件的方法吗?

"use strict";
var React = require("../../lib/react.js"), Dropdown = React.createClass({
    displayName: "Dropdown", render: function () {
        return React.createElement("div", {className: "dropdown"}, React.createElement("div", {className: "dropdown-item"}, React.createElement("img", {
            src: "https://mmrb.github.io/avatar/jf.jpg",
            alt: "",
            className: "dropdown-item-icon"
        }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦")), React.createElement("div", {className: "dropdown-item-extra"}, React.createElement("img", {
            src: "https://mmrb.github.io/avatar/jf.jpg",
            alt: "",
            className: "dropdown-item-extra-icon"
        }))), React.createElement("div", {className: "dropdown-item dropdown-item-active"}, React.createElement("img", {
            src: "https://mmrb.github.io/avatar/jf.jpg",
            alt: "",
            className: "dropdown-item-icon"
        }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦公众号名称啦公众号名称啦"))), React.createElement("div", {className: "dropdown-item"}, React.createElement("img", {
            src: "https://mmrb.github.io/avatar/jf.jpg",
            alt: "",
            className: "dropdown-item-icon"
        }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦"))), React.createElement("div", {className: "dropdown-item"}, React.createElement("img", {
            src: "https://mmrb.github.io/avatar/jf.jpg",
            alt: "",
            className: "dropdown-item-icon"
        }), React.createElement("div", {className: "dropdown-item-info"}, React.createElement("p", null, "公众号名称啦"))))
    }
});
module.exports = Dropdown;

微信限制了小程序的包大小

同时微信限制了小程序包的大小,为755kb,对缓存和本地文件应该也有控制,这相对原生应用动不动几十兆上百兆的大小来说,绝对是一个亮点,给网上很多人说装微信小程序同样会占用手机存储的人一个响亮的耳光。

image

总结

总的来说,对前端来说绝对是一个好消息,
短期内前端待遇可能上涨,但小程序开发门槛较低(比前端的低),有一部开发人员是面向工资编程,随着开发人员的流动,长期还是会和其它相关的的技术岗持平。
所以,少年,不要激动,还要是把基础知识打扎实。

posted @ 2016-09-23 08:36 路西恩 阅读(13405) 评论(37) 推荐(37) 编辑
摘要: 背景 近年来,http网络请求量日益添加,以下是 "httparchive" 统计,从2012 11 01到2016 09 01的请求数量和传输大小的趋势图: 当前大部份客户端&服务端架构的应用程序,都是用http/1.1连接的,现代浏览器与单个域最大连接数,都在4 6个左右,由上图Total Re 阅读全文
posted @ 2016-09-21 08:20 路西恩 阅读(18228) 评论(27) 推荐(45) 编辑
摘要: javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为浏览器设计的GUI编程语言,GUI编程的特性之一是保证UI线程一定不能阻塞,否则体验不佳,甚至界面卡 阅读全文
posted @ 2016-09-12 08:26 路西恩 阅读(6130) 评论(8) 推荐(11) 编辑
摘要: TOC 背景 浏览器的总流程图 一步一步说缓存 朴素的静态服务器 设置缓存超时时间 html5 Application Cache Last Modified/If Modified Since Etag/If None Match 什么是Etag 为什么有了Last Modified还要Etag 阅读全文
posted @ 2016-06-13 10:02 路西恩 阅读(15415) 评论(2) 推荐(9) 编辑
摘要: 今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这“移动端的IE6 ”了,可以早点回家了!!! 那真实情况是不是这样呢?正好最近在做一款微信的小游戏,项目结束后,我做了一个小的总结,分享如下,时间宝贵,先上结论。 阅读全文
posted @ 2016-05-18 08:05 路西恩 阅读(13436) 评论(8) 推荐(7) 编辑
摘要: 调试效果 配置 1. npm安装 : 2. 配置gulp,gulp可以用 gulp node inspector 或 用gulp shell直接启动node inspector命令。 3. 启动调试模式:gulp debug ; 4. 打开: "http://127.0.0.1:8080/?port 阅读全文
posted @ 2016-05-07 07:31 路西恩 阅读(598) 评论(0) 推荐(2) 编辑
摘要: 目录 一、概述 二、块级元素和内联元素 常见的块级元素 BFC 常见的行内元素 IFC 三、哪些情况会脱离普通流 浮动 绝对定位 固定定位 display:none 四、总结 五、参考资料 常见的块级元素 BFC 常见的行内元素 IFC 浮动 绝对定位 固定定位 display:none 一、概述 阅读全文
posted @ 2016-05-06 07:35 路西恩 阅读(3568) 评论(0) 推荐(3) 编辑
摘要: 依赖注入(Dependency Injection,简称DI)是像C ,java等典型的面向对象语言框架设计原则控制反转的一种典型的一种实现方式,angular把它引入到js中,介绍angular依赖注入的使用方式的文章很多, "angular官方的文档" ,也有很详细的说明。但介绍原理的较少,an 阅读全文
posted @ 2016-05-05 08:03 路西恩 阅读(27661) 评论(7) 推荐(14) 编辑
摘要: 一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存 选择路径 保存后再点击上传 选择路径 上传 插入。 图片文件上传也需要:选择路径再 上传 插入,步骤繁杂,互联网体验为王,如果支持截图粘贴上传、拖拽上传将大大提升体验。 当前知乎和github对现 阅读全文
posted @ 2016-01-19 08:11 路西恩 阅读(16781) 评论(13) 推荐(19) 编辑
摘要: Application Cache 在自己做的开源项目( https://github.com/etoah/Lucien ) 用到了HTML5 的Application Cache,现总结如下: 目录 Manifest的特点 兼容性 用法 注意事项 对企业内部应用的启示 参考 Manifest的特点 阅读全文
posted @ 2015-11-02 23:20 路西恩 阅读(1971) 评论(0) 推荐(2) 编辑
点击右上角即可分享
微信分享提示