子钦加油

扩大
缩小

wepy框架须知

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

代码规范:
    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.wepy中props传递需要加上.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中

---------------------

本文来自 y_qingcheng 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/y_qingcheng/article/details/79481653?utm_source=copy 

 

感谢大家浏览到这里~~~~

posted on 2018-09-26 17:39  子钦加油  阅读(502)  评论(0编辑  收藏  举报

导航

返回顶部