Recording the difference between the native wepy notes applet, vue, wepy

In use wepybefore, probably read the document, and sort out clearly wepyand 原生小程序, vuethe difference between subsequent post in favor of wepydevelopment, to avoid stepping pit.

Norms

1. Variables and methods to make use of camel named, and avoid using the $ at the beginning. (Because the internal framework used to avoid confusion)
2. Use ES6 development, internal frame is used ES6, ES6 and there are many benefits, it is recommended.
3. Use Promise. The default API framework for small programs provided by all performed Promise processing, you can even use the new features directly async / await and other development.
4. Event binding syntax changed, similar vue(nice ah! Never have to write original wording of the stupid X)
   • bindtap="click" Replace @tap="click"
   • catchtap="click"Replace@tap.stop="click"
   • bindtap="click" data-index={{index}}Replace @tap="click({{index}})".

Grammar

• wepyIt borrows heavily from vuethe syntax, so most vueoperations, can be in wepyuse.
• For dynamic assignment of property can be used :attr="value"the way
• .wpyFile script, template, stylethree label support langand srcproperty, langdetermine its code compilation process, srcdecide whether outreach code exists srcwhen the properties and valid, ignore inline code. E.g:

  <style lang="less" src="page1.less"></style>
      <template lang="wxml" src="page1.wxml"></template>
      <script>
      // some code
  </script>   
  复制代码

Component loops rendering differences

In the wepycycle rendering, the components need to use auxiliary labels <repeat>(personally feel and native of <block>labels similar role). chestnut:

     <repeat for="{{list}}" key="index" index="index" item="item">
        <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
        <child :item="item"></child>
    </repeat>
复制代码

More interesting is, here for, key, item, indexall do not need to add wx:the prefix, and will be easy to write quite right, personally I feel that the practice of prefixing silly, I wrote one of the most annoying place native applets time.

And vuethe methodsdifferences

WePYThe methodsproperty can only be declared page wxml labels bind, catchevents can not declare custom methods, which Vuein usage is inconsistent. In wepythe user's custom methods should methodsat the same level. Correct wording is as follows:

   methods = {
      bindtap () {
          let rst = this.commonFunc();
          // doSomething
      },
   }
  
    //正确：普通自定义方法在methods对象外声明，与methods平级
    customFunction () {
      return 'sth.';
    }
复制代码

Default babelcompiler, support for several new features ES6 / ES7 of

• Users can modify wepy.config.js (old version .wepyrc) configuration files, configuration babel familiar environment for development. Enabled by default uses some new features such as promise, async / await (must be manually turned on since WePY 1.4.1) and so on.

Use promise encapsulate native api

Native various callbacks really very stressful, but you can now write the following operations

async onLoad() {
    await wepy.login();
    this.userInfo = await wepy.getUserInfo();
}
复制代码

Data binding mechanism

wepyThe data binding mechanism and vuethe like, perform dirty checking function ends when the operating cycle , and then automatically updated to render layers. Note that the wording at the end of the function is run cycle, before doing the operation detection updates. So we asynchronous operation, the need to manually call it this.$applymethod to trigger the check for updates mechanism. example:

setTimeout(() => {
    this.title = 'this is title';
    this.$apply();
}, 3000);
复制代码

Personally feel that the description is not clear enough, so checked on the net, we need $applythe scene as follows:

• When asynchronous update data
• When manually refresh dom

other

• Loading external support NPMpackage (also native support, so nothing highlights)
• wx.requestConcurrent there is no limit (native also supported)
• wpyExtThe configuration .wpycan be changed successfully .vue, this document will become a suffix .vue, support the editor will be better