• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

为原生移动应用引入Vue和Weex

ngkoma • 2年前 (2022-06-06) • JavaScript

vue 是一种流行的用于 Web 应用程序的javascript框架，可以轻松地将内存中的数据与用户界面绑定。现在 Weex 允许我们使用 Vue 框架编写原生移动应用程序！

为什么我们使用 Vue 和其他数据绑定框架，如angular和react？他们有什么特别之处？我们使用它们来确保存储在内存中的应用程序数据与用户界面保持同步，反之亦然。 

我们还使用这些框架使我们能够以一种针对性能进行优化的方式非常快速地构建应用程序。

在本教程中，我将向您展示如何使用 Vue 框架，特别是如何理解其数据绑定和模板的概念。然后，我将继续介绍 Weex 平台，用于使用 Vue 编写原生移动应用程序！

数据绑定

让我们看一个简单的例子来了解这些框架如何真正节省我们的时间。我们想要的是一个与我们的应用程序数据保持同步的简单输入字段。我们的应用程序本身可以通过编程方式更改数据，用户可以通过用户输入来更改数据，因此我们需要同时查看 UI 和应用程序数据。

为原生移动应用引入Vue和Weex 第1张

编写支持这种数据绑定的代码会很冗长。我们需要创建事件***器、代理对象和可观察对象来捕获应用程序数据中的任何更改。随着更多类型的数据和输入的添加，这些复杂性只会越来越大。Vue 和其他数据绑定框架使我们不必编写所有绑定代码。 

使用 Vue，如果我们的用户更改了一些输入数据，它将同步回应用程序数据，如下所示：

为原生移动应用引入Vue和Weex 第2张

或者，如果应用程序更改了数据，它将像这样更新用户界面：

为原生移动应用引入Vue和Weex 第3张

当我们将用户界面和应用程序数据保持同步时，这意味着我们的应用程序完全按照我们的预期进行。Vue 将管理所有这些，并允许其他强大的数据绑定过程发生。

开始设置

现在我们知道了为什么要使用这些框架，让我们建立一个简单的 Vue 应用程序来运行一些示例。在计算机上的任意位置创建一个新的html文件并将以下代码粘贴到其中：

<!DOCTYPE html> <html> <head> 
  <title>Tuts+ Vue</title> 
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </ head> <body> 
  <div id="app"> 
    
  </div> 
  <script> 
    var app = new Vue({ el: '#app' }); 
  </script> </body> </html>

这是一个链接到 Vue JS 库的简单 HTML 文件。它包含一个divID 为 的元素app。在脚本标签中，我们有一个名为的变量app，我们用它来指向我们的视图——我稍后会解释这部分。

然后我们创建一个新的 Vue 实例，或“视图”。这个const ructor 告诉框架哪个元素将包含我们的应用程序 UI 并使其与应用程序数据保持同步。 

现在双击 HTML 文件在浏览器中打开它，然后打开浏览器控制台窗口。

为原生移动应用引入Vue和Weex 第4张

文本插值

文本插值允许我们在 HTML 代码中嵌入表达式，这些表达式将在页面呈现时进行解释。表达式是实时的，因此如果它们所依赖的数据发生变化，页面将实时更新。这称为声明式渲染，它允许我们将表达式放置在元素内容中的任何位置。让我们用一个简单的例子来回顾一下。

JS

<script>
    var app = new Vue({
        el: '#app',
        data:
        {
            message: "Hello world"
        }
    });
</script>

我们的 JavaScript 代码现在包含一个data对象，该对象将存储此视图的所有应用程序数据。在其中，我message使用字符串创建了属性"Hello world"。 

接下来，让我们在 HTML 中显示这个属性。

HTML

<div id="app"> 
  <pre style="font-family: 'helvetica'; "> 
      {{ message }} 
      
      {{ message.split('').reverse().join('') }} 
    < /pre> </div>

