微信小程序js构建json_如何仅使用JSON标记构建跨平台移动应用程序

微信小程序js构建json

by Ethan

通过伊桑

如何仅使用JSON标记构建跨平台移动应用程序 (How to build cross-platform mobile apps using nothing more than a JSON markup)

For the past few months, I’ve been working on a new way to build cross-platform, native iOS and Android apps called Jasonette.

在过去的几个月中，我一直在研究一种新的方法来构建跨平台的本地 Jasonette iOS和Android应用程序。

It lets you describe an entire app with nothing but a single JSON markup.

它使您仅用一个JSON标记就可以描述整个应用程序。

If your app consists entirely of JSON, it can be treated like any other data. And it can be served remotely from the cloud on-demand.

如果您的应用程序完全由JSON组成，则可以将其视为任何其他数据。 而且可以从云按需远程提供服务。

The app logic no longer needs to be hardcoded on the device, and you can update it as much as you want just by updating your JSON on the server-side. Your app will be freshly loaded from the server every time you open it.

应用程序逻辑不再需要在设备上进行硬编码，您可以通过在服务器端更新JSON来进行任意多次更新。 每次打开应用程序时，都会从服务器中重新加载它。

Check out the video below for a quick intro:

观看下面的视频以进行快速介绍：

Jasonette has many different parts. You can express functions, templates, styles, and more all by using a JSON Markup. And as a result, you can write a super-sophisticated native mobile app in a fully Model — View — Controller manner.

Jasonette有许多不同的部分。 您可以使用JSON标记来表达函数，模板，样式等。 因此，您可以以完全的“ 模型”-“视图”-“控制器”方式编写超复杂的本机移动应用程序。

In this post I’ll show you specifically the “View” part:

在这篇文章中，我将专门向您展示“查看”部分：

1. How Jasonette expresses various cross-platform UI patterns in JSON.
   Jasonette如何在JSON中表达各种跨平台UI模式。
2. How it implements these JSON-to-Native mappings internally.
   它如何在内部实现这些JSON到本地的映射。

基本结构 (Basic Structure)

Under the hood, Jasonette works similarly to a web browser. But instead of interpreting an HTML markup and drawing a web view, Jasonette fetches a JSON markup and constructs a native view, on-the-fly.

在幕后，Jasonette的工作原理与网络浏览器相似。 但是，Jasonette无需解释HTML标记并绘制Web视图，而是获取JSON标记并即时构造本机视图。

The markup is just a JSON file that follows some predefined conventions. First of all, it starts with a$jason key, which has two children: head and body, and looks like this:

标记只是遵循一些预定义约定的JSON文件。 首先，它以$jason键开头，该键有两个孩子： head和body ，如下所示：

{  "$jason": {    "head": {      .. metadata about the document ...    },    "body": {      .. actual content to be displayed on the view ..    }  }}

设计哲学 (Design Philosophy)

When I first started designing the JSON syntax for describing native views, I had a couple of constraints in mind:

刚开始设计用于描述本机视图的JSON语法时，我想到了两个约束：

1. Native — There’s a reason why iOS and Android came up with their own native layout systems. The layout systems designed for the desktop era don’t always translate well to the small device world. The syntax should express the underlying layout in as mobile native manner as possible.

   本机 — iOS和Android提出自己的本机布局系统的原因是有原因的。 专为台式机时代设计的布局系统并不总是能很好地转化为小型设备的世界。 语法应尽可能以移动本机方式表示基础布局。

2. Cross platform — Yet it needs to be cross platform. For example, iOS has something called autolayout and visual format language but these are not implemented natively on Android, so not the right solution.

   跨平台 -但是它必须是跨平台的。 例如，iOS有一个叫做自动布局的东西 和 视觉格式语言 但是这些不是在Android上本地实现的，因此不是正确的解决方案。

3. Simple yet expressive — It should be easily expressed in a simple JSON format and easy to compose into a sophisticated structure.

   简单而富有表现力 —应该以简单的JSON格式轻松表达，并且易于组成复杂的结构。

When you take a look at how most mobile apps are built, they all boil down to a small number of common interface patterns:

