小程序(一)WePy框架的使用

作者: ZoranLee | 来源:发表于2018-01-17 10:59 被阅读147次

    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主要能影响以下几点:

    文本样式

    • 字体

      术语 定义
      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中对TypeScript的引入的支持
    • TypeScript编译的目录始终没能和wepy编译生成的目录在一块
    • wepy虽然在issue中提供了一些对TypeScript支持线索,但是具体的文档没有提供,实在是一件遗憾的事

    相关文章

      网友评论

        本文标题:小程序(一)WePy框架的使用

        本文链接:https://www.haomeiwen.com/subject/jbnfnxtx.html