表达式用双括号语法表示。Vue JS 管理每个表达式的依赖关系，并在它们发生变化时实时更新页面。在我们的例子中，我们有两个表达式，message属性是每个表达式的依赖项。第一个表达式{{ message }} 只显示消息属性。第二个{{ message.split('').reverse().join('') }} 表达式采用 message 属性，然后：

  • 将字符串拆分为数组：
    [ "h","e","l","l","o"," ","w","o","r","l","d" ]

  • 反转数组的顺序：
    [ "d","l","r","o","w"," ","o","l","l","e","h" ]

  • 将数组连接在一起得到 "dlrow olleh"，这是相同的消息，但向后打印。

现在打开浏览器并刷新 HTML 页面。然后打开浏览器的控制台窗口并分配app.message 一个新值，看看输出在浏览器中是如何更新的。

为原生移动应用引入Vue和Weex 第5张

您还可以在模板表达式中使用数学，或在对象中使用结构化数据。实际上，正如您可能已经猜到的那样，Vue 表达式只是 javaScript。但是，对全局变量的访问是沙盒化的，因此您可以访问Math，但不能访问window. 这有助于确保您的应用程序和您的用户的安全。 

通过使用 Vue 只需几行代码，我们就可以拥有高级的双向数据绑定。这确保了用户界面和应用程序数据相对容易同步。 

指令

指令是我们视图中绑定数据的另一种方式。我们可以使用它们将应用程序数据绑定到属性、事件、输入字段和可重复数据。让我们浏览每个指令并了解它们是如何工作的。

  • v-bind: 绑定一个属性值

  • v-model：将应用数据绑定到输入元素，例如textarea

  • v-on: 定义事件处理程序

  • v-for: 绑定到数组或对象

v-bind指示

该v-bind 指令用于属性数据绑定。它允许我们将应用程序数据绑定到属性的值。将其视为文本插值，但在属性内。 您可以使用该指令 绑定 class、 id或 value 任何其他属性 。v-bind

对于此示例，我想使用指令将我们的应用程序数据绑定到data-attr属性。v-bindv-bind:data-attr

JS

<script>
    var app = new Vue({
        el: '#app',
        data:
        {
            number: 20,
            object:
            {
                type: "Full Name Object",
                names: ["Lawrence","Anothy","Turton"]
            }
        }
    });
</script>

HTML

<div id="app">

  <div v-bind:data-attr=" object.type ">
    {{ object.type }} 
  </div>

  <div v-bind:data-attr=" object.names ">
    {{ object.names }}  
  </div>

  <div v-bind:data-attr=" number * 20 / 2 ">
    {{ number * 20 / 2 }}
  </div>

  <div v-bind:data-attr=" [ object.type, object.names, number * 20 / 2 ] ">
    {{ [ object.type, object.names, number * 20 / 2 ] }}
  </div>

</div>

在上面的示例中，我们将一个属性调用data-attr到一系列不同的数据源。首先，我们将它绑定到 的type 和names属性object。然后我们将它绑定到一个数学表达式，然后将所有绑定连接到一个数组属性中。

查看浏览器中的输出：您可以单击“元素”选项卡以查看每个属性值的输出。

为原生移动应用引入Vue和Weex 第6张

同样，您可以在控制台中更改应用程序数据以查看数据绑定过程。

为原生移动应用引入Vue和Weex 第7张

将该v-bind指令视为允许属性值中的表达式。使用 Vue 库，这是非常强大且易于建立的。

v-model指示

该指令专门用于使应用程序数据与输入字段、文本区域和选择元素保持同步。这是一个例子：

JS

<script>
    var app = new Vue({
        el: '#app',
        data:
        {
          message: "message string",
          selected:"",
          checkedNames: []
        }
    });
</script>

HTML