当您查看大多数移动应用程序的构建方式时，它们都可以归结为少数几种常见的界面模式：

1. Vertically scrolling list
   垂直滚动列表
2. Horizontally scrolling list
   水平滚动列表
3. Absolute positioning
   绝对定位
4. Grid
   格

Let’s take a look at the first three, since they are most widely used.

让我们看一下前三个，因为它们使用最广泛。

1.章节-描述滚动列表 (1. Sections — Describing scrolling lists)

The most frequently used UI pattern is scrolling lists. On Jasonette we call them sections.

最常用的UI模式是滚动列表 。 在Jasonette上，我们称它们为sections 。

There are two types of sections: Vertical and Horizontal. Vertical sections scroll vertically, and horizontal sections horizontally.

有两种类型的部分： 垂直和水平 。 垂直部分垂直滚动，水平部分水平滚动。

实施-垂直部分 (Implementation — Vertical Sections)

This is probably the most frequently used UI for displaying data on mobile devices. On iOS, Jasonette implements this with UITableView. On Android it’s implemented with RecyclerView.

这可能是在移动设备上显示数据的最常用的UI。 在iOS上，Jasonette使用UITableView实现了这一点。 在Android上，它是通过RecyclerView实现的。

{  "body": {    "sections": [{      "items": [        {"type": "label", "text": "Item 1"},        {"type": "label", "text": "Item 2"},        {"type": "label", "text": "Item 3"}      ]    }]  }}

On iOS, above JSON markup creates a UITableView with three UITableViewCells, each of which contains a UILabel, with corresponding text attributes.

在iOS上，JSON标记上方会创建一个包含三个UITableViewCells的UITableView ，每个UITableViewCells包含一个UILabel ，并带有相应的text属性。

On Android, it creates a RecyclerView with three items, each of which is a TextView that displays the corresponding text attributes.

在Android上，它创建一个包含三个项目的RecyclerView，每个项目都是一个TextView ，显示相应的text属性。

All of these are constructed programmatically without any use of Storyboards (iOS) or XML layout files (Android) in order to make sure every detail is programmable dynamically.

所有这些都是以编程方式构造的，无需使用情节提要 (iOS)或XML布局文件 (Android)，以确保每个细节都可以动态编程。

实施-水平部分 (Implementation — Horizontal Sections)

Syntax-wise, horizontal sections are not much different, all you need to do is set the type as “horizontal”, and the items flow horizontally.

在语法方面，水平部分没有太大区别，您所要做的只是将类型设置为“ horizo​​ntal” ，并且项目水平地流动。

{  "body": {    "sections": [{      "type": "horizontal",      "items": [        {"type": "label", "text": "Item 1"},        {"type": "label", "text": "Item 2"},        {"type": "label", "text": "Item 3"}      ]    }]  }}

• Note: The syntax for the horizontal section is simple, but internally it’s actually quite complex. Horizontal sections on iOS were implemented with UICollectionView. It’s a well-known technique, but basically a horizontally scrolling UICollectionView is embedded into its parent UITableView (which scrolls vertically). And on Android, it’s implemented in a similar manner, but using nested RecyclerViews instead.

  注意：水平部分的语法很简单，但在内部实际上很复杂。 iOS上的水平部分是使用UICollectionView实现的。 这是一项众所周知的技术，但是基本上将水平滚动的UICollectionView嵌入其父UITableView(垂直滚动)中。 在Android上，它以类似的方式实现，但改用嵌套的RecyclerViews。

2.项目-描述每个滚动单元内的布局 (2. Items — Describing layout within each scrolling unit)

Now that we understand how the top level view is structured, let’s look at items. Each section is made up of multiple units of scrollable items. Note that each item has a fixed dimension and nothing inside the item itself scrolls.

现在我们了解了顶级视图的结构，让我们看一下items 。 每个部分都由多个可滚动items单元组成。 请注意，每个项目都有固定的尺寸，并且项目内部本身不会滚动。

An item can be:

一个项目可以是：

• Just a single component like a label, image, button, textarea, etc.

  只是单个组件，如label ， image ， button ， textarea等。

