子钦加油

扩大
缩小

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方言,如 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,开启实时编译

posted on 2019-09-24 11:13  子钦加油  阅读(548)  评论(0编辑  收藏  举报

导航

返回顶部