<div id="app">

  <input type="text" v-model="message">

  <textarea v-model="message"></textarea>

  <hr>

  <select v-model="selected">
    <option disabled value="">Select a name</option>
    <option>Jack</option>
    <option>John</option>
    <option>Mike</option>
  </select>
  <span>Selected: {{ selected }}</span>

  <hr>

  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>

  <select v-model="checkedNames" multiple>
    <option>Jack</option>
    <option>John</option>
    <option>Mike</option>
  </select>
  <br>
  <span>Selected Names: {{ checkedNames }}</span>

</div>

对于本页的第一部分，我们有一个文本输入字段和文本区域，它们都具有v-model使这些输入字段与message 属性保持同步的指令，使用 v-model="message". 这样，如果您更改其中任何一个，模型将被更新，然后另一个输入字段将被更新。来试试吧！

为原生移动应用引入Vue和Weex 第8张

在下一节中，我们有一个下拉菜单与 selected属性  同步v-model="selected"。这样，如果选择更改，我们的模型将被更新。

为原生移动应用引入Vue和Weex 第9张

最后，我们有一个多项选择。我已经通过两种方式展示了如何做到这一点：使用多个复选框和使用多个选择输入。因为我们可以有多个值，所以我创建了 checkedNames可以存储多个值的数组。多选输入和复选框每个都有一个指令 v-modeltarget属性checkNames 。试一试，它们应该在您进行选择时保持同步。

为原生移动应用引入Vue和Weex 第10张

v-on 指令_

该指令允许我们将事件附加到 HTML 元素。该指令可用于某些可以附加输入事件的元素，例如悬停、单击、文本输入、按键等。对于这个例子，我们将创建一个带有点击事件的简单按钮。

JS

<script>
    var app = new Vue({
        el: '#app',
        data:
        {
          clicked: ""
        }
    });
</script>

HTML

<div id="app">

  <button v-on:click=" [ alert('hello'), clicked = 'hello' ] ">Click me!</button>

  {{ clicked }}

</div>

在 v-on 指令中，在冒号之后，我们指定要附加的事件。在这个例子中，当 click事件被触发时，我们将运行一些表达式。首先，我们打开一个警告对话框，然后我们更改clicked属性的值。请注意，您可以在v-on表达式中调用函数。

为原生移动应用引入Vue和Weex 第11张

v-for指示

该指令是其中最强大的指令之一。我们可以观察任何对象或数组的变化，并为在该对象或数组中找到的每个属性或元素重复渲染模板代码的一部分。例如，要将名称数组呈现为列表：

JS

<script>
    var app = new Vue({
        el: '#app',
        data:
        {
          names: [ "Lawrence", "John", "Mike", "Justin" ]
        }
    });
</script>

HTML

<div id="app">

  <ul>
    <li v-for="name in names">{{ name }}</li>
  </ul>

</div>

在此示例中，我们首先将v-for指令附加到您要重复的元素上。该指令的值指定了我们想要迭代的对象或数组 ( names) 以及一个包含每次迭代值的变量 ( name)。现在，在这个重复的元素中，我们可以 name在表达式中使用变量。

如果我们随后修改数组，例如使用 push,sort 或reverse之类的方法，模板数据将自动更新。尝试运行示例并在控制台窗口中修改数组。

为原生移动应用引入Vue和Weex 第12张

成分

数据绑定过程发生在视图中。组件只是我们可以在整个应用程序中重复使用的可重用视图。每个组件都必须有一些模板数据作为用户界面和一些应用程序数据的一部分呈现。如果需要，您可以选择包含一些样式。

让我们再次使用该v-for指令来输出列表项。但这一次，我们将把每个项目都变成一个组件。我们将为这个组件命名，以便我们可以在模板代码中定位它：  list-item. 组件也可以具有“注册属性”，我们可以在创建组件时为其分配要分配的值。在我的例子中，list-item组件将期望接收一个name 属性值，定义为 props:["name"]. 

现在让我们创建这个组件。请将以下代码添加到您的脚本标签中：

JS

Vue.component('list-item', { 
  template: '<li>{{ name }}</li>', 
  props: [ "name" ] });

还要确保您有以下应用程序数据：

