424被浏览44882分享邀请回答/p/22607204来源：知乎著作权归作者所有，转载请联系作者获得授权。本来想的是昨天晚上写这篇文章的，后来昨天在写一个Cordova上的iOS插件的时候各种不顺。对接的第三方SDK不给力，于是六点多回到家的时候，我就就开始娱乐了，哈哈哈~~其实这篇文章应该算是一篇拾遗。从map组件说起在今天公布的开发文档里，我们知道使用一个地图组件的时候是这样子的：&map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375 height: 200"&&/map&
在之前的文件里，我们提到过这个文件是wxml文件，然后我们要用wxcc将其转换为virtual dom中的方法，如：./wcc -d map.xml
它就会返回一个js的方法，如：/*v0.7cc_*/
var $gaic={}
$gwx=function(path,global){
function _(a,b){b&&a.children.push(b);}
function _n(tag){$gwxc++;if($gwxc&=16000){throw 'enough, dom limit exceeded, you don\'t do stupid things, do you?'};return {tag:tag.substr(0,3)=='wx-'?tag:'wx-'+tag,attr:{},children:[]}}
function _s(scope,env,key){return typeof(scope[key])!='undefined'?scope[key]:env[key]}
插播一句：上面有一个count，很有意思$gwxc & 16000，这个就是dom数的count。超了就来个异常：enough, dom limit exceeded, you don't do stupid things, do you?，中文意思就是：你个愚蠢的人类，你是一个前端开发人员吗？随后，在浏览器里调试一下：JSON.stringify($gwx('map.wxml')('test'))
在小程序中是要这样调用的：
document.dispatchEvent(new CustomEvent("generateFuncReady", {
generateFunc: $gwx('map.wxml')
就会返回下面的结果：{
"children": [
"covers": "",
"latitude": "113.324520",
"longitude": "23.099994",
"markers": "",
"style": "width: 375 height: 200"
"children": [],
"tag": "wx-map"
"tag": "wx-page"
看来这个名为wx-map的标签就是微信下的map标签，它是wx-page的children。然后让我们在WAWebview中搜索一下，就会发现一个很有意思的代码:{
is: "wx-map",
behaviors: ["wx-base", "wx-native"],
template: '&div id="map" style="width: 100%; height: 100%;"&&/div&',
properties: {
latitude: {type: Number, reflectToAttribute: !0, observer: "latitudeChanged", value: 39.92},
longitude: {type: Number, reflectToAttribute: !0, observer: "longitudeChanged", value: 116.46},
scale: {type: Number, reflectToAttribute: !0, observer: "scaleChanged", scale: 16},
markers: {type: Array, value: [], reflectToAttribute: !1, observer: "markersChanged"},
covers: {type: Array, value: [], reflectToAttribute: !1, observer: "coversChanged"},
_mapId: {type: Number}
它的behaviors中有一句：wx-native，这莫非就是传说中的native组件：顺便再看一个video是不是也是一样的：{
is: "wx-video",
behaviors: ["wx-base", "wx-player", "wx-native"],
template: '&div class="container"&\n
&video id="player" webkit-playsinline style="display:"&&/video&\n
&div id="default" class="bar" style="display:"&\n
&div id="button" class$="button {{_buttonType}}"&&/div&\n
&div class="time currenttime" parse-text-content&{{_currentTime}}&/div&\n
&div id="progress" class="progress"&\n
&div id="ball" class="ball" style$="left: {{_progressLeft}}"&\n
&div class="inner"&&/div&\n
&div class="inner" style$="width: {{_progressLength}}"&&/div&\n
&div class="time duration" parse-text-content&{{_duration}}&/div&\n
&div id="fullscreen" class="fullscreen"&&/div&\n
&div id="fakebutton"&&/div&',
properties: {
_videoId: {type: Number},
_progressLeft: {type: Number, value: -22},
_progressLength: {type: Number, value: 0}
好了，你那么聪明，我就这么说一半好了，剩下你自己去猜。可以肯定的是：map标签在开发的时候会变成HTML + CSSmap标签在微信上可以使用类似于Cordova的形式调用 Native组件再接着说，virtual dom的事，回到示例代码里的map.js:Page({
markers: [{
latitude: 23.099994,
longitude: 113.324520,
name: 'T.I.T 创意园',
desc: '我现在的位置'
covers: [{
latitude: 23.099794,
longitude: 113.324520,
icaonPath: '../images/car.png',
rotate: 10
latitude: 23.099298,
longitude: 113.324129,
iconPath: '../images/car.png',
rotate: 90
js里只放置了data，剩下的都是依据上面的值变动的observer，如：_updatePosition_hiddenChangedlatitudeChangedlongitudeChangedscaleChangedcoversChanged...这种代码的感觉比React更进了一步的节奏，本来你还需要编码来观察state，现在只需要state变动了就可以了。。。23333....，你们这些程序员都会被fire的。好了，这里差不多就这样了~~。重新审视WXWebview.js于是，我重新逛逛WXWebview.js，发现这个文件里面不只有component的内容，还有：reportSDKwebviewSDK ??virtual_domexparserwx-components.jswx-components.css等等，你是不是已经猜到我在说什么了，上一篇中我们说到了PageFrame：
&!-- percodes --&
&!--{{WAWebview}}--&
&!--{{reportSDK}}--&
&!--{{webviewSDK}}--&
&!--{{exparser}}--&
&!--{{components_js}}--&
&!--{{virtual_dom}}--&
&!--{{components_css}}--&
&!--{{allWXML}}--&
&!--{{eruda}}--&
&!--{{style}}--&
&!--{{currentstyle}}--&
&!--{{generateFunc}}--&
在之前的想法里，我觉得我必须要集齐上面的SDK，才能招唤中神龙。后来，我看到了这句：isDev ? {
"&!--{{reportSDK}}--&": "reporter-sdk.js",
"&!--{{webviewSDK}}--&": "webview-sdk.js",
"&!--{{virtual_dom}}--&": "virtual_dom.js",
"&!--{{exparser}}--&": "exparser.js",
"&!--{{components_js}}--&": "wx-components.js",
"&!--{{components_css}}--&": "wx-components.css"
} : {"&!--{{WAWebview}}--&": "WAWebview.js"}
如果不是开发环境就使用WAWebview.js，在开发环境中使用使用xxSDK，那么生产环境是怎么回事？如果是在开发环境会去下载最新的SDK，好像不对~~，哈哈。。我猜这部分，我需要一个内测id，才能猜出这个答案。有意思的是，IDE会对比version.json，然后去获取最新的，用于预览？{
"WAService.js": ,
"WAWebview.js": ,
上面已经解释清楚了WAWebview的功能了，那么WAService.js呢——就是封装那些API的，如downloadFile：uploadFile: function (e) {
u("uploadFile", e, {url: "", filePath: "", name: ""}) && (0, s.invokeMethod)("uploadFile", e)
}, downloadFile: function (e) {
u("downloadFile", e, {url: ""}) && (0, s.invokeMethod)("downloadFile", e)
这一点上仍然相当有趣，在我们开发的时候仍然是WAWebview做了相当多的事，而它和WAService的打包是分离的。那么，我们从理论上来说，只需要有WAWebview就可以Render页面了。388 条评论分享收藏感谢收起mp./debug/wxadoc/dev/framework/MINA.html)部分，可以从微信小程序提供的开发接口上看出：1. 提供了JavsScript运行环境，由JavaScript编写的业务代码完成逻辑层的处理2. 通过数据传输接口（注册Page时的data属性及后续的setData方法调用）将逻辑层的数据传输给视图层3. 视图层由WXML语言编写的模板通过“数据绑定”与逻辑层传输过来的数据merge成展现结果并展现4. 视图的样式控制由WXSS语言编写的样式规则进行配置再分别来看这4点各自的细节问题：1. 提供了JavsScript运行环境，由JavaScript编写的业务代码完成逻辑层的处理JavaScript运行环境是什么？开发文档Q&A()中这句已给出，JS运行环境是在JsCore里：为什么脚本内不能使用window等对象页面的脚本逻辑在是在JsCore中运行2. 通过数据传输接口（注册Page时的data属性及后续的setData方法调用）将逻辑层的数据传输给视图层数据在逻辑层与视图层间如何传输？视图为纯native渲染，故位于native端。而逻辑层如上所述，是跑在JsCore中的JavaScript代码。有了JsCore，微信小程序框架的native端与js端就可以通过JsCore来相互通信了。于是，微信小程序框架的native端与js端可以约定好通信协议/规范，再把js端通过此通信协议/规范与native通信的部分封装并暴露接口为API（最上层的传输或说设置数据的API也就是上面说的注册Page时的data属性与后续的setData方法），这样逻辑层的业务代码就可以实现向视图层传输数据了。（对native其他API的调用也用类似的方法即能走通）3. 视图层由WXML语言编写的模板通过“数据绑定”与逻辑层传输过来的数据merge成展现结果并展现视图层与数据如何merge为展现结果并展现？首先看WXML语言提供的接口，发现它：类似于html/xml，用标签方式来描述视图类似angular/vue，通过指令(标签的特殊属性)与双大括号来实现模板的增强功能，使模板与数据merge为结果标签但细看发现，指令其实很简单，只提供了用于循环列表的wx:for指令，与用于控制逻辑的wx:if,wx:else,wx:elif指令双大括号内支持简单的表达式，表达式中的变量即逻辑层输入的数据每次逻辑层更新数据，视图层会相应更新merge并更新渲染考虑最简单的情况，要完成这3个功能，大致可以通过做如下事来完成：native端读取WXML模板文件，再根据逻辑层传来的数据将其中的指令与双大括号处理解析(可根据大括号表达式从数据中取值并计算，再以对表达式值进行循环与判断便可相应解除wx:for,wx:if指令)，生成与数据merge后、可以表征最终展现内容的标签串，再以解析xml的方式解析标签为带有属性的节点树，并对应节点树中各节点相应创建native中的视图元素(可能为系统组件、也可能为微信框架中的视图组件)、设置相应属性、维护为正确的父子关系即可。逻辑层数据更新时，也更新相应属性即可。当然实际处理中，要考虑的因素要多许多，也会做许多优化，但基本思路应大致如此。4. 视图的样式控制由WXSS语言编写的样式规则进行配置样式如何匹配与设置？构建出各视图元素后，仍由native读取WXSS文件，用简单字符串匹配即可将其解析为一对一对的"选择器-规则"对，规则内即为属性键值。之后再对各视图元素与"选择器-规则"对中的选择器进行匹配，匹配成功设置相应属性值（还要考虑全局样式与页面样式及style属性样式中的优先级）即可如何使用css样式对native元素进行布局？最基本的flex布局可以由facebook的css-layout来完成()另外，事件方面，native接收到用户事件后，必要时通过JsCore反向与其内运行的js进行通信，将事件数据传递给js端的框架，再由js端框架调起相应回调即可。另有一些细节可参见：欢迎讨论，望轻拍 : )155 条评论分享收藏感谢收起您的位置：
关于微信小程序(应用号)，看看这篇文章就够了
作者：i黑马
　　不是所有服务都适合接入小程序。
　　9月21日晚，微信宣布：微信“小程序”开始内测。
　　自年初1月11日张小龙在北京微信公开课上发言起，历经大半年后，万众瞩目的“微信应用号”终于现身。相比“应用号”，“小程序”这个名字更加可爱。以名字看，感觉像是突出了“将你的程序接入微信”的意思。
　　我们此前分析过微信的功能迭代节奏：一般微信重要的功能规划周期，大约会在在9-12个月的时间里，这样算起来，这次应用号从规划到上线，节奏也蛮符合。
　　我们先看下面这张据传是张小龙发在朋友圈关于小程序的评论：
　　关于这张图片，前半段我理解为小程序是微信内的云端应用，不是原生App，对用户来说很轻(对开发者来说也会更轻)。
　　后半句则应该理解为：用户用完就退出程序，离开别人的服务，但继续在自己的微信里玩朋友圈，看文章。
　　昨晚微信小程序上线后，很多朋友跑来问我对这个事情的看法，我就借这篇文章一并回答了。先说几个结论：
　　1.不是所有的服务都适合接入小程序，但大部分创业者的服务都适合接入其中。后面我们会重点分析。
　　2.小程序是基于H5开发的程序，但用了类似于JS-SDK的框架(百度以前是clouda框架)，提供了更多的接口和组件，让程序更加流畅，体验接近原生APP(Native App)。
　　3.能够云端发布程序(当然也需要微信审核)，同时也能缓存数据，实现了借助微信这个最大的Native App来让H5 App更强大的目的。
　　4.目前没有受到邀请也不要怕，按照微信操盘节奏，一定是灰度推进的。这个灰度包括对用户的逐步释放，也包括多开发者的分层授权和管理等，但不代表先发就一定有优势，后面竞争的还是产品本身，而不是时间的早晚。
　　5.大家都期望通过基于微信可以获得营销、获客和传播能力，那微信小程序释放的能量是否能满足大家的需求呢?我觉得比较悬，在产品营销和微信的克制之间，主动权还是在微信手上。
　　6.H5和JS人才将会很抢手，大家可以储备一些了。
　　微信发展到小程序这个阶段应该说是有其背后的野心的。只是微信的野心一直都装在产品的盒子里，保护得很好。
　　聊到野心，我们要先看看微信的发展历程。
　　从IM到浏览器到OS的改变
　　我曾经将微信的发展阶段分为三个阶段：IM阶段、浏览器阶段和OS阶段。IM阶段的大招是语音通信和摇一摇，浏览器阶段的大招是订阅号，OS阶段的大招可能就是小程序。
　　应该说，借助语音通信、摇一摇和朋友圈，微信迅速地建立了自己的IM优势，加上腾讯本身具有的关系链这个核心资产，微信快速获得过亿的用户。
　　而浏览器其实是OS的一种(参阅google的Chrome OS)，主要的能力是解析Html(当然包括H5)，在这个基础上，订阅号是最大的受益者，也是最强的引领者。
　　OS的核心是搭建一个平台，在上面跑服务(调用本地的server和传送云端的service)，小程序这次就是借助微信这个超级Native app，将本地应用的优势，通过微信赋能给第三方服务提供者。这是有显而易见的好处的，这个好处后面会分享。
　　此外，我认为，微信应用号会是连接人和服务的尝试，它将可能在后续完全替代掉“服务号”。
　　从互联网整体的发展和腾讯公司的整体战略来看，过去的十年，互联网解决了人与信息、商品和人的链接，未来的十年一定是链接人与服务。
　　而服务更多的是垂直的、细分的、非标准的，腾讯自己做显然是很难做到的，虽然腾讯也投资了大量的服务公司，但毕竟还有很多新兴服务和潜在的服务无法概括进来，如果有一个产品能够让所有的服务都接入进来，在这个产品上能够将服务与人直接连接，那显然是价值巨大的。
　　小程序则有可能会担负这个任务。一头是7亿用户，一头是服务提供者，通过微信平台，将海量用户与海量服务进行对接，完美!所以名字虽然是小程序，看起来很Q，但野心绝对是大的很啊!
　　以上简单说了一下小程序的背景，接下来，我们会详细地和大家分析几个事情：
　　· 哪些服务和企业最适合接入应用号
　　· 如果开发者接入应用号，产品的架构和逻辑是怎么样的?
　　· 开发者注意：基于微信小程序开发，也得拼爹
　　· 未来的小程序还留给我们哪些重要的期待
　　我们依次来看。
　　1.哪些服务和企业最适合接入应用号?
　　应该说，不是所有的服务都适用小程序，但大部分的服务和几乎所有的初创业务都是可以接入小程序的。
　　哪些服务是可以接入，哪些又是不可以接入的呢?我先看一个模型。按照重要/不重要，高频/低频，我们将互联网产品分别放入四个象限。
　　然后，我们分别看这4个象限的拥抱策略，应该说，如果你的服务是很高频的，而且对于交互和界面体验的要求很高的话，还是要用原生(Native)来做。但如果你是低频/中频且重要的服务的话，你应该毫不犹豫地加入微信小程序的申请队伍。
　　象限1：大玩家、高频应用不应该接入和拥抱小程序。
　　这个象限基本上都是大玩家，比如，3BA(360、百度、阿里巴巴)。
　　· 阿里和百度显然不会接入。
　　· 高频且重要的应用不会接入。因为用户经常打开，而且交互频次很高，对应用的体验要求很高，比如直播、游戏、视频等。
　　· 对数据安全度比较高的不应该接入。虽然微信只是读取了接口，不会直接让服务者提交数据，但因为小程序一定会提供缓存功能，开发者的服务虽然基于H5，但你是跑在微信这个原型框架内的。
　　象限2：应该毫不犹豫拥抱小程序。
　　这个象限包含了大量的服务类产品。
　　教育、医疗、家政、求职招聘、二手买卖、旅游、票务、金融理财、汽车后市场，当然理论上还有12306!
　　总之，但凡用户一年用个一两次之后就再也想不起来的，是不应该用一个原生引用的方式让用户下载，而应该是通过微信小程序来解决。
　　初创型企业也应该通过小程序来试探MVP产品，因为微信拥有天然的传播能力和获客能力，而原生应用除了开发比较复杂外，推广成本极高，获客成本极高，这些都阻碍了MVP的产品探索。
　　从这个角度来说，小程序能让中国初创的互联网公司减少试错成本，提升成功概率。
　　象限3：应该慎重接入，利用微信的开放能力，引入用户到自有产品中。
　　MVP后，尽快引导到自由产品，因为自有产品能提供更好的服务，并且能留下用户，比如知乎、网易云音乐。
　　内容型的产品，通过微信获得新用户，然后转移到自有平台，也是一个很好的策略。
　　象限4：视乎情况接入，主要看开发能力。
　　基本上很多都是个人兴趣产品、工具产品，可以从MVP的角度来做，或者以兴趣的角度来做，不考虑太多的商业产出，只考虑情怀，但这些开发者有个明显的问题，就是产品设计能力和开发能力有限，所以，如果你的人是做APP的，那就还是APP吧，如果是H5的，那就微信小程序呗。
　　2.如果开发者接入应用号，产品的架构和逻辑是怎么样的?
　　如果你打算接入小程序了，你可以试着了解下这套玩法的基本架构和逻辑关系。用户会频繁和微信交互，微信也会频繁与OS交互，当然微信也通过API的方式来获取第三方的数据，并且通过服务组件、开发工具和交互框架来定义小程序的交互样式、展现方式和扩展功能。
　　有两个方向，小程序会极大降低开发的难度。
　　· 组件与前端控件：根据目前透露的情况来看，微信小程序提供了基础组件、前段原生控件和API，目的是让一个云端的H5产品具有原生应用的组件和扩展能力。这些组件，之前是由第三方来提供的框架，这次小程序，把更多的权限也开放出来了，来帮助开发者快速接入小程序，尽量标准化和结构化去处理数据。
　　· 交互框架：早在上半年，微信就已经开始公布了一套UI和交互框架，用来统一UI规范和交互示例。这些UI规范和交互示例早早就准备好，我们有理由相信，你就是一个初级程序员，没有UI、没有前端，只会写后台PHP，也可以通过接入API的方式完成自己的小程序。
　　3.开发者注意：基于微信小程序开发，也得拼爹
　　事实上，让大家激动不已的绝对不是上面的小程序的框架、逻辑、组件这些事，因为这样的事情国外的Facebook、国内的百度都有做过。大家最期待的，是微信的关系链，而关系链本身，则是微信的命根子，这次的小程序，关系链会开放吗?我觉得是呵呵。拼爹吧。
　　首先，关系链并非不可以开放，是有条件的开放。
　　上图可以看到，这基本上算是三个开放的逻辑了。
　　· 只开放公开信息：昵称、头像，其实也就是登陆ID，所有的开发者都可以接入，比如航旅纵横。
　　· 有条件开放：开放共同使用的好友。比如大众点评。所以基于大众点评，你可以看到有好友去哪。比如美团外卖，可以看到好友头条，比如58同城旗下的转转，能看到好友在卖，但很抱歉，这个关系链的开放，目前只有腾讯投资的公司，才能享受如此特权。
　　· 更大程度的开放：除了登陆和好友关系，还开放了朋友圈权限，能把一些操作直接输送到朋友圈做动作，这个很抱歉，只有腾讯自由的产品才有，比如，QQ音乐、腾讯视频等。
　　大概的逻辑是：
　　· 亲儿子，能得到全部关系;
　　· 干儿子，能得到重合的关系，你用，我也用，相互能看到，我用你不用，我不能跟你发生联系。
　　· 外人，只能刷个脸，其他的免谈。
　　所以，大家先别激动的太早，小程序目前的开放程度还是很低的，离Facebook的全能力开放还是有差距的。
　　4.总结，未来的小程序还留给我们哪些重要的期待
　　小程序是微信的一小步，但可能是移动互联网的一大步。而微信的这套玩法，特别适合于中国市场，我们也希望这套玩法能推向全球，成为标杆产品。
　　通过阶段性的释放微信的能力，将大量的开发者和服务圈入微信生态系统，让用户真正的离不开微信，完成微信建立一座在线城市的愿望。
　　在目前看到的第一阶段，我认为微信还是会先让小程序的流程走通、邀请一些开发者来做高配和的产品打磨，毕竟现在的小程序还是MVP产品。中期来看，小程序将能够让微信实现从内容到服务的生态闭环，既能增加微信周边功能的能力(如支付、地图、广告)，也能巩固微信的唯一的移动入口地位。
　　最后的最后，如果小程序的入口是这么深的话：
　　大家还是先观察一下效果，再来决定是否要拥抱吧。
(转载请保留)
您刚刚看过
互联网的一些事，已超50万小伙伴关注！开发微信小程序，选择专业云主机
开发微信小程序，选择专业云主机
9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起了广泛关注。
对于微信小程序是什么，微信创始人张小龙先生在朋友圈里这样解释道：小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
针对微信小程序与公众号菜单栏内嵌的HTML5[简称有什么区别，到底微信小程序是不是就是一个前端JS+HTML5呢？
从网友发出来的小程序截图来看，微信小程序更像是嵌套在微信里面的一个Native APP[手机应用。Native APP和Web APP谁是未来的主流这个命题争了很多年，而Native APP最大的优势也就是对于系统控件接口和框架的调用能力比Web APP要强大很多倍。比如京东和淘宝都同时提供了手机APP和手机H5形式的页面[就手机浏览器打开淘宝网址进入的页面供用户浏览和下单，但是同时用过二者的都能体会到，H5页面在使用体验上还是差一些。
在此之前，很多创业者以公众号菜单栏内嵌H5的形式，完成了基础功能的微信化植入，但通常都是比较简单的页面，操作体验比较一般。这次微信推出的小程序，最大的亮点在于微信提供了丰富的框架组件和API接口供开发者调用，具体包含：界面、视图、内容、按钮、导航、多媒体、位置、数据、网络、重力感应等。在这些组件和接口的帮助下，建立在微信上的小程序在运行能力和流畅度上面便可以保持和Native APP一样的体验。
而建立微信小程序，除了需要在微信公众平台申请以外，还需要云主机（也称云服务器）来存储应用程序文件，比如：华夏名网云主机。
华夏名网（）作为国内标杆性优秀网络服务商，以虚拟主机、域名注册、企业电子邮局、服务器租用与托管、VPS主机、云服务器等各类电信增值服务项目为国内外数以万计之企业和个人用户提供至优互联网服务，客户遍布全国31个省市和地区（包括港澳台）乃至欧美俄各国，为数万余用户信赖并长期选择之服务商。华夏名网与英特尔、奇虎360、百度等多家公司保持着合作。
（华夏名网云主机官网）
华夏名网云服务器与英特尔合作发布，参考OpenStack底层框架自主开发Sudustack架构，使用Intel SSD固态硬盘+SAS硬盘，采用分布式储存方式+SDN万兆以太网，保证云服务器性能比普通虚拟服务器高出百倍以上，是业界同行的云服务器性能的十倍。
华夏名网云服务器定位于网站云，采用全冗余架构，多节点集群，单点故障自动迁移，拥有快速建站、CDN云节点中心、负载均衡、弹性配置、二层隔离、私有网络等特有功能，让云服务器更快速、简单、稳定。
华夏名网云主机在全国建有多个云节点中心，保证用户网站各地访问均能快速打开，除了在网站速度上做到极致，还在网站和云主机安全性上做了多层防护。
（1）华夏名网云主机具有二层隔离和私有网络功能，可以杜绝内网入侵和外部扫描。
（2）华夏名网云主机集成了网站宝建站助手，可以快速搭建web运行环境、快速创建站点和数据库，实现一分钟建站。
（3）在网站安全方面，华夏名网云服务器集成了360网站卫士云节点、云锁服务器安全软件镜像以及安全狗服务器安全软件镜像，主动防御各种木马病毒和攻击入侵。
编 辑：初夏
公司必须持续不断的、永恒的促进组织血液流动，增强优秀干部..
CCTIME推荐
CCTIME飞象网
CopyRight &
京ICP备号&& 京公网安备号
公司名称： 北京飞象互动文化传媒有限公司
未经书面许可，禁止转载、摘编、复制、镜像点击阅读原文
一个小时快速搭建微信小程序
日 发布，来源：
「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有 AppID 这个月就与小程序无缘了，庆幸的是微信这两天发布了正式版开发者工具，无需内测邀请也可以尝鲜了。
因此也就有了我与「小程序」的初体验，而我的感受只有一个字——爽！
选择哪个「小程序」Demo？
在知名同性交友网站 Github 上，「小程序」的 Demo 不少，但是大多只是简单的 API 演示，有的甚至直接把页面数据写在了 json 文件里（分明有网络请求 API）。我想体验的是能够将服务端和小程序端无缝连接起来（体验够爽）的项目。最终，我选择了腾讯云官方推出的。
「小相册」主要实现了以下功能：
列出对象存储 COS 中的图片列表。
点击左上角上传图片图标，可以调用相机拍照或从手机相册选择图片，并将选中的图片上传到 对象存储 COS 中。
轻按任意图片，可进入全屏图片预览模式，并可左右滑动切换预览图片。
长按任意图片，可将其保存到本地，或从 对象存储 COS 中删除。
效果演示图（受开发工具的限制，部分功能尚未实现）
（Cloud Object Service）是腾讯云推出的面向企业和个人开发者提供的高可用，高稳定，强安全的云端存储服务。可以将任意数量和形式的非结构化数据放入COS，并在其中实现数据的管理和处理。
之所以选择腾讯云的 Demo，一是因为它是腾讯自家推出的，项目的质量有保障；二是因为它是少有的既讲小程序开发，又介绍云端部署的项目。
稍微有点经验的程序员都知道，架构要动静分离，静态文件最好不要放在自己的服务器上，要放在专门用来存储的对象存储服务器COS上，并且用CDN 加速。「小相册」后端采用的是 Node.js，Nginx作为反向代理。
第一步：搭开发环境
首先，我们需要在本地搭建好微信「小程序」的开发环境。即下载开发者工具。微信官方已经推出了正式版 IDE，大家没有必要再去下载破解版了。打开，根据自己的操作系统选择。我使用的是 Mac 版。
安装好之后打开运行，会要求微信扫码登陆。之后，就可以看到创建项目的页面了。
选择添加项目，没有 AppID 就选无（如果乱写会报错，到时可能无法进入项目）。如果你选择的项目目录为空，请如图所示勾选在“当前目录中创建quick start项目”。
点击“添加项目”之后，我们会进入开发工具的调试页面。
第二步：下载「小相册」源码
接下来，我们下载「小相册」的源码。可以选择直接从下载，也可以从腾讯云团队的 Github 仓库拉取。我推荐从 Github 仓库拉取，这样可以及时获取最新的代码。
git clone /CFETeam/weapp-demo-album.git
最终，我们会得到类似这样的文件目录。
简单解释下目录结构：
applet（或app）: 「小相册」应用包代码，可直接在微信开发者工具中作为项目打开。
server: 搭建的Node服务端代码，作为服务器和app通信，提供 CGI 接口示例，用于拉取图片资源、上传图片、删除图片。
assets：「小相册」的演示截图。
源码下载完成之后，我们打开微信 web 开发者工具，新建项目「小相册」，选择目录applet（或app）。
「小相册」源码分析
在进行部署之前，我们来简单分析一下「小相册」的具体代码。毕竟只看效果不是我们的目的，我们的目的是以「小相册」为例，了解如何开发小程序并与服务端进行交互。
「小相册」包含一个描述整体程序的 app 和多个描述各自页面的 page。主程序 app 主要由三个文件组成，分别是 app.js（小程序逻辑）、app.json（小程序公共设置）和 app.wxss（小程序公共样式表），其中前两个为必备文件。config.js 文件中包含了一些部署域名的设置，现在不用管。
在 pages 目录下，有两个 page 页面，分别是 index 和 album。页面结构算是比较简单的，其中 index 是小程序启动时默认进入的页面。每个页面下，至少要有 .js（页面逻辑）和 .wxml（页面结构）两个文件，.wxss（页面样式表）和 .json（页面配置）文件为选填。你可能注意到了，这些文件的文件名与父目录的名称相同。这是微信官方的规定，目的是减少配置项，方便开发者。
接下来我们以 index 页面为例做简单的解释。index.wxml 是这个页面的表现层文件，其中的代码非常简单，可以分为上下两大部分。
&view class="page-top"&
&text class="username"&恭喜你&/text&
&text class="text-info"&成功地搭建了一个微信小程序&/text&
&view class="page-btn-wrap"&
&button class="page-btn" bindtap="gotoAlbum"&进入相册&/button&
&view class="page-bottom"&
&text class="qr-txt"&分享二维码邀请好友结伴一起写小程序！&/text&
&image src="../../images/qr.png" class="qr-img"&&/image&
&image src="../../images/logo.png" class="page-logo"&&/image&
页面的演示效果如下：
我们看到，页面上有一个“进入相册”的按钮。正常理解，点击后该按钮后我们就可以进入相册了（这不废话嘛）。那小程序背后是怎样实现该操作的呢？
在 index.wxml 中，我们发现对应的 button 标签上定义了一个 bindtap 属性，绑定了一个叫做 gotoAlbum 的方法。而这个方法可以在 index.js 文件中找到。事实上，文件中也只定义了这一个方法，执行的具体动作就是跳转到 album 页面。
// 前往相册页
gotoAlbum() {
wx.navigateTo({ url: '../album/album' });
album.js 页面中编写了程序的主要逻辑，包括选择或拍摄图片、图片预览、图片下载和图片删除；album.wxml 中三种视图容器 view、scroll-view、swiper均有使用，还提供了消息提示框 toast。具体方法和视图的实现请查看。所有的这些功能都写在 Page 类中。
lib 目录下提供了小程序会用的一些辅助函数，包括异步访问和对象存储 COS 的 API。
总的来说，和微信官方宣传的一样，在开发者工具下进行小程序的开发，效率确实提高了很多，而且有很多微信提高的组件和 API。所以，在开发速度这点上的体验还是非常爽的。
另外，由于「小相册」需要使用诸多云端能力，如图片的上传和下载，我们还需要进行服务器端的部署和设置。具体请看接下来的步骤。
第三步：云端部署 server 代码
虽然服务端的开发不是本文的重点，但是为了全面地体验「小相册」的整个开发部署流程，我们还是有必要了解服务端的部署，这里我们使用的是腾讯云。
如果你想更爽一点，那么可以选择腾讯云官方提供的小程序云端镜像。「小相册」的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，可以。可谓是一键部署好云端。
如果你以前没有使用过腾讯云，可以选择免费试用（我已经领取了 8 天的个人版服务器），或者以优惠的价格购买所需的服务。
你也可以选择将「小相册」源码中的server文件夹上传到自己的服务器。
第四步：准备域名和配置证书
如果你已经有腾讯云的服务器和域名，并配置好了 https，那么可以跳过第 4-6 步。
在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。简单来说，就是你的域名必须走 https 协议。所以你还需要为你的域名。如果没有域名，。由于我们没有收到内测，也就暂时不用登录微信公众平台配置通信域名了。
第五步：Nginx 配置 https
微信小程序云端示例镜像中，已经部署好了 Nginx，但是还需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。
请将红框部分换成自己的域名和证书，并且将 proxy_pass 设置为 Node.js 监听的端口，我的是 9993。
配置完成后，重新加载配置文件并且重启 Nginx。
sudo service nginx reload
sudo service nginx restart
第六步：域名解析
我们还需要添加域名记录，将域名解析到我们的云服务器上，这样才可以使用域名进行 https 服务。在腾讯云注册的域名，可以直接使用来添加主机记录，直接选择上面购买的 CVM。
解析生效后，我们的域名就支持 https 访问了。
第七步：开通和配置 COS
由于我们希望实现动静分离的架构，所以选择把「小相册」的图片资源是存储在 COS 上的。要使用 COS 服务，需要登录 ，然后在其中完成以下操作。
点击创建 Bucket。会要求选择所属项目，填写相应名称。这里，我们只需要填上自己喜欢的 Bucket 名称即可。
然后在 Bucket 列表中，点击刚刚创建的 Bucket。然后在新页面点击“获取API密钥”。
弹出的页面中包括了我们所需要的三个信息：唯一的 APP ID，一对SecretID和SecretKey（用于调用 COS API）。保管好这些信息，我们在稍后会用到。
最后，在新的 Bucket 容器中创建文件夹，命名为photos。这点后面我们也会提到。
第八步：启动「小相册」的服务端
在官方提供的镜像中，小相册示例的 Node 服务代码已部署在目录 /data/release/qcloud-applet-album 下。进入该目录，如果是你自己的服务器，请进入相应的文件夹。
cd /data/release/qcloud-applet-album
在该目录下，有一个名为 config.js 的配置文件（如下所示），按注释修改对应的 COS 配置：
module.exports = {
// Node 监听的端口号
port: '9993',
ROUTE_BASE_PATH: '/applet',
cosAppId: '填写开通 COS 时分配的 APP ID',
cosSecretId: '填写密钥 SecretID',
cosSecretKey: '填写密钥 SecretKey',
cosFileBucket: '填写创建的公有读私有写的bucket名称',
另外，cd ./routes/album/handlers，修改 list.js，将 const listPath 的值修改为你的Bucket 下的图片存储路径。如果是根目录，则修改为 '/'。当前服务端的代码中将该值设置为了 '/photos' ，如果你在第七步中没有创建该目录，则无法调试成功。
小相册示例使用 pm2 管理 Node 进程，执行以下命令启动 node 服务：
pm2 start process.json
第九步：配置「小相册」通信域名
接下来，在微信 web 开发者工具打开「小相册」项目，并把源文件config.js中的通讯域名 host 修改成你自己申请的域名。
将蓝色框内的内容修改为自己的域名
然后点击调试，即可打开小相册Demo开始体验。
最后提示一点，截止目前为止，微信小程序提供的上传和下载 API 无法在调试工具中正常工作，需要用手机微信扫码预览体验。但是由于没有内测资格，我们暂时是没办法体验了。
嗯，就这点不够爽，没有内测邀请。
很好，学习了
很好，学习了
管理员力荐啊
管理员力荐啊
233 上几次一直在和同学讨论站队的问题- -毕竟是 node~
233 上几次一直在和同学讨论站队的问题- -毕竟是 node~
我要该，理由是：
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）