基本示例

import wepy from 'wepy';//引入wepy框架说明
// 通过继承自wepy.page的类创建页面逻辑
export default class Index extends wepy.page {
//用于页面模板绑定的数据
data={
motto: 'hello world',
userInfo: {}
} //事件处理函数(集中保存在methonds对象中)
methods = {
bindViewTap(){
console.log('button clicked');
}
} onLoad () {//页面的声明周期方法
console.log('onLoad');
}
}

WePy的基本配置

  • WePy根据npm命令来安装:

    npm install wepy-cli -g

  • 在指定的目录创建项目

    wepy new myproject
  • 切换到指定项目

    cd myproject
  • 开启实时编译

    wepy build --watch

WePy项目的目录结构

├── dist                   微信开发者工具指定的目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)
├── node_modules
├── src 代码编写的目录(该目录为使用WePY后的开发目录)
| ├── components WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)
| | ├── com_a.wpy 可复用的WePY组件a
| | └── com_b.wpy 可复用的WePY组件b
| ├── pages WePY页面目录(属于完整页面)
| | ├── index.wpy index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
| | └── other.wpy other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件)
| └── app.wpy 小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
└── package.json 项目的package配置

事件绑定语法

官网语法 替换后  
bindtap="click" @tap="click"  
catchtap="click" @tap.stop="click“  
     

catchtap和bindtap区别

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡

repeat语法

<repeat for="{{groupList}}" index="index" item="item" key="key">
<counter></counter>
</repeat>

组件化开发

import wepy from 'wepy';

export default class MyComponent extends wepy.component {
methods = {
bindtap () {
let rst = this.commonFunc();
// doSomething
}, bindinput () {
let rst = this.commonFunc();
// doSomething
},
} //正确:普通自定义方法在methods对象外声明,与methods平级
customFunction () {
return 'sth.';
} }
示例:
<template>
<view>
<panel>
<h1 slot="title"></h1>
</panel>
<counter1 :num="myNum"></counter1>
<counter2 :num.sync="syncNum"></counter2>
<list :item="items"></list>
</view>
</template> <script>
import wepy from 'wepy';
//引入List、Panel和Counter组件
import List from '../components/list';
import Panel from '../components/panel';
import Counter from '../components/counter'; export default class Index extends wepy.page {
//页面配置
config = {
"navigationBarTitleText": "test"
}; //声明页面中将要使用到的组件
components = {
panel: Panel,
counter1: Counter,
counter2: Counter,
list: List
}; //可用于页面模板中绑定的数据
data = {
myNum: 50,
syncNum: 100,
items: [1, 2, 3, 4]
}
}
</script>

promise处理

import wepy from 'wepy';

async onLoad() {
await wepy.login();
this.userInfo = await wepy.getUserInfo();
}

关键字:async await 可以直接对promise类型进行支持

wepy从以下几点能提供便利:

  • 类Vue开发风格
  • 支持自定义组件开发
  • 支持引入NPM包
  • 支持Promise
  • 支持ES2015+特性,如Async Functions
  • 支持多种编译器,Less/Sass/Styus、Babel/Typescript、Pug
  • 支持多种插件处理,文件压缩,图片压缩,内容替换等
  • 支持 Sourcemap,ESLint等
  • 小程序细节优化,如请求列队,事件优化等

CSS

层叠样式表【Cascading Style Sheets】
基本的页面样式是用CSS来做支持的。所以CSS样式对页面来讲是一个脸面的存在
注:以下CSS部分来自 https://developer.mozilla.org/en-US/docs/Web/CSS

层叠样式表(CSS)是一种样式表语言,用于描述用HTMLXML(包括XML方言,如SVGXHTML)编写的文档的表示。CSS描述了元素如何在屏幕上,纸上,语音或其他媒体上呈现。

CSS主要能影响以下几点:

文本样式

  • 字体

    术语 定义
    serif 有衬线字体的字体(在某些字体的笔触结尾处看到的蓬勃发展和其他细节) 我的大红象
    sans-serif 没有衬线的字体。 我的大红象
    monospace 每个字符具有相同宽度的字体,通常用于代码清单中。 我的大红象
    cursive 旨在模仿手写的字体,流畅的笔画。 我的大红象
    fantasy 打算装饰的字体。 我的大红象
  • 颜色

ems :1em等于在我们设计的当前元素的父元素上设置的字体大小(更具体地说,包含在父元素中的大写字母M的宽度

font-style:Used to turn italic text on and off.

CSS布局

justify-content:用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

测试页面:
http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start

align-items:属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
测试页面:
http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=stretch

p:last-child:指定属于其父元素的最后一个子元素

display: flex:Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

  • 任何一个容器都可以指定为 Flex 布局。
  • Webkit 内核的浏览器,必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}