var app = new Vue({ 
    el: '#app', 
    data: 
    { 
        names: [ "Lawrence", "John", "Mike", "Justin" ] 
    } });

HTML

<div id="app"> 
  <ul> 
    <list-item v-for="name in names" v-bind:name="name"></list-item> 
  </ul> </div>

在这里，您可以看到该 list-item组件将为数组中找到的每个名称重复。每个名称都将分配给v-for指令中定义的名称变量。我们name使用 . 将属性传递给组件v-bind。

每个实例只是组件的一个副本。我们可以相互独立地修改每个副本或实例。因此，将组件视为蓝图，将实例视为从蓝图制作的副本。这是最终结果：

为原生移动应用引入Vue和Weex 第13张

编译和 Vue CLI

我们一直在使用一个非常简单的 HTML 文件，并让 Vue 在运行时解释所有内容。但是，Vue 确实带有一个命令行工具。你可能会问自己为什么。一个原因是预编译的页面模板将比 Vue 在运行时解释的模板执行得更好。另一个原因是，如果我们要构建一个大型应用程序并尝试将其放入一个 HTML 文件中，它很快就会变得难以管理。 

所以我们需要模块化来将大型应用程序分解成更小的部分。 

安装 Vue CLI

要使用命令行，您需要为您的操作系统打开控制台窗口。

  • 对于mac，按Command-Space  ，然后键入terminal并按Return。

  • 对于 Windows，在启动菜单中搜索命令提示符，确保右键单击并“以管理员身份打开”。

  • 对于 Linux，请按Control-Alt-T。

在继续之前，请确保您已安装最新版本的node .js。然后我们需要安装webpack，它将压缩我们项目的文件大小，使其在我们的浏览器中更快。然后我们可以安装 Vue CLI 并为您的平台运行相关命令：

Mac和 Linux

  • sudo npm install -g webpack

  • sudo npm install -g vue-cli

Windows（确保以管理员身份运行控制台）

  • npm install -g webpack

  • npm install -g vue-cli

而已！我们现在准备开始设置我们的高级 Webpack 项目。首先，导航到我们要创建项目的目录，在我的例子中是桌面，然后创建项目。您可以将 myapp替换为您想要的任何项目名称。

  • vue init webpack myapp

您将被引导完成一系列关于您的项目的问题，提示您填写标题和描述等数据，并询问您是否安装第三方插件。对于此示例，您可以对所有可选附加项回答“否”。创建后，我们需要安装依赖项，因此导航到项目目录，我们将运行安装命令。

  • cd myapp

  • npm install

让 NPM 安装所有依赖包，然后我们就可以继续了。 

创建一个 Vue 项目

一旦安装了软件包，我们就可以通过键入来运行开发服务器npm run dev。您的浏览器窗口应该打开，显示以下页面。

为原生移动应用引入Vue和Weex 第14张

我们不会介绍整个项目的结构，但是当你打开myapp 目录你会看到 src目录。它包含一个App.vue文件、一个 main.js 文件以及在组件目录中的 Hello.vue文件。

Vue 文件是组件。main.js文件配置初始视图和可能的其他配置。让我们看一下App.vue和Hello.vue文件。

为原生移动应用引入Vue和Weex 第15张

在这里你可以看到每个 Vue 组件被分解为三个部分：

  • <template>：构成 UI 一部分的 HTML 标记。

  • <script>：应用程序数据、过滤器、方法、计算属性、观察者和方法。

  • <style>: 我们组件的css或 Sass 样式。

汇编

将所有组件编译在一起将产生一个大型应用程序。这意味着当我们进行开发时，我们会处理称为组件的小型模块化代码，而不是整个应用程序。在 Vue 中，我们有包含 JavaScript、HTML 和 CSS 的单文件组件。如果您选择使用这些语言，它甚至会负责将 ES6 转换为 ES5、将 Sass 转换为 CSS 以及将Jade转换为 HTML。

您会在App.vue文件中注意到，我已经突出显示了它导入Hello.vue组件的位置。组件可以嵌套在其他组件中！ 

