安装脚手架
. 安装构件工具 npm i wepy-cli -g
.创建项目 wepy new 项目名
.实时编译 wepy build --watch 或 npm run dev
.使用微信开发者工具新建项目,本地开发选择dist目录。
.微信开发者工具 --> 项目 --> 关闭ES6转ES5。 代码规范:
.变量与方法使用尽量使用驼峰式命名,避免使用$开头。
以$开头的方法或者属性为框架内建方法或者属性,可以被使用,使用前请[参考API文档]()。 .入口,页面,组件的命名后缀为.wpy。外链的文件可以是其它后缀。
请参考wpy文件说明 .使用ES6语法开发。
框架在ES6下开发,因此也需要使用ES6开发小程序,ES6中有大量的语法糖可以让我们的代码更加简洁高效。 .使用Promise
框架默认对小程序提供的API全都进行了 Promise 处理,甚至可以直接使用async/await等新特性进行开发。 构件组件
.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"
}, .wpy结构和vue基本一致 js导出部分react语法 绑定参数
.wepy中props传递需要加上.sync修饰符(类似VUE1.x)才能实现props动态更新,并且父组件再 变更传递给子组件props后要执行this.$apply()方法才能更新
.wepy支持数据双向绑定,子组件在定义props时加上twoway:true属性值即可实现子组件修改父组 件数据 组件通信
.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

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

wepy框架须知的更多相关文章

  1. 像VUE一样写微信小程序-深入研究wepy框架

    像VUE一样写微信小程序-深入研究wepy框架 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发. 小程序于M页比相比,有以下优势: 1.小程序拥有更多 ...

  2. wepy框架自定义组件编译报错not Found File XXX.wxss

    今天在自己写wepy框架组件的时候编译后报错not Found File XXX.wxss 我去,当时我很难受啊,调用组件时结构和逻辑都正常,一写样式就原地爆炸 解决之路:1.先打开编译后的dist文 ...

  3. 使用wepy框架搭建微信小程序采坑记(一)

    1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...

  4. 04——wepy框架搭建

    wepy官方文档:https://tencent.github.io/wepy/document.html#/ 1.项目下载 # .安装wepy-cli npm install wepy-cli -g ...

  5. wepy框架构建小程序(1)

    wepy框架构建小程序(1) 基本操作: # 安装脚手架工具 npm install wepy-cli -g # 创建一个新的项目 npm init standard myproject # 进入新项 ...

  6. wepy框架的API的预加载$preload这功能阔以喔

    优势:比 url 传递.或是 storage .或是 globalData 更方便 1:如 url 不能直接传一个 Object 要传的又要序列化与反序列化操作,麻烦(普通的单个变量还是挺便捷简单实在 ...

  7. 微信小程序 wepy框架 之拦截器intercepter使用

    1,在使用wepy框架创建的项目下 找到src/app.wpy 2,在app.wpy constructor方法中添加 super(); this.use('promisify');//启用ES6 p ...

  8. wepy框架关闭Eslint语法校验(error More than 1 blank line not allowed no-multiple-empty-lines)

    最近在学习使用wepy框架制作小程序,导入编译的项目后报如下错误(error  More than 1 blank line not allowed  no-multiple-empty-lines) ...

  9. 转载:wepy框架入门

    转载:https://www.jianshu.com/p/93d5a4b99777 安装 wepy 命令行工具. npm install wepy-cli -g 在开发目录生成开发DEMO. wepy ...

随机推荐

  1. BATJ等公司必问的8道Java经典面试题,你都会了吗?

    1.谈谈你对 Java 平台的理解?“Java 是解释执行”,这句话正确吗? 考点分析: 对于这类笼统的问题,你需要尽量表现出自己的思维深入并系统化,Java 知识理解得也比较全面,一定要避免让面试官 ...

  2. C/C++中宏定义#pragma once与 #ifndef的区别

    为了避免同一个文件被include多次,我们可以通过以下两种方式来进行宏定义: 1. #ifndef方式2. #pragma once方式 在能够支持这两种方式的编译器上,二者并没有太大的区别,但是两 ...

  3. Java面试集合(七)

    前言: Java面试集合(六) 的回顾,对于final可以修饰常量,方法,和类,一旦常量定义好后就不可改变,而方法,用final来修饰方法,方法不可重载,继承,重写,final用来修饰类,该类不能被继 ...

  4. 初识vw和vh

     最近在项目里突然看到了一行css代码,height:100vh; 一时间有点蒙蔽 因为之前有听过这个css3新增单位,但没有去了解过. 那这个单位又跟px,rem,em,%有什么不同呢? 简述:   ...

  5. [Swift]Alamofire:设置网络请求超时时间【timeout】的两种方式

    两种方式作用相同,是同一套代码的两种表述. 第一种方式:集聚. 直接设置成员属性(全局属性),这种方法不能灵活修改网络请求超时时间timeout. 声明为成员属性: // MARK: - 设置为全局变 ...

  6. sql server 性能调优之 资源等待SOS_SCHEDULER_YIELD

    一.概念 SOS_SCHEDULER_YIELD等待类型是一个任务自愿放弃当前的资源占用,让给其他任务使用.   这个等待类型与CPU有直接关系,与内存与也有间接关系,与CPU有关系是因为在sql s ...

  7. 基础编程复习:输出n以内的所有素数

    暴力遍历:对于1~n以内的每一数i 每一个i只需要考虑2~i开根号以内是否有可以让i整除的数,即(i%x==0)只要满足就不是素数 否则输出 #include<iostream> #inc ...

  8. 记一次eureka客户端注册失败的问题

    最近老大给了一台新服务器,做测试用,从装软件开始,到把整个环境搭起来,因为之前没有完成搭过,所以费了几天时间,最后总算是成功跑起来了.昨天早上来更新下项目,在测试服务器上重新发布了一下,结果发现服务注 ...

  9. 在linux上安装svn

    1. 安装svn 输入命令:yum -y install subversion 检查是否安装成功: 输入命令:svn –version 2. 创建代码仓库 输入命令:mkdir -p /usr/loc ...

  10. leetcode — two-sum

    package org.lep.leetcode.twosum; import java.util.Arrays; import java.util.HashMap; import java.util ...