• A combination of all of those components
  所有这些组成部分的组合

Implementing this part was not as straight-forward as the sections implementation, because I had to choose a cross-platform, native, simple, and expressive way to form a super-sophisticated layout.

实现这一部分并不像各sections实现那样直接，因为我必须选择一种跨平台，本机，简单且富有表现力的方式来形成一个超级复杂的布局。

Thankfully, iOS and Android have very similar native layout systems called UIStackView and LinearLayout, respectively. And these layout schemes in turn are similar to CSS Flexbox, so I would say it’s as cross-platform as it can get.

值得庆幸的是，iOS和Android具有非常相似的本机布局系统，分别称为UIStackView和LinearLayout 。 这些布局方案又与CSS Flexbox相似，因此我想说它是跨平台的。

Lastly, these layout systems are infinitely composable. As seen below, you can create a vertical layout, a horizontal layout, or nest a vertical layout within a horizontal layout, and so forth, recursively.

最后，这些布局系统是无限可组合的。 如下所示，您可以递归地创建垂直布局，水平布局，或将垂直布局嵌套在水平布局中，依此类推。

To create a vertical layout, you would set the type as vertical, and then set its components:

要创建垂直布局，可以将类型设置为vertical ，然后设置其组件 ：

{  "items": [{    "type": "vertical",    "components": [      {        "type": "label",        "text": "First"      },       {        "type": "label",        "text": "Second"      },       {        "type": "label",        "text": "Third"      }    ]  }]}

Same thing with horizontal layout. Just set the type as horizontal instead:

水平布局也一样。 只需将类型设置为水平 ：

{  "items": [{    "type": "horizontal",    "components": [      {        "type": "image",        "url": "http://i.giphy.com/LXONhtCmN32YU.gif"      },       {        "type": "label",        "text": "Rick"      }    ]  }]}

Nesting layouts is as simple as specifying a layout as another layout’s component.

嵌套布局就像指定一个布局作为另一个布局的组件一样简单。

{  "items": [{    "type": "horizontal",    "components": [      {        "type": "image",        "url": "http://i.giphy.com/LXONhtCmN32YU.gif"      },       {        "type": "vertical",        "components": [{          "type": "label",          "text": "User"        }, {          "type": "label",          "text": "Rick"        }]      }    ]  }]}

I have not talked about the styling feature here for the sake of brevity, but you can style each individual component as well as the layout itself to make sure the layout looks exactly like you wanted. All you need to do is add style objects describing font, size, width, height, color, background, corner_radius, opacity, etc.

为了简洁起见，我在这里没有讨论样式功能，但是您可以为每个单独的组件以及布局本身设置样式，以确保布局看起来完全像您想要的那样。 您需要做的就是添加描述font ， size ， width ， height ， color ， background ， corner_radius和opacity等的style对象。

3.图层-也称为“绝对定位” (3. Layers — AKA “absolute positioning”)

Sometimes you may want to position items at exactly certain parts of the screen without scrolling. In CSS-terms we would call this “absolute positioning”. Jasonette supports this through what’s called layers.

有时，您可能希望将项目恰好定位在屏幕的某些特定位置而无需滚动。 在CSS术语中，我们将其称为“绝对定位” 。 Jasonette通过了所谓支持此layers 。

Currently layer supports two types of child components: image and label. You can place these components anywhere you desire on the screen this way. Here’s an example:

当前layer支持两种类型的子组件： image和label 。 您可以通过这种方式将这些组件放置在屏幕上所需的任何位置。 这是一个例子：

In this example, we have two labels (the temperature and the weather messages) and an image (the camera icon) on the screen, whose coordinates have been explicitly set to make sure they stay in place without scrolling. The markup would look something like this:

在此示例中，我们在屏幕上有两个标签(温度和天气消息)和一个图像(相机图标)，其坐标已明确设置，以确保它们保持原位而不滚动。 标记看起来像这样：