注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。
Flex布局:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

导入wepy项目

wepy项目是依赖npm的,所以在clone下来后,

1、cmd中  进入到该下载文件目录下(cd e:\wepypro)

2、输入npm install --save-dev(报错就输入(npm init -y))

3、运行 wepy build --watch,开启实时编译

WePy框架的使用的更多相关文章

  1. 像VUE一样写微信小程序-深入研究wepy框架

    像VUE一样写微信小程序-深入研究wepy框架 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发. 小程序于M页比相比,有以下优势: 1.小程序拥有更多 ...

  2. wepy框架自定义组件编译报错not Found File XXX.wxss

    今天在自己写wepy框架组件的时候编译后报错not Found File XXX.wxss 我去,当时我很难受啊,调用组件时结构和逻辑都正常,一写样式就原地爆炸 解决之路:1.先打开编译后的dist文 ...

  3. 使用wepy框架搭建微信小程序采坑记(一)

    1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...

  4. 04——wepy框架搭建

    wepy官方文档:https://tencent.github.io/wepy/document.html#/ 1.项目下载 # .安装wepy-cli npm install wepy-cli -g ...

  5. wepy框架构建小程序(1)

    wepy框架构建小程序(1) 基本操作: # 安装脚手架工具 npm install wepy-cli -g # 创建一个新的项目 npm init standard myproject # 进入新项 ...

  6. wepy框架的API的预加载$preload这功能阔以喔

    优势:比 url 传递.或是 storage .或是 globalData 更方便 1:如 url 不能直接传一个 Object 要传的又要序列化与反序列化操作,麻烦(普通的单个变量还是挺便捷简单实在 ...

  7. 微信小程序 wepy框架 之拦截器intercepter使用

    1,在使用wepy框架创建的项目下 找到src/app.wpy 2,在app.wpy constructor方法中添加 super(); this.use('promisify');//启用ES6 p ...

  8. wepy框架关闭Eslint语法校验(error More than 1 blank line not allowed no-multiple-empty-lines)

    最近在学习使用wepy框架制作小程序,导入编译的项目后报如下错误(error  More than 1 blank line not allowed  no-multiple-empty-lines) ...

  9. 转载:wepy框架入门

    转载:https://www.jianshu.com/p/93d5a4b99777 安装 wepy 命令行工具. npm install wepy-cli -g 在开发目录生成开发DEMO. wepy ...

随机推荐

  1. 2019年Java面试题基础系列228道(1)

    1.面向对象的特征有哪些方面? 面向对象的特征主要有以下几个方面: 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这些行为 ...

  2. 代码管理平台之git

    yum install -y gitmkdir -p /date/gitrootcd !$git init git add 1.txtgit commit -m "add 1.txt&quo ...

  3. 2019蚂蚁金服中高级Java工程师面试题及答案

    面试基础 谈谈一致hash算法? 按照hash算法来将对应的key哈希到一个具有2^32次方个桶的空间中,即0~(2^32)-1的数字空间.将这些数字头尾相连,想象成一个闭合的环形.如果集群中加入新的 ...

  4. k8s采坑记 - 证书过期之kubeadm重新生成证书

    重新生成证书 证书备份 cp -rp /etc/kubernetes /etc/kubernetes.bak 移除过期证书 rm -f /etc/kubernetes/pki/apiserver* r ...

  5. 非常详细的 (VMware安装Centos7超详细过程)

    本篇文章主要介绍了VMware安装Centos7超详细过程(图文),具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.软硬件准备 软件:推荐使用VMwear,我用的是VMwear 12 镜像:Ce ...

  6. java之不同数据流应用举例

    按操作单位的不同分为:字节流(8bit)(InputStream.OuputStream).字符流(16bit)(Reader.Writer) 按数据流的流向不同分为:输入流.输出流 按角色的不同分为 ...

  7. JavaScript图形实例:布纹图案

    1.椭圆型布纹图案 先在HTML页面中设置一个画布. <canvas id="myCanvas" width="300" height="300 ...

  8. IT兄弟连 HTML5教程 Media Queries的使用方法

    在上例中,我们使用Media Queries模块来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确地作用于不同的媒体类型和同一媒体的不同条件 ...

  9. javascript中的slice()方法

    JavaScript中的Array对象提供了一个slice()方法,用于从已有的数组中返回选定的元素. arrayObject.slice(start, end) 参数说明 start 必需(否则没有 ...

  10. Mysql - 高可用方案之MMM(一)

    一.概述 本文将介绍mysql的MMM(Master-Master replication manager for MySQL)方案.官方文档地址:https://mysql-mmm.org/star ...