微信小程序应用号开发体验

 更新时间:2016年09月23日 14:25:34   作者:段隆贤  
这篇文章主要介绍了微信小程序(应用号)开发体验的相关资料,需要的朋友可以参考下

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

总体体验

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

本文代码放在github

上截图

相关资源

破解的IDE

开发资源集合

IDE技术栈:NodeWebkit + React

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

所有的组件本质是React组件

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

"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,对缓存和本地文件应该也有控制,这相对原生应用动不动几十兆上百兆的大小来说,绝对是一个亮点,给网上很多人说装微信小程序同样会占用手机存储的人一个响亮的耳光。

 

总结

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

 以上就是对微信小程序的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

相关文章

  • VSCode各语言运行环境配置方法示例详解

    VSCode各语言运行环境配置方法示例详解

    这篇文章主要介绍了VSCode各语言运行环境配置方法,本文通过实例代码给大家介绍的非常详细,对大家介绍的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 人人都能看懂的 6 种限流实现方案(纯干货)

    人人都能看懂的 6 种限流实现方案(纯干货)

    这篇文章主要介绍了人人都能看懂的 6 种限流实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 都2019年了,还问http中GET和POST的区别

    都2019年了,还问http中GET和POST的区别

    最近看了一些同学的面经,发现无论什么技术岗位,还是会问到 get 和 post 的区别,而搜索出来的答案并不能让我们装得一手好逼,那就让我们从 HTTP 报文的角度来撸一波,从而搞明白他们的区别
    2019-02-02
  • win10环境下使用Hyper-V进行虚拟机创建的教程(图解)

    win10环境下使用Hyper-V进行虚拟机创建的教程(图解)

    这篇文章主要介绍了win10环境下使用Hyper-V进行虚拟机创建的教程,本文图文详解给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • 解决VIM显示utf-8文件乱码问题

    解决VIM显示utf-8文件乱码问题

    在Vim中,有四个与编码有关的选项,它们是:fileencodings、fileencoding、encoding和termencoding。下面,我们详细介绍一下这四个选项的含义和作用,感兴趣的朋友一起看看吧
    2020-02-02
  • JAVA IDEA入门使用手册(新手小白必备)

    JAVA IDEA入门使用手册(新手小白必备)

    IDEA的每一个方面都是为了最大限度地提高开发人员的工作效率而设计的,本文主要介绍了JAVA IDEA入门使用手册,帮助新手更好的入门,感兴趣的可以了解一下
    2021-05-05
  • 99%的程序员都会收藏的书单 你读过几本?

    99%的程序员都会收藏的书单 你读过几本?

    99%的程序员都会收藏的书单 你读过几本?用书籍来武装你的大脑,拯救你的人生,还在等什么,速速收藏
    2017-11-11
  • XXencode 编码,XX编码介绍、XXencode编码转换原理与算法

    XXencode 编码,XX编码介绍、XXencode编码转换原理与算法

    这篇文章主要介绍了XXencode 编码,XX编码介绍、XXencode编码转换原理、算法,需要的朋友可以参考下
    2016-06-06
  • 在C#和Java语言中for和foreach的区别详解

    在C#和Java语言中for和foreach的区别详解

    这篇文章主要介绍了在C#和Java语言中for和foreach的区别详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • nGrinder性能工具源码安装部署过程

    nGrinder性能工具源码安装部署过程

    nGrinder是NHN公司用Java语言开发的一款的基于Grinder开发的开源B/S Web性能测试平台,具有友好简洁的用户界面和分布式测试功能,本文给大家分享nGrinder性能工具源码安装部署过程,一起看看吧
    2021-05-05

最新评论