{  "$jason": {    "body": {      "style": {        "background": "camera"      },      "layers": [        {          "type": "label",          "text": "22°C",          "style": {            "font": "HelveticaNeue-Light",            "size": "20",            "top": "50",            "left": "50%-100",            "width": "200",            "align": "center"          }        },        {          "type": "label",          "text": "few clouds",          "style": {            "font": "HelveticaNeue",            "size": "15"          }        },        {          "type": "image",          "url": "https://s3.amazonaws.com/.../camera%402x.png",          "style": {            "bottom": "100",            "width": "30",            "color": "#ffffff",            "right": "30"          }        }      ]    }  }}

Amazingly enough, this is all you need to know in order to build any kind of sophisticated view you can imagine on mobile devices.

足够令人惊讶的是，这是您需要知道的一切，以便构建您可以在移动设备上想象的任何复杂视图。

Just like you can build anything with simple lego blocks, you can compose these basic components and layouts in different ways to create any sophisticated view.

就像可以使用简单的乐高积木来构建任何东西一样，您可以以不同的方式组合这些基本组件和布局以创建任何复杂的视图。

Here are some examples, 100% built by composing aforementioned UI elements:

以下是一些示例，其中100％是通过构成上述UI元素构建的：

• Instagram UI

  Instagram用户界面

• Twitter UI

  Twitter UI

超越视野 (Beyond Views)

If you read this far, you may be either thinking:

如果您读了这么远，您可能会想到：

1. “Wow cool! I wanna try this!”, or
   “哇酷！ 我想尝试一下！”，或
2. “Yeah you can probably build a toy app, but no way you can build a production app using this way!”
   “是的，您可能可以构建一个玩具应用程序，但是您无法使用这种方式构建生产应用程序！”

Like I briefly mentioned above, this is just the “View” part of Jasonette, which is the simplest part. But what’s really powerful about Jasonette is that you can actually go much further and write a full declarative program in JSON.

就像我在上面简要提到的那样，这只是Jasonette的“查看”部分，这是最简单的部分。 但是Jasonette真正强大的地方在于，您实际上可以走得更远，并用JSON编写完整的声明式程序 。

You can attach actions to UI elements, which get triggered when a user touches them. You can also trigger these actions one after another via success/error callbacks. You can also listen to certain events and automatically trigger these actions.

您可以将操作附加到UI元素，当用户触摸它们时会触发它们。 您还可以通过成功/错误回调依次触发这些操作。 您还可以听某些事件并自动触发这些动作。

Just like this, when you can describe not just a “View” but also the “Model” and the “Controller” logic (all in JSON), you can do anything.

就像这样，当您不仅可以描述“视图”，而且可以描述“模型”和“控制器”逻辑(全部使用JSON)时， 您可以执行任何操作 。

有什么可能？ (What is possible?)

Since all you need is a server that sends JSON, Jasonette is completely platform agnostic. There is no proprietary server technology you need to depend on. All you need is JSON.

由于您只需要一个发送JSON的服务器，Jasonette完全与平台无关。 您无需依赖专有的服务器技术。 您只需要JSON。

And JSON can come from anywhere, from local device, to remote servers, to even a raspberry pi!

JSON可以来自任何地方，从本地设备到远程服务器，甚至是树莓派 ！

1. Have a web app? : If you already have a web app, you can instantly build a mobile native app for your Node.js app, Rails app, Django app, PHP app, or really any web app, just by making requests to your API endpoint.

   有网路应用程式吗？ ：如果您已经有一个Web应用程序，则可以立即为Node.js应用程序，Rails应用程序，Django应用程序，PHP应用程序或实际上任何一个Web应用程序构建移动本机应用程序。 通过向您的API端点发出请求。

2. You don’t even need a server : Since you can fit an entire model-view-controller in a single, self-contained JSON file, you can pretty much store and serve it from anywhere. You can even create an app from a static JSON file served from a Pastebin or Github!

   您甚至不需要服务器：由于您可以将整个model-view-controller放入单个自包含的JSON文件中，因此您几乎可以在任何地方进行存储和提供服务。 您甚至可以使用Pastebin或Github提供的静态JSON文件创建应用程序！

