V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
banxi1988
V2EX  ›  程序员

有时我都为自己开发小程序的技术组合感到兴奋。

  •  
  •   banxi1988 ·
    banxi1988 · 2018-06-23 21:07:21 +08:00 · 1897 次点击
    这是一个创建于 2343 天前的主题,其中的信息可能已经有所发展或是发生改变。

    从 大概 5 月初开始学习小程序开发.

    1. 在比较了小程原生开发和 wepy 框架之后,果断选择了 mpvue. 整个学习和开发过程体验算是愉快的。感谢 mpvue 及 vue。

    2. 然后由于之前都是习惯静态类型语言,所以果断选择了 TypeScript. 一个多月的学习开发体验下来,TS 用得很舒服。感谢微软,也感谢微软开发非常好用的 VS Code. 从大概半年前开始接触到 VS Code,之前只是偶尔打开它,现在我感觉我已经喜欢上它了。

    3. 由于 mpvue 在处理 Slots 上存在 Bug, 今天研究了一下使用 Jinja2 (nunjucks) 作为 vue 模版的模版预处理引擎(老实说,我不喜欢 pug )。 当我把 jinja2 的集成调通,并使用它将一个列表页面改写完之后, 我突然感到一种莫名的兴奋。 因为没有想到我 N 年前做服务端学过的 Jinja2 模板引擎,竟然可以完美的应用在小程序开发上。(也感谢 webpack 使这一工作流变得自然而然。)

    能够自然而然的,优雅高效的写代码,不得不让人感到兴奋。

    附一个小程序列表页面模板源代码:

    <template  lang="nunjucks">
      {% set placeholder = "搜索 Android" %}
      {% set upperThreshold = 50 %}
      {% set lowerThreshold = 50 %}
      {% 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>
    

    及主要逻辑的核心代码:

    @Component({
      components: {
        LoadingView,
        WeuiLoadMore,
        WeuiSearchBar
      }
    })
    class Index extends ListVue<Post> implements mp.PageLifecycle {
      // 如果不加这行声明,Vue 绑定的时候找不到 listItems
      listItems: Post[] = [];
      onLoad() {
        this.loadData();
        this.showSearchBar = true;
      }
    
      getApiRequestOptions() {
        const url = `http://gank.io/api/data/Android/${this.pageSize}/${this.page}`;
        return {
          url
        };
      }
    }
    

    完整代码见仓库地址: mpvue 小程序开发最佳实践起始框架

    2 条回复    2018-06-24 08:22:31 +08:00
    xeaglex
        1
    xeaglex  
       2018-06-24 03:54:29 +08:00
    > 没有想到我 N 年前做服务端学过的 Jinja2 模板引擎,竟然可以完美的应用在小程序开发上

    我理解类似你这种的感受
    lsoknet
        2
    lsoknet  
       2018-06-24 08:22:31 +08:00 via Android
    小程序是什么?有什么用?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1084 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:56 · PVG 02:56 · LAX 10:56 · JFK 13:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.