当前位置: 首页 > 工具软件 > wepy > 使用案例 >

wepy

周滨海
2023-12-01

代码规范:

  1. 变量与方法使用尽量使用驼峰式命名,避免使用$开头。
  2. 入口,页面,组件的命名后缀为.wpy。外链的文件可以是其它后缀。
  3. 使用ES6语法开发。 框架在ES6下开发,因此也需要使用ES6开发小程序,ES6中有大量的语法糖可以让我们的代码更加简洁高效。
  4. 使用Promise: 框架默认对小程序提供的API全都进行了 Promise 处理,甚至可以直接使用async/await等新特性进行开发。
  5. 事件绑定语法使用优化语法代替: 原bindtap=”click”替换为@tap=”click”,原catchtap=”click”替换为@tap.stop=”click”。
  6. 更多@符用法,事件传参使用优化后语法代替: 原bindtap=”click” data-index={{index}}替换为@tap=”click({{index}})”。
  7. 自定义组件命名应避开微信原生组件以及功能标签。 
  8. 不可以使用input, button, view, repeat等命名自定义组件。

wepy与vue的区别

1.二者均支持props、data、computed、components、methods、watch(wepy中是watcher), 但wepy中的methods仅可用于页面事件绑定(bind、catch事件),其他自定义方法都要放在外层,而VUE中所有方法均放在 methods下

2.wepy中props传递需要加上.sync修饰符(类似VUE1.x)才能实现props动态更新,并且父组件再 变更传递给子组件props后要执行this.$apply()方法才能更新

3.wepy支持数据双向绑定,子组件在定义props时加上twoway:true属性值即可实现子组件修改父组 件数据

4.VUE2.x推荐使用eventBus方式进行组件通信,而在wepy中是通过broadcast,broadcast,emit,$invoke 三种方法实现通信

         事件监听需要写在events属性下events = { }
       ( $broadcast:父组件触发所有子组件事件· $emit:子组件触发父组件事件 $invoke:子组件触发子组件事件)

$broadcast与$emit 还要在接受事件的组件的event里面写

父组件向子组件发送事件:   
 this.$invoke('子组件,必须要单引号括起来', '子组件方法名称',  param1,param2,param3.......)
子组件间发送事件:
this.$invoke('子组件的相对路径', '子组件方法名称',  param1,param2,param3.......);

https://wepyjs.github.io/wepy-docs/1.x/#/?id=%e7%bb%84%e4%bb%b6%e9%80%9a%e4%bf%a1%e4%b8%8e%e4%ba%a4%e4%ba%92

        自定义事件处理函数:比如:@customEvent.user=”myFn” ,还有下面几种:

  •  .default: 绑定小程序冒泡型事件,如bindtap,.default后缀可省略不写;
  • .stop: 绑定小程序捕获型事,如catchtap;
  • .user: 绑定用户自定义组件事件,通过$emit触发。

5.VUE的生命周期包括created、mounted等,wepy仅支持小程序的生命周期:onLoad、onReady等

6.wepy不支持过滤器、keep-alive、ref、transition、全局插件、路由管理、服务端渲染等VUE特性技术

 

wepy框架搭建步骤

wepy init standard <pj> ----->cd 项目目录 ---->npm install ---->npm run dev--->用微信开发者工具导入项目改设置
 gitlab: 上传本地代码 git init--->git remote add origin <git地址>----->git add . ---->git commit -m ""--->git push -u origin master

 

 类似资料:

相关阅读

相关文章

相关问答