wepy框架须知

安装脚手架
    1. 安装构件工具 npm i wepy-cli -g
    2.创建项目      wepy new 项目名
    3.实时编译      wepy build --watch npm run dev
    4.使用微信开发者工具新建项目,本地开发选择dist目录。
    5.微信开发者工具 --> 项目 --> 关闭ES6ES5。

代码规范:
    1.变量与方法使用尽量使用驼峰式命名,避免使用$开头。
    以$开头的方法或者属性为框架内建方法或者属性,可以被使用,使用前请[参考API文档]()2.入口,页面,组件的命名后缀为.wpy。外链的文件可以是其它后缀。
    请参考wpy文件说明

    3.使用ES6语法开发。
    框架在ES6下开发,因此也需要使用ES6开发小程序,ES6中有大量的语法糖可以让我们的代码更加简洁高效。

    4.使用Promise
    框架默认对小程序提供的API全都进行了 Promise 处理,甚至可以直接使用async/await等新特性进行开发。

构件组件
    1.components文件夹里创建 *.wpy 如果编辑器不高亮 将后缀改成 *.vue wepy.config wpyExt: '.wpy' 该成 .vue VScode可以使用插件wpy解决 在设置中设置关联 
        "files.associations": {
            "*.vue": "vue",
            "*.wpy": "vue",
            "*.wxml": "html",
            "*.wxss": "css"
        },
        "emmet.syntaxProfiles": {
            "vue-html": "html",
            "vue": "html"
        },

    2.wpy结构和vue基本一致 js导出部分react语法 

绑定参数
    1.wepyprops传递需要加上.sync修饰符(类似VUE1.x)才能实现props动态更新,并且父组件再 变更传递给子组件props后要执行this.$apply()方法才能更新
    2.wepy支持数据双向绑定,子组件在定义props时加上twoway:true属性值即可实现子组件修改父组 件数据

组件通信
    1.wepy中是通过$broadcast$emit$invoke 三种方法实现通信
        $broadcast:父组件触发所有子组件事件
            this.$broadcast('子组件在event里定义好的函数名',传递的参数)
            父子关系:
                只有import引入时才产生父子关系 slot不产生父子关系
                
        $emit:子组件触发父组件事件
            this.$emit('父级在events里定义好的函数名', 传递的参数)
            父子关系:
                只有import引入时才产生父子关系 slot不产生父子关系

        $invoke:子组件触发子组件事件
            this.$invoke('组件路径','被调用的方法名',传递的参数)
            注意: 子组件被调用的方法 不要定义在methods repeat 循环时 被循环的组件的props会合并到被循环的组件的data
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值