微信小程序体验开发

admin 发表于 2016-9-28 11:10:11

<p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">昨天微信小程序（应用号）内测的消息把整个技术社区炸开了锅，我也忍不住跟了几波，可惜没有内测资格，听闻破解版出来了，今天早上就着原来的项目资源试开发了一下，总结一下体验.<h2 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; line-height: 1.25; padding-bottom: 0.3em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-总体体验" class="anchor" href="https://github.com/etoah/wechat-app#总体体验" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>总体体验</h2><ol style="box-sizing: border-box; padding-left: 2em; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><li style="box-sizing: border-box;">开发效率高，6：40左右破解完IDE，7:20左右点做完了首页和导航栏的布局，微信把觉见的布局都做了封装，比传统的前端开发效率高。</li><li style="box-sizing: border-box; margin-top: 0.25em;">前端可以快速上手：熟练的前端可以很快上手，可能只要一小时读文档的时间加一个官方的例子。</li><li style="box-sizing: border-box; margin-top: 0.25em;">开发工具难用，很多目录的操作和IDE常见的格式化代码，html配对等功能暂不支持。</li><li style="box-sizing: border-box; margin-top: 0.25em;">开发限制了很多前端常见的Dom,window操作，开发的灵活度和难度降低。</li><li style="box-sizing: border-box; margin-top: 0.25em;">我没有内测资格，小程序还不能上传体验，只能下载代码本地体验。</li></ol><blockquote style="box-sizing: border-box; margin-bottom: 16px; padding-right: 1em; padding-left: 1em; color: rgb(119, 119, 119); border-left-width: 0.25em; border-left-style: solid; border-left-color: rgb(221, 221, 221); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">本文代码放在github</blockquote><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">上截图<p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><a href="https://cloud.githubusercontent.com/assets/7630567/18770171/e0b19bf8-8165-11e6-93d9-6c293c09fce7.png" target="_blank" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;"><img src="https://cloud.githubusercontent.com/assets/7630567/18770171/e0b19bf8-8165-11e6-93d9-6c293c09fce7.png" alt="image" style="box-sizing: content-box; max-width: 100%;"></a><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><a href="https://cloud.githubusercontent.com/assets/7630567/18770220/70afbf14-8166-11e6-987a-c3ff90484ef2.png" target="_blank" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;"><img src="https://cloud.githubusercontent.com/assets/7630567/18770220/70afbf14-8166-11e6-987a-c3ff90484ef2.png" alt="image" style="box-sizing: content-box; max-width: 100%;"></a><h3 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; font-size: 1.25em; line-height: 1.25; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-相关资源" class="anchor" href="https://github.com/etoah/wechat-app#相关资源" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>相关资源</h3><ol style="box-sizing: border-box; padding-left: 2em; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><li style="box-sizing: border-box;"><a href="https://github.com/gavinkwoe/weapp-ide-crack" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;">破解的IDE</a></li><li style="box-sizing: border-box; margin-top: 0.25em;"><a href="https://github.com/justjavac/awesome-wechat-weapp" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;">开发资源集合</a></li></ol><h2 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; line-height: 1.25; padding-bottom: 0.3em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-ide技术栈nodewebkit--react" class="anchor" href="https://github.com/etoah/wechat-app#ide技术栈nodewebkit--react" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>IDE技术栈：NodeWebkit + React</h2><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">进入的安装目录：微信web开发者工具\package.nw\app 这个*.nw就能十有八九猜出是NodeWebkit封装的Web应用，详看依赖node_modules证实了猜想。在package.json "main": "app/html/index.html"定义了入口。<h3 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; font-size: 1.25em; line-height: 1.25; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-所有的组件本质是react组件" class="anchor" href="https://github.com/etoah/wechat-app#所有的组件本质是react组件" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>所有的组件本质是React组件</h3><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">在入口中可以看到直接引用了React 和React DOM <a href="https://cloud.githubusercontent.com/assets/7630567/18769950/039de2c2-8164-11e6-804a-3aeabdbbef1a.png" target="_blank" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;"><img src="https://cloud.githubusercontent.com/assets/7630567/18769950/039de2c2-8164-11e6-804a-3aeabdbbef1a.png" alt="image" style="box-sizing: content-box; max-width: 100%;"></a><div class="highlight highlight-source-js" style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; font-stretch: normal; line-height: 1.45; word-wrap: normal; padding: 16px; overflow: auto; border-radius: 3px; word-break: normal; background-color: rgb(247, 247, 247);">"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;
 //...
}</pre></div><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">看一下组件Dropdown的定义，这不就是我们熟悉的React在ES5中创建组件的方法吗？<div class="highlight highlight-source-js" style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; font-stretch: normal; line-height: 1.45; word-wrap: normal; padding: 16px; overflow: auto; border-radius: 3px; word-break: normal; background-color: rgb(247, 247, 247);">"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;</pre></div><h2 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; line-height: 1.25; padding-bottom: 0.3em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-微信限制了小程序的包大小" class="anchor" href="https://github.com/etoah/wechat-app#微信限制了小程序的包大小" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>微信限制了小程序的包大小</h2><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">同时微信限制了小程序包的大小，为755kb,对缓存和本地文件应该也有控制，这相对原生应用动不动几十兆上百兆的大小来说，绝对是一个亮点，给网上很多人说装微信小程序同样会占用手机存储的人一个响亮的耳光。<p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><a href="https://cloud.githubusercontent.com/assets/7630567/18769668/b7ca3a32-8161-11e6-960f-9bcdd0ef66b5.png" target="_blank" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;"><img src="https://cloud.githubusercontent.com/assets/7630567/18769668/b7ca3a32-8161-11e6-960f-9bcdd0ef66b5.png" alt="image" style="box-sizing: content-box; max-width: 100%;"></a><h2 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; line-height: 1.25; padding-bottom: 0.3em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-总结" class="anchor" href="https://github.com/etoah/wechat-app#总结" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>总结</h2><p style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">总的来说，对前端来说绝对是一个好消息，短期内前端待遇可能上涨，但小程序开发门槛较低（比前端的都低），有一部开发人员是面向工资编程，随着开发人员的流动，长期还是会和其它相关的的技术岗持平。所以，少年，不要激动，还要是把基础知识打扎实。<p style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"> <p style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">源码下载：<p style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">**** Hidden Message *****<p style="box-sizing: border-box; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"> 

微信小程序体验开发
http://bbs.jiandaima.com/thread-633-1-1.html

页: [1]

捡代码论坛-最全的游戏源码下载技术网站！'s Archiver

微信小程序体验开发