I started to learn small program development in early May.

  1. After comparing the native development of small program with the WEPY framework, I chose MPvue. The whole learning and development process was enjoyable. Thanks to MPvue and VUE.

  2. Then, accustomed to statically typed languages, I chose TypeScript. After more than a month of learning and development experience, TS is very comfortable to use. Thank you to Microsoft, and thank you for developing a very good VS Code. I started to touch VS Code about half a year ago, I only opened it occasionally, and now I feel LIKE I already love it.

  3. Due to a Bug in mpVue’s handling of Slots, today I looked into a template preprocessing engine that uses Jinja2 (Nunjucks) as a vue template (to be honest, I don’t like PUG). When I tuned up jinja2 integration and used it to rewrite a list page, I suddenly felt strangely excited. Because I did not think of N years ago to do the server learned Jinja2 template engine, can be perfect application in small program development. (Thanks also to WebPack for making this workflow natural.)

It’s exciting to be able to code naturally, elegantly and efficiently.

Attach a small program list page template source code:

<template  lang="nunjucks">{% set placeholder = "search Android" %} {% set upperThreshold = 50 %} {% set lowerThreshold = 50 %} {% set extends "src/templates/base-list-vue-layout.jinja2" %} {% block listItems %}<div class="post-item"
       v-for="(item,index) in listItems"
       :key="index">
    <div class="post-title">{%raw%}{{item.desc}}{% endraw %}</div>
  </div>
  {% endblock %}
</template>
Copy the code

And the core code of the main logic:

@Component({
  components: {
    LoadingView,
    WeuiLoadMore,
    WeuiSearchBar
  }
})
class Index extends ListVue<Post> implements mp.PageLifecycle {
  // listItems cannot be found in Vue binding without this line declaration
  listItems: Post[] = [];
  onLoad() {
    this.loadData();
    this.showSearchBar = true;
  }

  getApiRequestOptions() {
    const url = `http://gank.io/api/data/Android/${this.pageSize}/${this.page}`;
    return{ url }; }}Copy the code

See repository address: MPVUE Applets Development Best Practices Starting Framework for the complete code