3. Turn any HTML website into an app : Jasonette has a powerful HTML-to-JSON parser powered by the cheerio library which lets you transform any HTML into a JSON object. And you already know what we can do when we have JSON — you can build a native view from the transformed JSON! This way, you can build a native app from a website that doesn’t even have an API. Of course, the recommended way is to use JSON whenever you can, but this is really cool regardless.

   将任何HTML网站变成一个应用程序： Jasonette具有功能强大HTML-to-JSON解析器，该解析器由cheerio库提供支持 ，可让您将任何HTML都转换为JSON对象。 而且，您已经知道拥有JSON时我们可以做什么—您可以从转换后的JSON构建本机视图！ 这样，您可以从甚至没有API的网站构建本机应用程序。 当然，推荐的方法是尽可能使用JSON，但是无论如何这真的很酷。

I can go on forever, but here are some examples:

我可以永远继续下去，但是这里有一些例子：

A photo sharing app that lets you take a photo using the device camera and upload it to S3, and then post the entry to your own server, creating a feed:

一个照片共享应用程序 ，可让您使用设备照相机拍摄照片并将其上传到S3，然后将条目发布到您自己的服务器上，从而创建供稿：

Jasonette/s3-upload-examples3-upload-example - A Jasonette app for uploading image to S3 using $network.uploadgithub.com

Jasonette / s3-upload-example s3-upload-example-一个Jasonette应用程序，用于使用$ network.upload github.com 将图像上传到S3。

A Node.js powered Eliza Chatbot app for iOS and Android:

适用于iOS和Android的由Node.js驱动的Eliza Chatbot应用程序 ：

Jasonette/eliza-exampleeliza-example - Eliza app on the iPhonegithub.com

Jasonette / eliza-example eliza-example -iPhone github.com 上的Eliza应用

A Microblog app, complete with session management:

Microblog应用程序 ，具有会话管理功能：

Jasonette/token-authentication-exampletoken-authentication-example - A Jasonette microblog app, built with rails (server side), using devise to implement…github.com

Jasonette /令牌认证示例 token-authentication-example-一个Jasonette微博客应用程序，使用rails(服务器端)构建，使用设计实现…… github.com

A remote control app for Slack bots:

Slack机器人的远程控制应用程序：

Remote-control your Slack bots with JSONA couple of days ago, @shaunymca shared a really cool project on our slack channel. If you think about it, this is a…blog.jasonette.com

使用JSON远程控制您的Slack机器人 几天前，@ shaunymca在我们 的Slack 频道上分享了一个非常酷的项目。 如果您考虑一下，这是一个... blog.jasonette.com

An example app that turns an HTML web page into JSON and then turns it into a native app:

将HTML网页转换为JSON，然后将其转换为本地应用程序的示例应用程序：

gliechtenstein/iosdevweekly.jsoniosdevweekly.json - Native app for iOS Dev Weekly, wrrten in pure JSON.github.com

gliechtenstein / iosdevweekly.json iosdevweekly.json-iOS Dev Weekly的本机应用程序，使用纯JSON编写。 github.com

结论 (Conclusion)

Jasonette is a young project. I open-sourced the iOS version in late 2016, and the Android version a month later.

Jasonette是一个年轻的项目。 我在2016年末开源了iOS版本 ，一个月后开源了 Android版本 。

But it has already grown into a vibrant community of contributors and makers and is under active development. I hope this technology will empower anyone (not just developers) to build apps effortlessly.

但是它已经发展成为一个充满活力的贡献者和制造者社区，并且正在积极发展中。 我希望这项技术将使任何人(不仅仅是开发人员)都能轻松构建应用程序。

Sounds good? Check out the website here.

听起来不错？ 在此处查看网站。

Last but not least, you can find the Github repositories here: iOS and Android (Contributions super-welcome!)

最后但并非最不重要的一点是，您可以在以下位置找到Github存储库： iOS和Android ( 贡献力超强！ )

翻译自: https://www.freecodecamp.org/news/how-to-build-cross-platform-mobile-apps-using-nothing-more-than-a-json-markup-f493abec1873/

微信小程序js构建json