<div class="htmledit_views" id="content_views">
<h3 style="font-size:16px;line-height:1.5;color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);"><a name="t0"></a>转自:http://www.cnblogs.com/erbingbing/p/7086212.html#3723909</h3><h3 style="font-size:16px;line-height:1.5;color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);"><br></h3><h3 style="font-size:16px;line-height:1.5;color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);"><a name="t2"></a>小程序项目开发</h3><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">在时隔半年以后,又开始了小程序之旅。
在它刚开始出现的时候,只是简单的做了 技术预研的工作。
现在 又回到 原点,发现变化已经很大了
之前的开发过程的体验不是很友好,在写完 代码之后依然需要手动刷新,
文件夹中 存放的文件 繁杂、容易让新手混乱。
现在,为了满足开发环境的需要 wepy 这个框架就出现了。
现在,我们对于 wepy 这个框架进行一系列的深入了解,
并同原生的 小程序开发做一个对比。
看看 新框架开发体验如何? </code><div class="hljs-button" data-title="复制"></div></pre><h4 style="font-size:14px;color:rgb(51,51,51);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">变化一、 项目的 文件 以及目录结构的变化。</h4><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs fortran perl" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);"><span class="hljs-number"><span class="hljs-number">1</span>.</span> 在原生的小程序的开发过程中,它的目录结构是这样的
project
├── pages
| ├── <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span>
| | ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">index</span>.json <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span> 页面配置
| | ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">index</span>.js <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span> 页面逻辑
| | ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">index</span>.wxml <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span> 页面结构
| | └── <span class="hljs-built_in" style="color:rgb(0,0,255);">index</span>.wxss <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span> 页面样式表
| └── <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span>
| ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">log</span>.json <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span> 页面配置
| ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">log</span>.wxml <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span> 页面逻辑
| ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">log</span>.js <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span> 页面结构
| └── <span class="hljs-built_in" style="color:rgb(0,0,255);">log</span>.wxss <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span> 页面样式表
├── app.js 小程序逻辑
├── app.json 小程序公共设置
└── app.wxss 小程序公共样式表
在 wepy 这个框架中的 目录结构,是这样的
project
└── src
├── pages
| ├── <span class="hljs-built_in" style="color:rgb(0,0,255);">index</span>.wpy <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">index</span></span> 页面配置、结构、样式、逻辑
| └── <span class="hljs-built_in" style="color:rgb(0,0,255);">log</span>.wpy <span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-keyword">log</span></span> 页面配置、结构、样式、逻辑
└──app.wpy 小程序配置项(全局样式配置、声明钩子等)
是不是 很类似于 vue 的 .vue 文件? 意不意外?</code><div class="hljs-button" data-title="复制"></div></pre><h4 style="font-size:14px;color:rgb(51,51,51);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">变化二、 默认使用 babel编译, 那么就是支持 ES6/7 的新特性。</h4><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);"><span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">app</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span> 文件</code><div class="hljs-button" data-title="复制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-javascript hljs"><code class="sourceCode javascript hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="im"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">import</span></span></span> wepy form <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'wepy'</span></span></span>
<span class="im"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">export</span></span></span> <span class="im"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">default</span></span></span> <span class="kw"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span></span></span><span class="hljs-class"><span class="hljs-class"> </span></span><span class="kw"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-class"><span class="hljs-keyword">extends</span></span></span></span></span><span class="hljs-class"><span class="hljs-class"> </span></span><span class="va"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="hljs-class"><span class="hljs-title">wepy</span></span></span></span></span><span class="hljs-class"><span class="hljs-class">.</span></span><span class="at"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="hljs-class"><span class="hljs-title">app</span></span></span></span></span><span class="hljs-class"><span class="hljs-class"> </span></span><span class="op">{</span>
config <span class="op">=</span> <span class="op">{</span>
<span class="dt"><span class="hljs-attr">pages</span></span><span class="op">:</span> [
<span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'pages/index'</span></span></span>
]<span class="op">,</span>
<span class="dt"><span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-attr">window</span></span></span><span class="op">:</span> <span class="op">{</span>
<span class="dt"><span class="hljs-attr">backgroundTextStyle</span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'light'</span></span></span><span class="op">,</span>
<span class="dt"><span class="hljs-attr">navigationBarBackgroundColor</span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'#fff'</span></span></span><span class="op">,</span>
<span class="dt"><span class="hljs-attr">navigationBarTitleText</span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'WeChat'</span></span></span><span class="op">,</span>
<span class="dt"><span class="hljs-attr">navigationBarTextStyle</span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'black'</span></span></span>
<span class="op">}</span>
<span class="op">}</span>
<span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">async</span></span> <span class="at">testAsync</span> () <span class="op">{</span>
<span class="kw"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">const</span></span></span> data <span class="op">=</span> <span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">await</span></span> <span class="kw"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="hljs-keyword">this</span></span></span>.<span class="at">sleep</span>(<span class="dv"><span class="hljs-number"><span class="hljs-number">3</span></span></span>)
<span class="va"><span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-built_in">console</span></span></span>.<span class="at">log</span>(data)
<span class="op">}</span>
<span class="op">}</span></code></code><div class="hljs-button" data-title="复制"></div></pre></div><h4 style="font-size:14px;color:rgb(51,51,51);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">三、支持组件化开发。</h4><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">组件的代码同 页面的代码
<span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">components</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span></code><div class="hljs-button" data-title="复制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-html hljs xml"><code class="sourceCode html hljs xml" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">panel</span></span></span><span class="hljs-tag">></span></span></span>test<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">panel</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">import</span></span></span></span></span><span class="javascript"><span class="javascript"> wepy </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">from</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">'wepy'</span></span></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">export</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">default</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">Components</span></span></span></span><span class="javascript"><span class="hljs-class"> </span></span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">extends</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="va"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">wepy</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class">.</span></span></span><span class="at"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">component</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
components </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
</span></span><span class="dt"><span class="javascript"><span class="hljs-attr">child</span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> Child
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span></span></span><span class="ss"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span></code></code><div class="hljs-button" data-title="复制"></div></pre></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">这里需要强调一点,这个同 vuejs 的开发模式太像了。
建议,如果没有 vuejs 开发经验的同学,先去使用下 vuejs 来开发
再回来看这个框架你会非常爽的。</code><div class="hljs-button" data-title="复制"></div></pre><h4 style="font-size:14px;color:rgb(51,51,51);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">四、 关于 wepy.config.js 配置说明</h4><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">看到 这个 文件的 命名方式,内心一惊,这不就是 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">webpack</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.config</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.js</span></span> 嘛
然后带着这个疑问 回到 查看 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">wepy</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.config</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.js</span></span> 文件内容</code><div class="hljs-button" data-title="复制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-javascript hljs"><code class="sourceCode javascript hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="va"><span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="hljs-built_in">module</span></span></span>.<span class="at">exports</span> <span class="op">=</span> <span class="op">{</span>
<span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'output'</span></span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'dist'</span></span></span><span class="op">,</span>
<span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'source'</span></span></span><span class="op">:</span> <span class="st"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-string">'src'</span></span></span>
...
<span class="op">}</span></code></code><div class="hljs-button" data-title="复制"></div></pre></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);"> 这简直就是 webpack 的翻版嘛,搞定这个配置。 我们继续往下看</code><div class="hljs-button" data-title="复制"></div></pre><p style="color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">五、为什么能实现这么一个功能?</p><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">我们先来看一个图</code><div class="hljs-button" data-title="复制"></div></pre><p style="color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);"><img src="https://cloud.githubusercontent.com/assets/2182004/22774706/422375b0-eee3-11e6-9046-04d9cd3aa429.png" style="border:0px;" alt=""></p><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">我觉得 这个框架的作者是讲 webpack 的构建工具 理解的很透彻,拆分, 合并。
组装,压缩等等。 最后成为 小程序官方规定的样子。</code><div class="hljs-button" data-title="复制"></div></pre><p style="color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(255,255,255);">六、API 以及相关 入口问题</p><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">一、程序入口文件 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">app</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span></code><div class="hljs-button" data-title="复制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-html hljs xml"><code class="sourceCode html hljs xml" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span></span></span><span class="ot"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"> </span><span class="hljs-attr" style="color:#FF0000;"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span></span></span><span class="st"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-tag"><span class="hljs-string">"less"</span></span></span></span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">></span></span></span><span class="css"><span class="css">
</span></span><span class="co"><span class="css"><span class="hljs-comment" style="color:#008000;"><span class="css"><span class="hljs-comment">/** less **/</span></span></span></span></span><span class="css"><span class="css">
</span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">import</span></span></span></span></span><span class="javascript"><span class="javascript"> wepy </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">from</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">'wepy'</span></span></span></span></span><span class="op"><span class="javascript">;</span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">export</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">default</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">extends</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="va"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">wepy</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class">.</span></span></span><span class="at"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">app</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
config </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"pages"</span></span></span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript">[
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"pages/index/index"</span></span></span></span></span><span class="javascript"><span class="javascript">
]</span></span><span class="op"><span class="javascript">,</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"window"</span></span></span></span></span><span class="op"><span class="javascript">:{</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"backgroundTextStyle"</span></span></span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"light"</span></span></span></span></span><span class="op"><span class="javascript">,</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"navigationBarBackgroundColor"</span></span></span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"#fff"</span></span></span></span></span><span class="op"><span class="javascript">,</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"navigationBarTitleText"</span></span></span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"WeChat"</span></span></span></span></span><span class="op"><span class="javascript">,</span></span><span class="javascript"><span class="javascript">
</span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"navigationBarTextStyle"</span></span></span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">"black"</span></span></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">};</span></span><span class="javascript"><span class="javascript">
</span></span><span class="at"><span class="javascript">onLaunch</span></span><span class="javascript"><span class="javascript">() </span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
</span></span><span class="va"><span class="javascript"><span class="hljs-built_in" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-built_in">console</span></span></span></span></span><span class="javascript"><span class="javascript">.</span></span><span class="at"><span class="javascript">log</span></span><span class="javascript"><span class="javascript">(</span></span><span class="kw"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">this</span></span></span></span></span><span class="javascript"><span class="javascript">)</span></span><span class="op"><span class="javascript">;</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span></span></span><span class="ss"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span></code></code><div class="hljs-button" data-title="复制"></div></pre></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">入口文件中的 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">config</span></span> 对象,对应着 原生小程序中的 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">app</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.json</span></span> 文件的功能一模一样。
然后 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">app</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span> 继承自 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">wepy</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.app</span></span>
二、页面 文件 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">index</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span></code><div class="hljs-button" data-title="复制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-html hljs xml"><code class="sourceCode html hljs xml" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span></span></span><span class="ot"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"> </span><span class="hljs-attr" style="color:#FF0000;"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span></span></span><span class="st"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-tag"><span class="hljs-string">"less"</span></span></span></span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">></span></span></span><span class="css"><span class="css">
</span></span><span class="co"><span class="css"><span class="hljs-comment" style="color:#008000;"><span class="css"><span class="hljs-comment">/** less **/</span></span></span></span></span><span class="css"><span class="css">
</span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span></span></span><span class="ot"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"> </span><span class="hljs-attr" style="color:#FF0000;"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span></span></span><span class="st"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-tag"><span class="hljs-string">"wxml"</span></span></span></span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">counter1</span></span></span><span class="hljs-tag">></span></span><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">counter1</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">import</span></span></span></span></span><span class="javascript"><span class="javascript"> wepy form </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">'wepy'</span></span></span></span></span><span class="op"><span class="javascript">;</span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">import</span></span></span></span></span><span class="javascript"><span class="javascript"> Counter </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">from</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">'../components/counter'</span></span></span></span></span><span class="op"><span class="javascript">;</span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">export</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">default</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">Index</span></span></span></span><span class="javascript"><span class="hljs-class"> </span></span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">extends</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="va"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">wepy</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class">.</span></span></span><span class="at"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">page</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
config </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
components </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{</span></span><span class="dt"><span class="javascript"><span class="hljs-attr">counter1</span></span></span><span class="op"><span class="javascript">:</span></span><span class="javascript"><span class="javascript"> Counter</span></span><span class="op"><span class="javascript">};</span></span><span class="javascript"><span class="javascript">
data </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
methods </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
events </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
</span></span><span class="at"><span class="javascript">onLoad</span></span><span class="javascript"><span class="javascript">() </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
</span></span><span class="co"><span class="javascript"><span class="hljs-comment" style="color:#008000;"><span class="javascript"><span class="hljs-comment">// Other properties</span></span></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span></span></span><span class="ss"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span></code></code><div class="hljs-button" data-title="复制"></div></pre></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">这个是 页面的 具体文件, 其中 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">index</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span> 继承自 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">wepy</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.page</span></span> 这个对象
那这个页面中的 属性 (钩子) <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">api</span></span> 具体有哪些?</code><div class="hljs-button" data-title="复制"></div></pre><div class="table-box"><table style="border-spacing:0px;border:1px solid #C0C0C0;color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;background-color:rgb(255,255,255);"><thead><tr class="header"><th style="border-color:#C0C0C0;border-collapse:collapse;">属性</th><th align="center" style="border-color:#C0C0C0;border-collapse:collapse;">说明</th></tr></thead><tbody><tr class="odd"><td style="border-color:#C0C0C0;border-collapse:collapse;">config</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">页面config,相当于原来的index.json,同app.wpy中的config</td></tr><tr class="even"><td style="border-color:#C0C0C0;border-collapse:collapse;">components</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">页面引入的组件列表</td></tr><tr class="odd"><td style="border-color:#C0C0C0;border-collapse:collapse;">data</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">页面需要渲染的数据</td></tr><tr class="even"><td style="border-color:#C0C0C0;border-collapse:collapse;">methods</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">wmxl的事件捕捉,如bindtap,bindchange</td></tr><tr class="odd"><td style="border-color:#C0C0C0;border-collapse:collapse;">events</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">组件之间通过broadcast,emit传递的事件</td></tr><tr class="even"><td style="border-color:#C0C0C0;border-collapse:collapse;">其它</td><td align="center" style="border-color:#C0C0C0;border-collapse:collapse;">如onLoad,onReady等小程序事件以及其它自定义方法与属性</td></tr></tbody></table></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">三、组件文件 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">components</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.wpy</span></span></code><div class="hljs-button" data-title="复制"></div></pre><div class="sourceCode" style="color:rgb(0,0,0);font-family:'microsoft yahei';font-size:14px;text-align:left;background-color:rgb(255,255,255);"><pre onclick="hljs.copyCode(event)"><code class="language-html hljs xml"><code class="sourceCode html hljs xml" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span></span></span><span class="ot"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"> </span><span class="hljs-attr" style="color:#FF0000;"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span></span></span><span class="st"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-tag"><span class="hljs-string">"less"</span></span></span></span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">></span></span></span><span class="css"><span class="css">
</span></span><span class="co"><span class="css"><span class="hljs-comment" style="color:#008000;"><span class="css"><span class="hljs-comment">/** less **/</span></span></span></span></span><span class="css"><span class="css">
</span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span></span></span><span class="ot"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"> </span><span class="hljs-attr" style="color:#FF0000;"><span class="hljs-tag"><span class="hljs-attr">lang</span></span></span><span class="hljs-tag">=</span></span></span><span class="st"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="hljs-tag"><span class="hljs-string">"wxml"</span></span></span></span></span><span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span> <span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"></</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">></span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">import</span></span></span></span></span><span class="javascript"><span class="javascript"> wepy form </span></span><span class="st"><span class="javascript"><span class="hljs-string" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-string">'wepy'</span></span></span></span></span><span class="op"><span class="javascript">;</span></span><span class="javascript"><span class="javascript">
</span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">export</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="im"><span class="javascript"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-keyword">default</span></span></span></span></span><span class="javascript"><span class="javascript"> </span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">Com</span></span></span></span><span class="javascript"><span class="hljs-class"> </span></span></span><span class="kw"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword" style="color:rgb(0,0,255);"><span class="javascript"><span class="hljs-class"><span class="hljs-keyword">extends</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="va"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">wepy</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class">.</span></span></span><span class="at"><span class="javascript"><span class="hljs-class"><span class="hljs-title" style="color:rgb(163,21,21);"><span class="javascript"><span class="hljs-class"><span class="hljs-title">component</span></span></span></span></span></span></span><span class="javascript"><span class="javascript"><span class="hljs-class"> </span></span></span><span class="op"><span class="javascript">{</span></span><span class="javascript"><span class="javascript">
components </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
data </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
methods </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
events </span></span><span class="op"><span class="javascript">=</span></span><span class="javascript"><span class="javascript"> </span></span><span class="op"><span class="javascript">{};</span></span><span class="javascript"><span class="javascript">
</span></span><span class="co"><span class="javascript"><span class="hljs-comment" style="color:#008000;"><span class="javascript"><span class="hljs-comment">// Other properties</span></span></span></span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="javascript">}</span></span><span class="javascript"><span class="javascript">
</span></span><span class="op"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag"><</span></span></span><span class="ss"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">></span></span></span></code></code><div class="hljs-button" data-title="复制"></div></pre></div><pre style="font-size:14px;text-align:left;background-color:rgb(255,255,255);" onclick="hljs.copyCode(event)"><code class="hljs css" style="vertical-align:middle;background-color:rgb(255,255,255);line-height:1.5;font-family:'Courier New', sans-serif;border-width:1px 1px 1px 2px;border-style:solid;border-color:rgb(204,204,204) rgb(204,204,204) rgb(204,204,204) rgb(33,150,243);">组件的 页面入口是 继承自 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">wepy</span></span><span class="hljs-selector-class"><span class="hljs-selector-class">.component</span></span>, 其 属性和页面属性是 一样的,除了不要 <span class="hljs-selector-tag" style="color:rgb(0,0,255);"><span class="hljs-selector-tag">config</span></span> 对象, 和 页面特有的 一些小程序 事件等。</code><div class="hljs-button" data-title="复制"></div></pre> </div>