• wepy是一个微信小程序框架


    wepy是一个微信小程序框架,支持模块化开发,开发风格类似Vue.js。可搭配redux使用,能同时打包出web和小程序。
    官方文档地址

    目录结构:

    sotre: redux(如果你创建项目时使用了redux的话)

    wepy.config.js: webpack配置文件

    app.wpy: 入口文件

    project.config.json: 小程序项目配置文件

    index.template.html: web页面的入口文件

    pages: 存放主页面

    components: 存放组件

    mixins: 混合组件

    mixins:
    其中mixins是放混合组件的地方,比如很多page中都要用到wx.showToast方法。且都是loading方法。那么我们可以创建一个toast.js


    其中wepy继承了wx对象的方法,建议在wepy框架开发中不要用到wx对象的方法,虽然运行时效果是一样,但是打包时会cli报错(wepy中没有wx对象)。
    mixins的方法定义好后,就可以在组件中使用mixins了。


    首先在mixins中注册toast,然后就可以像调用自身方法一样,直接调用this.showToast()
    wepy中组件中使用的是class,vue中使用的的是对象。

    methods, events:
    在vue中,所有方法都定义在methods里面。而在wepy中,普通方法是直接定义在class静态方法里面。而events是定义组件间交互的方法。methods中只定义事件方法。


    关于computed:

    wepy中也有computed,props,data,watch等vue中有的一些属性(没有filter, directive)。
    props,data,watch这些基本和vue无异。
    但是在wepy中computed计算属性是无法传参的(本人没能找到传参的方法,且官方文档没有提到),在处理一些动态数据的时候,只能通过其他方法来操作。
    比如,服务端获取到的的JSON对象内有条时间戳数据需要转换成字符串,我的做法是将时间戳另外传值给子组件,然后在子组件中使用computed对props进行记算。

    事件传值:
    wepy中的事件可传递一些基本类型的参数,但是需使用双括号。否则获取到的参数是字符串类型。


    引用类型的参数可以使用 微信原生的 data- 属性绑定数据,然后在函数中用e.currentTarget.dataset 获取

    组件传值:

    wepy组件传值的设计思路类似vue 1.0 。这点在官方文档讲得比较详细。需要注意是如果你需要props传递的数据跟随父组件数据变化,要使用sync修饰符。如果是异步获取的服务端数据,必须要在父组件使用 this.$apply()方法来触发子组件的刷新。
    wepy中传递数据不能直接像vue中可以传递对象的属性,如 :data="data.someData" (vue)
    在wepy中这样的写法目测读不到数据(wepy中冒似没有哪个生命周期能直接观测到数据),我使用的是 :data.sync="data",然后到子组件中使用计算属性计算。


    动态绑定class:

    在vue中使用 :class="{.........}",就可以达到目的。
    在wepy中,要使用 微信原生的绑定语法 class="test-class {{.....}}"
    其中 test-class 是不需要动态绑定的class, 双括号中才是需要绑定的class

    循环渲染组件:
    wepy的循环渲染组件,必须使用 <repeat>标签,或者微信官方的<block>标签(这两个标签都是不会渲染到dom的)否则就不会渲染成功。


    wx:if:

    wepy中使用wx:if 方法,只会阻止视图渲染,并不会阻止组件初始化。
    如果在子组件onLoad 生命周期或者计算属性中使用了一些父级传递过来的动态数据,就会报错。



  • 相关阅读:
    [转]Git忽略规则及.gitignore规则不生效的解决办法
    动漫(杂)
    《计算机图形学》2.5 ~ 2.7 学习笔记
    《计算机图形学》2.4 输入设备 学习笔记
    《计算机图形学》2.2.2 光栅扫描显示处理器
    Android 使用版本控制工具时添加忽略文件方式
    devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置(改变)显示值、固定列不移动(附源码)
    详解shape标签
    以向VS 程序打包集成自动写入注册表功能为例,介绍如何实现自由控制安装过程
    C#组件系列——又一款Excel处理神器Spire.XLS,你值得拥有
  • 原文地址:https://www.cnblogs.com/isuansuan/p/11460817.html
Copyright © 2020-2023  润新知