小程序框架WePY 从入门到放弃踩坑合集

小程序框架WePY 从入门到放弃踩坑合集

一点点介绍WePY

因为小程序的语法设计略迷，
所以^x1 模块化起来并不方便，
所以^x2 各厂就出了不少的框架用以方便小程序的开发，
腾讯看到别人家都出了框架了那看来我的小程序可能真的不太方便开发咯，那我也出一个吧🤔
所以^x3 WePY 就这么横空出世了。

那小鹅鹅🐧 你早干嘛去了啊，为什么不把小程序设计的好用一点点！程序员好好玩是吧！

同样是仿原生应用你就不能学学人家Electron 把界面交给网页原生HTML 去处理么，搞一堆贼没用组件各种奇奇怪怪的问题。。

程序员何苦为难程序猿啊😂

不好意思激动了🙄

上面👆 都是我吹的其实WePY 是最早的小程序框架之一😂

WePY 是一个开发风格类似Vue.js, 支持类似Props, Mixin, Computed, Slot 等特性的风格开发，
支持组件化/模块化，NPM 依赖，Promise/Async, ESnext, Less/Sass/Styus, Babel/Typescript 的一个小程序开发框架。

语法上类似Vue.js 多一点，作为一个React 党我并没有很喜欢，但可能Vue 党也不一定就喜欢。
毕竟它只是像，并没有很一样，开发起来跟做连连看似的跟Vue.js 各种行为不一致。。

闲话就说到这了，开始说正事。

那些要注意的点

此节内容参考 小色小魔 于 2018-03-20 发布在 Segmentfault 的文章 Wepy-小程序踩坑记

ALL CREDIT GOES TO HIM THANKS ALOT

首先是文档类：

WePY首页

WePY官方文档

小程序官方文档

WePY Github Issues

然后是一些要点：

1. Data 及数据绑定

1.1 对于可能用到的所有数据要预先给值，即要先在data 中初始化；否则之后更新数据时将不会触发脏数据检查流程，也就不会触发页面重渲染。

1.2 更新数据时可以直接用 this.foo = bar, 不用微信原生的 this.setData 方法。

class Fn extends wepy.page {
   
  data = {
   
    foo: 1,
    // bar: 2, 此处不声明 bar
  }

  someFunction() {
   
    // 页面更新
    this.foo = 10;
    // 这不生效
    this.bar = 20;
  }
}

1.3 数据在模板中进行绑定时可以用 :foo=bar 的形式进行绑定。注意非字符类型的（比如说布尔值）及变量要加双大括号，否则当成字符串处理。其他的非绑定的，要直接显示的内容可直接用双大括号包住即可。双大括号内可进行简单的运算，但不支持JS 模板字符串或其他方法运算。

// Template
<component :name="{
    {myName}}">  // 绑定数据
  // 正常：渲染内容
  {
  {Greeting}}

  // 正常：渲染内容
  {
  {Greeting + 'World!'}}

  // 报错：不支持 JS模板字符串
  {
  {`${Greeting} World!`}}

  // 报错：不支持 JS 方法调用
  {
  {String(Greeting).trim()}}
</component>

// Script
class Foo extends wepy.page {
   
  data = {
   
    myName: 'WePY',
    greetings: 'Hello',
  }
}

1.4 操作方法用 @tap=function 的形式进行绑定。基本上所有微信原生的方法 bindFn=fn 都可以直接写成 @Fn=fn.

// Template
// 原生的 bindtap=fn
<view @tap="fn"></