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文件中

<body>
  <div id="root"></div>
  <script src="./dist/app.web.js"></script>
</body>

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

友情提示

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

小程序提升界面使用体验 丰富了内容展示组件

  昨晚,微信小程序开放了更多页面内能力,主要是提升界面使用体验、丰富内容展示组件、完善系统硬件能力,这些能力的提升可以帮助开发者更好地优化使用体验,让用户爱上...

44980
来自专栏Jerry的SAP技术分享

使用JavaScript将当前页面保存成PDF,支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截...

78520
来自专栏数据小魔方

excel中的超链接函数

今天跟大家分享在excel中超链接函数的用法! ▼ 其实excel中想要达到超链接效果有很多种方法:直接手工设置、超链接函数、开发工具、VBA等都可以实现。但是...

52890
来自专栏Ken的杂谈

JS/Jquery解决回车键触发表单提交问题

因为现在大多数浏览器,当表单中的文本框或其他可提交元素为当前焦点时,敲回车键就会触发表单提交。

19820
来自专栏极客编程

简单介绍一下vue2.0

Vue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目。 另外Vue的核心库...

19620
来自专栏移动开发面面观

React Native 一个开始

11520
来自专栏Petrichor的专栏

tkinter: 事件 & 绑定 (Events and Bindings)

14020
来自专栏Java技术分享

Chrome开发,debug的使用方法。

怎样打开Chrome的开发者工具? 你可以直接在页面上点击右键,然后选择审查元素: ? 或者在Chrome的工具中找到: ? 或者,你直接记住这个快捷方式: C...

231100
来自专栏iKcamp

微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具

第二章:小程序中级实战教程之预备篇    项目结构设计 教学视频地址:https://v.qq.com/x/page/q05544lzelw.html ...

23270
来自专栏DeveWork

添加WordPress评论输入邮箱实时显示Gravatar头像功能

这个不是什么新鲜的功能了,这个功能即是实现当留言评论时,你输入email后,就会实时显示你的Gravatar头像。对于提高用户体验是有非常的帮助,特别是用户评论...

22450

扫码关注云+社区

领取腾讯云代金券