WePy教程
[TOC]
基本示例
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)是一种样式表语言,用于描述用HTML或 XML(包括XML方言,如 SVG或 XHTML)编写的文档的表示。CSS描述了元素如何在屏幕上,纸上,语音或其他媒体上呈现。
CSS主要能影响以下几点:
- 【文本样式】Styling text
- 【盒子样式】Styling boxes
- 【CSS布局】CSS layout
文本样式
-
字体
术语 定义 例 serif
有衬线字体的字体(在某些字体的笔触结尾处看到的蓬勃发展和其他细节) 我的大红象 sans-serif
没有衬线的字体。 我的大红象 monospace
每个字符具有相同宽度的字体,通常用于代码清单中。 我的大红象 cursive
旨在模仿手写的字体,流畅的笔画。 我的大红象 fantasy
打算装饰的字体。 我的大红象 -
颜色
em
s :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 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
Flex布局:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
遗留问题:
- 在wepy中对TypeScript的引入的支持
- TypeScript编译的目录始终没能和wepy编译生成的目录在一块
- wepy虽然在issue中提供了一些对TypeScript支持线索,但是具体的文档没有提供,实在是一件遗憾的事
网友评论