WePy框架的使用

基本示例

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	打算装饰的字体。	个人大红象

• 颜色

  ​

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 布局之后，子元素的float、clear和vertical-align属性将失效。
Flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

 

 

导入wepy项目

wepy项目是依赖npm的，因此在clone下来后，

一、cmd中  进入到该下载文件目录下（cd e:\wepypro）

二、输入npm install --save-dev(报错就输入（npm init -y）)

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