【WePY小程序框架实战一】-创建项目

项目结构

 |-- dist
|-- node_modules
|-- src
| |-- components
|-- a.wpy
|-- b.wpy
|-- ...
|-- pages
|-- index.wpy
|-- about.wpy
|-- ...
|-- store
|-- actions
|-- reducers
|-- types
|-- utils
|-- http.js
|-- ...
|-- app.wpy
|-- package.json

小程序的三个实例

  • 小程序实例 App (编译后的app.js)
  • 页面实例 Page(编译后为xx.wxml、xx.json、xx.wxss、xx.js)
  • 组件实例 Componets
import wepy from 'wepy';

// 声明一个App小程序实例
export default class MyAPP extends wepy.app {
} // 声明一个Page页面实例
export default class IndexPage extends wepy.page {
} // 声明一个Component组件实例
export default class MyComponent extends wepy.component {
}

各个实例页面详解

App页面实例 app.wpy
import wepy from 'wepy';

export default class MyAPP extends wepy.app {

    customData = {}; //自定义数据 声明 a=1,使用 this.a

    customFunction () { } //自定义方法

    onLaunch () {} //生命周期函数

    onShow () {}

    config = {}  // 配置文件 对应 app.json 文件

    globalData = {} //全局data数据 可以通过wepy.$instance.globalData访问
}
Page页面实例 (src)
import wepy from 'wepy';

export default class MyPage extends wepy.page {
customData = {} // 自定义数据 customFunction () {} //自定义方法 onLoad () {} // 在Page和Component共用的生命周期函数 onShow () {} // 只在Page中存在的页面生命周期函数 config = {}; // 只在Page实例中存在的配置数据,对应于原生的page.json文件 data = {}; // 页面所需数据均需在这里声明,可用于模板数据绑定 components = {}; // 声明页面中所引用的组件,或声明组件中所引用的子组件 mixins = []; // 声明页面所引用的Mixin实例 computed = {}; // 声明计算属性 watch = {}; // 声明数据watcher methods = {}; // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明 events = {}; // 声明组件之间的事件处理函数
}
Component组件实例

大部分同Page 不同如下

  • 没有 config
  • 没有 onShow

页面组成

每个实例页面都由三个部分组成 ,同vue

  • style
  • template
  • script
x.wpy
<style lang="less">

.container {

}

</style>

<template>
<view class="child">
<Child></Child>
</view>
</template> <script>
import wepy from 'wepy'
</script>

【WePY小程序框架实战二】-页面结构的更多相关文章

  1. 【WePY小程序框架实战四】-使用async&await异步请求数据

    [WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 [WePY小程序框架实战三]-组件传值 async await 是对promise的近一步优化,既解决了promise链 ...

  2. 【WePY小程序框架实战三】-组件传值

    [WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型. 父组件 (paren ...

  3. 【WePY小程序框架实战一】-创建项目

    最近两个小程序项目使用了微信自己出的框架wepy开发,开发完的感受就是比原生小程序顺溜很多.我就从安装到一些重点和整个项目把wepy使用整理下 全局安装WePY命令行工具 npm install we ...

  4. 应用程序框架实战二十二 : DDD分层架构之仓储(层超类型基础篇)

    前一篇介绍了仓储的基本概念,并谈了我对仓储的一些认识,本文将实现仓储的基本功能. 仓储代表聚合在内存中的集合,所以仓储的接口需要模拟得像一个集合.仓储中有很多操作都是可以通用的,可以把这部分操作抽取到 ...

  5. 应用程序框架实战二十九:Util Demo介绍

    上文介绍了我选择EasyUi作为前端框架的原因,并发放了最新Demo.本文将对这个Demo进行一些介绍,以方便你能够顺利运行起来. 这个Demo运行起来以后,是EasyUi的一个简单CRUD操作,数据 ...

  6. 应用程序框架实战二十一:DDD分层架构之仓储(介绍篇)

    前面已经介绍过Entity Framework的工作单元和映射层超类型的封装,从本文开始,将逐步介绍仓储以及对查询的扩展支持. 什么是仓储 仓储表示聚合的集合. 仓储所表现出来的集合外观,仅仅是一种模 ...

  7. 小程序框架WePY 从入门到放弃踩坑合集

    小程序框架WePY 从入门到放弃踩坑合集 一点点介绍WePY 因为小程序的语法设计略迷, 所以x1 模块化起来并不方便, 所以x2 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...

  8. 零基础入门 实战mpvue2.0多端小程序框架

    第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟 ...

  9. 快速入门 WePY 小程序【转】

    一.WePY介绍 WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性. 二.WePY 使用 1.WePY的安装或更新都 ...

随机推荐

  1. ftp服务器问题

    最近ftp服务器迁移,遇到了521问题,可以尝试以下几种方法:    1,服务器管理器->Web服务器->FTP服务器安装完:    2,检查相应文件夹的权限是否足够,    3,检查ft ...

  2. K8S+GitLab-自动化分布式部署ASP.NET Core(二) ASP.NET Core DevOps

    一.介绍 前一篇,写的K8S部署环境的文章,简单的介绍下DevOps(Development和Operations的组合词),高效交付, 自动化流程,来减少软件开发人员和运维人员的沟通.Martin ...

  3. 发起一个NetCore技术联盟促进NetCore技术应用

    一.简介 1.从十几年前开始net,到两年前转java,到去年底发现netcore2这玩艺,从此以后坚定成为netcore的追随着. 2.有心促进netcore的应用,聚集一些人员共同学习,减少技术使 ...

  4. Socket网络编程(TCP/IP/端口/类)和实例

    Socket网络编程(TCP/IP/端口/类)和实例 原文:C# Socket网络编程精华篇 转自:微冷的雨 我们在讲解Socket编程前,先看几个和Socket编程紧密相关的概念: TCP/IP层次 ...

  5. error while loading shared libraries: libudev.so.0 的问题

    在linux下运行koala的时候遇到了问题: 应该是缺少文件libudev.so.0 在/lib和/lib64目录下也都没有这个文件.然后网上找解决方案,在/lib/x86_64-linux-gnu ...

  6. JavaScript基础事件(6)

    day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html#autoid-2-3-8 事件 HTML 4.0 的新特性之一是有能力使 HTML ...

  7. mongodb因非法关闭导致无法启动的解决方案

    mongodb因非法关闭导致无法启动的解决方案 1.删除数据库目录的.lock文件 2.输入命令 mongod --repair 3.重启

  8. [bug]小米部分机型(5x、mix2)中,文字/背景闪现然后消失

    2/9更新 后来遇到float 元素也这样,改成flex布局就没问题.不知道具体原因. 描述: 使用vue 2.4开发HTML5时,遇到在小米部分机型(5x.mix2)中,文字/文字背景闪现然后消失. ...

  9. 缓存行和cpu缓存实例

    并发框架Disruptor译文 剖析Disruptor:为什么会这么快?(一)锁的缺点 剖析Disruptor:为什么会这么快?(二)神奇的缓存行填充 剖析Disruptor:为什么会这么快?(三)伪 ...

  10. centos6创建用户,设置ssh登录

    创建用户 #创建用户 useradd -s /sbin/nologin mysql useradd –d /usr/china -m china #设置密码 passwd mysql passwd c ...