编译时，我们的项目是按照以下流程构建的：

为原生移动应用引入Vue和Weex 第16张

我们仍然使用与前面示例中相同的语法。但是，我们现在正在处理较小的 Vue 文件并将它们一起编译。我们还有一些更高级的功能，比如预处理器和 Jade、Sass、ES6 和 Webpack 压缩。

微信

现在我们了解了 Vue 库，让我们快速浏览一下如何将我们的 Web 应用程序转变为可安装在ios或android上的原生移动应用程序。 

Weex 是一个混合框架，这意味着它允许多种技术，就像混合动力汽车可以使用电动和汽油一样。在我们的例子中，我们使用 Web 应用程序中的 JavaScript 代码，但我们渲染到本机用户界面。此外，通过 JavaScript，我们可以访问设备的原生 api来访问摄像头、传感器和文件系统等硬件。

为原生移动应用引入Vue和Weex 第17张

使用 Weex，我们使用 XML，而不是将我们的应用程序渲染为 HTML。实际上，HTML 和 XML 非常相似，因此语法看起来很熟悉。然后，此 XML 将被转换为本机组件。现在我们的 JavaScript 将能够与那些原生组件对话，就像在 Vue 中使用 HTML与dom对话一样。不仅如此，原生组件还可以使用 CSS 设置样式和定位，包括动画、过渡等，并且它们可以集成到原生层。

这只是 Weex 可以做什么的预告片。在接下来的教程中，我将带您更深入地了解 Weex，我们将了解如何构建一些实用的跨平台原生应用程序。

优点

Vue 具有简单的语法，并且正在迅速普及。Weex 允许我们使用 JavaScript 和 Vue 构建移动应用程序，但仍提供原生应用程序体验。 

缺点

Vue 本身是稳定的，但 Weex 仍处于早期开发阶段——它目前驻留在 Apache 孵化器中。不过不用担心，Weex 很快就会投入生产，并且得到了科技巨头阿里巴巴的支持。因此，如果您担心构建开发者预览版，您可能会等到 Weex 完全发布。 

结论

您现在已经了解了数据绑定如何成为使用 Vue 和类似框架的关键原因。它们节省了我们的开发时间，并提供了构建应用程序的标准方法。您还了解了如何在 Vue 中使用文本插值、指令和事件，以及这些功能如何协同工作以使应用数据与用户界面保持同步。

我们从一个只有一个视图的基本项目开始。但后来我们创建了一个更高级的项目，它具有更小、更模块化的视图，称为组件。组件让我们可以分解我们的项目，以便更容易编码和维护。之后，我们看到了如何使用 Vue 编译器将 ES6、Jade 和 Sass 转换为标准语言，同时将文件大小压缩到最小。

当您开始使用 Weex 进行编码时，所有这些知识都会对您有所帮助。Weex 将允许我们将 Vue 网络应用程序转变为移动应用程序。Weex 有点不同——我们使用带有特殊组件的 XML，而不是 HTML——但我们仍然可以使用其他 Web 技术，例如 CSS 和 JavaScript。这意味着我们不必将应用程序逻辑从 Web 应用程序更改为移动应用程序。


文章目录
  • 数据绑定
  • 开始设置
  • 文本插值
      • JS
      • HTML
  • 指令
    • v-bind指示
      • JS
      • HTML
    • v-model指示
      • JS
      • HTML
    • v-on 指令_
      • JS
      • HTML
    • v-for指示
      • JS
      • HTML
  • 成分
      • JS
      • HTML
  • 编译和 Vue CLI
    • 安装 Vue CLI
      • Mac和 Linux
      • Windows（确保以管理员身份运行控制台）
    • 创建一个 Vue 项目
    • 汇编
  • 微信
      • 优点
      • 缺点
  • 结论

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：为原生移动应用引入Vue和Weex
    文章地址：https://www.weixiaolive.com/en/index.php/post/298.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云