微信小程序框架：Wepy

最新推荐文章于 2024-01-29 11:54:56 发布
脚踏实地+仰望星空
最新推荐文章于 2024-01-29 11:54:56 发布
阅读量215
点赞数
分类专栏：微信小程序文章标签：微信小程序框架
微信小程序专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<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">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">&gt;</span></span></span>
    <span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">&gt;</span></span></span>
        <span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">panel</span></span></span><span class="hljs-tag">&gt;</span></span></span>test<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">panel</span></span></span><span class="hljs-tag">&gt;</span></span></span>
    <span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">&gt;</span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">&gt;</span></span></span>

<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</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">&lt;</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">&gt;</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">&lt;</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">&gt;</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">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">&gt;</span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</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">&lt;</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">&gt;</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">&lt;</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">&gt;</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">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">&gt;</span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</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">&gt;</span></span></span>
    <span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">&gt;</span></span></span>
    <span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">&gt;</span></span></span>
    <span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">counter1</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">counter1</span></span></span><span class="hljs-tag">&gt;</span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">&gt;</span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</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">&lt;</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">&gt;</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">&lt;</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">&gt;</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">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">style</span></span></span><span class="hljs-tag">&gt;</span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</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">&gt;</span></span></span>
    <span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">&gt;</span></span></span>  <span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">view</span></span></span><span class="hljs-tag">&gt;</span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">template</span></span></span><span class="hljs-tag">&gt;</span></span></span>
<span class="kw"><span class="hljs-tag" style="color:rgb(0,0,255);"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</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">&lt;</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">&gt;</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>
脚踏实地+仰望星空
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序框架：Wepy

&lt;div class="htmledit_views" id="content_views"&gt; &lt;h3 style="font-size:16px;line-height:1.5;color:rgb(0,0,0);font-family:'microsoft yahei';text-align:left;background-color:rgb(...
复制链接

扫一扫
专栏目录