weex-06-程序的入口文件app.js

本节内容

介绍程序的执行过程

先给大家介绍一个东西

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架

干什么的呢？

MVVM 开发模式应该不模型,双向数据绑定这个名词很熟悉吧.这个框架就能让前端开发实现MVVM 设计模型

那么这个框架和weex 有什么关系呢？

目前 Weex 与 Vue 正在展开官方合作，并将 Vue 2.x 作为内置的前端框架，Vue 也因此具备了开发原生应用的能力,也就是说我们上层是使用vue.js 语法进行代码编写,然后通过打包工具将这些代码打包成app.weex.js文件,下发都手机端,由SDK进行解析,使用手机原生的组件进行渲染!

F3D0C72A-0354-4FF2-9302-935882CCEB0C.png

我把教程分为两部分内容

执行文件app.weex.js 开发阶段
app 开发阶段

app.js 这个是我们打包时的入口文件，为什么这样说呢？我们看一下打包配置文件webpack.config.json中的部分内容

entry: {
  app: path.resolve('./app.js')
},
output: {
  path: 'dist',
}

entry 就是我们的打包入口文件
output 打包完成的输出文件

我们下来看一下app.js文件的内容

import foo from './src/foo.vue' // 1
foo.el = '#root' // 2
export default new Vue(foo); //2

解释一下

1.foo.vue 就是一个组件, 这就代码 就是讲这个组件引入进来
2.el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
3 创建一个Vue 对象 作为js文件的输出

接下来,解释一下第二点,我们回到weex.html文件中

我们将组件的el 设置为"#root",其实就是告诉系统,让Vue对象挂在到这个id为root的dom 元素上去,让Vue实例去管理这个节点元素以及它的子节点元素

友情提示

如果您打包的文件是用于iOS 和 安卓等客户端渲染的代码,这个el的值可以不用设置,weex客户端的SDK会默认将其挂在根节点上

接下来 我们应该学习的是weex中的组件,但是在这之前, 先讲解一下weex中的布局和限制