jjzjj

推荐一个用了就回不去的微信小程序+TypeScript框架 - mini-core

い 狂奔的蜗牛 2023-11-05 原文

前言

        由于个人长期从事微信小程序开发，对于微信小程序开发中的一些不太方便的地方使用起来比较难受，于是催生了当前框架，快来看看原生开发都有些什么问题吧！

        个人见解或知识盲区，不喜勿喷！！

原生开发缺点

1. 取值和赋值繁琐 

        原生开发中，取值方式为this.data.x，赋值方式为this.setData({x: y})，如果代码量大，逻辑复杂。则可读性极差。

2. 对TypeScript支持性较差

        原生开发中，因为官方设计api时并未向TypeScript靠拢，而是采用option api的形式，既 Page({data: {x: y}}}) 与Component({data: {x: y}})，这种传统js的方式，后续官方通过泛型加入了对TypeScript的支持，但是多个泛型对代码组织结构和可读性都并不是很好的解决方案。

3. 代码冗余、结构不清晰

        对于开发中来说Page({data: {x: y}}}) 与Component({data: {x: y}})这样的代码是和业务逻辑无关系的，然而小程序开发中却需要这样来使用，造成代码组织结构嵌套过深。

4. 页面之间缺少有效的逻辑交互解决方案

        对于在下一个页面更改了数据，而需要在当前页面刷新数据这样的操作，通常需要实现当前页面的onShow声明周期方法，页面显示时对数据进行刷新。如果不加判断直接刷新，则会造成不必要的流量浪费和用户感知到页面的刷新，体验较差。如果判断则需要存储或者设置标识位，代码冗余且容易出错，且错误信息不易于排查。

5. 页面之间传递参数被统一处理为字符串，使用时需要手动进行类型装换

        下一个页面在接收上一个页面传入参数时，原生小程序会将所有类型的数据都转为字符串，如：true被转为了'true', 1被转为了'1'， undefined被转为了'undefined'，然而为了代码语义及增加代码可读性，我们需要将数据再次转为正确的类型，再进行代码逻辑编写，无疑增加了工作量和代码冗余。

6. 使用到的全局属性无法监听属性值是否被其他页面或组件修改

        对于整个应用的部分数据状态，我们需要记录到全局，以便多个地方共用，而原生的开发方式中，如果不去再次触发读取全局状态值，是无法感知到值是否被更改。

7. WXML文件中Mustache语法能力较弱

        WXML文件中Mustache语法对JS表达式支持较弱，微信给出的WXS解决方案对原生js语法支持度较低，且书写繁琐。而用户拿到后端返回数据时往往需要特殊处理才能正确显示在界面上。

8. 页面逻辑代码中无属性监听解决方案

        当数据变化时，需要手动调用方法触发逻辑更新，增加了代码耦合度。

如何使用

1. 项目配置支持TypeScript装饰器

        tsconfig.json文件中配置 "experimentalDecorators": true

2. 安装项目依赖

        npm install mini-core / yarn add mini-core

3. 微信开发工具选择构建npm   

4. 修改微信开发工具生成的模板配置

        小程序开发工具选择模板生成项目时，配置的编译工具不支持ts中的装饰器，所以需要自行移除以下配置，并通过其他方式来完成ts/saas/less的编译，修改project.config.json

// 移除以下配置信息
"useCompilerPlugins": [
  "typescript",
  "less"
],

5. 示例

 

示例核心代码

import {Bus, Controller, OnLoad, Reactive} from 'mini-core';
import {TodoItem} from '../../service';

@Controller
export default class Index {
  @Reactive
  public todoList: TodoItem[] = [{id: Date.now(), title: 'い 狂奔的蜗牛', finished: false}];

  @OnLoad
  public initEvent() {
    // 第三个为当前对象，传入后无需手动移除监听
    Bus.on(this, 'DELETE_TODO_ITEM', this.deleteTodoItem);
  }

  /**
   * 添加
   * @param e
   */
  public handleAdd(e: { detail: string }) {
    this.todoList.push({
      id: Date.now(),
      title: e.detail,
      finished: false
    });
  }

  /**
   * 已完成
   * @param e
   */
  public handleFinished(e: { detail: { id: number; finished: boolean } }) {
    const {id, finished} = e.detail;
    const item = this.todoList.find((item: TodoItem) => item.id === id);
    item!.finished = finished;
  }

  /**
   * 删除
   * @param id 删除项id
   */
  public deleteTodoItem(id: number) {
    const itemIndex = this.todoList.findIndex((item: TodoItem) => item.id === id);
    this.todoList.splice(itemIndex, 1);
  }
}

示例地址mini-core-todo-listhttps://github.com/llf137224350/mini-core-todo-list

都看到这了，要不继续了解下？在线文档http://www.uicoder.cn/mini_core_docs/

TypeScriptmini-corespanxff0cxff0微信小程序框架

有关推荐一个用了就回不去的微信小程序+TypeScript框架 - mini-core的更多相关文章

  1. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  2. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  3. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  4. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务？ - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  5. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  6. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  7. ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2

    我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案

  8. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  9. ruby - 一个 YAML 对象可以引用另一个吗？ - 2

    我想让一个yaml对象引用另一个，如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的ruby​​yaml解析器。这可能吗？ 最佳答案 一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir

  10. ruby-on-rails - Rails 中的推荐引擎 - 2

    我想为我的Rails网络应用程序提供推荐功能。特别是，我想向新注册的用户推荐他可能想要关注的其他用户。Rails中是否有用于此目的的引擎/gem？如果没有，我应该从哪里开始构建它？谢谢。 最佳答案 有Coletivogemhttps://github.com/diogenes/coletivo我试了一下。在MySQL上运行。Neo4jhttp://neo4j.org真的很容易实现一个“跟随谁”。事实上，大多数展示其能力的样本都涉及“跟随谁”。快速提示-只有在JRuby上运行时，Neo4j.rb才会很酷。如果不是-使用Neograph

随机推荐