问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
1,写好页面了，生成一个jsbundle，h5端怎么解析这个文件啊，weex官网也啥都不说，只说一句跟vue语法的api一样，网上也查不到，哪个大神知道说一句呗，给个文档也行啊
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
jsbundle用于客户端运行，如果要用 web 的形式打开这个 weex 页面，需要新建一个 html 文件，把这个 jsbundle 文件以 script 脚本的方式引入。如下:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&xxx&/title&
&meta name="viewport" content="width=750,user-scalable=no"&
&meta name="apple-mobile-web-app-capable" content="yes"&
&meta name="apple-mobile-web-app-status-bar-style" content="black"&
&meta name="apple-touch-fullscreen" content="yes"&
&meta name="format-detection" content="telephone=no, email=no"&
&style&html, body { height: 100%; } body & div { height: 100%; } body {margin: 0}&/style&
&script type="text/javascript" src="/weex/static/jquery.min.js"&&/script&
&div id="root"&&/div&
&script type="text/javascript" src="/weex/jsbundle.js"&&/script&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
app的运行基本的步骤大概是这样
weex文件分包打包成单个JSBundle文件
发布到发包服务器上，通过热更新push到用户的客户端，交由【Weex SDK】执行解析
SDK中的【JS Framework】执行Bundle脚本生成Virtual DOM
Virtual DOM经由各端执行环境【Weex Runtime】解析翻译成执行指令
【Native RenderEngine】接收到指令后执行渲染操作，作出渲染出完整的界面
至于H5端的理解很简单，同我们正常的vue工程解析基本是一致
我们的weex h5工程启动时有个“外壳”，里面有一个官方提供的web frameworker，可以解析此JSBundle文件，生产一个Virtual Dom，然后通过vue.runtime.js解析成DOM树，布局树，提供给浏览器重排重绘。
大致是这样。其他的你可以阅读我之前写的一篇体验的文章
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：标签：至少1个，最多5个
brew install node
npm install -g weex-toolkit
npm install -g weexpack
npm install -g weextools
脚手架常用命令weextools:
create [name]
initialize a standard weex project
platform [command]
command for add or remove a
platform project
run [platform]
run weex app on the specific platform
build [platform]
build weex app generator package(apk or ipa)
install [platform]
install weex app to mobile
plugin [command]
command for add,create,login,publish weex plugins
weexplugin [command]
create a project that is a manager of plugin
help [cmd]
display help for [cmd]
项目初始化
weex init demo
weexpack create demo1
weextools create demo2
components ——vue组件
views ——视图
store ——Vuex
mixins——扩展
filters——vue.js 的filter
App.vue 主UI界面
entry.js 入口程序
router.js ——vue-router
2. ucar-weex
WeexProject
├── dist
编译（js文件）目录
└── views/index.js
└── package
└── ucar-weex_1_38.so
└── ucar-weex_1_38.json
├── hooks
└── README.md
├── node_modules node依赖包
├── package.json node配置文件
├── platforms
// 平台模版目录
└── android
└── ios
├── plugins
// 插件下载目录
└── README.md
├── src
// 业务代码（we文件）目录
└── views
└── index.vue
└── pageA.vue
└── assets
└── image/icon_back.png
└── font/icon_font.ttf
├── tools
└── android
└── ios
└── packzip.js
└── webpack.config.plugin.js
└── webpack.config.js //webpack 编译脚本
3. weex集成ucar-weex
npm install ucar-weex --save
ucar-weex 基础api
npm run dev
weex debug
npm run packzip
ucar-weex_1_38.json
ucar-weex_1_38.so
npm run copy:android
.json |.so =& android/assets
.json |.so =& 发布到服务器
UWXResManager.getInstance().addWXResFromAssert(this, FileUtils.getWXPackageFileName(this,"weex"));
UWXResManager.getInstance().setServerUrl("");
UWXResManager.getInstance().checkUpdate(new UWXResManager.CheckUpdateCallback() {
public void callback(int code, String msg, WXPackageInfo info) {
Toast.makeText(WXApplication.this, msg, Toast.LENGTH_LONG).show();
UWLog.d("WXApp", msg);
//重启 提示
0 收藏&&|&&1
你可能感兴趣的文章
2 收藏，230
9 收藏，635
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
技术专栏，帮你记录编程中的点滴，提升你对技术的理解收藏感兴趣的文章，丰富自己的知识库
明天提醒我
我要该，理由是：问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
weex scroller搭配refresh在android平台第一次 上拉 会触发refresh
js框架是 vue，有遇到的吗，不知道是不是bug
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
滚动时触摸到可点击元素就触发refresh，是bug
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不清楚你使用的SDK版本是多少？还有你使用refresh是否正确？我这边使用是SDK---0.10.0，没有出现这种问题。
v-if="isEmptyData()" class="scroller_class_detail_two" style="justify-content:align-items: center "&
&refresh class="refresh-view" :display="refreshing ? 'show' : 'hide'" @refresh="onRefresh"&
&text& ↓ 下拉刷新&/text&
&loading-indicator class="indicator"&&/loading-indicator&
&/refresh&
&CL_Empty v-if="isEmptyData()"&&/CL_Empty&
&/scroller&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
有遇到过，换成list就没事了.
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：无线动态化技术方案 Weex 快速入门
这里会介绍一下 Weex 的简单入门开发方式
## 先睹为快
有了正文介绍的背景情况，接下来我们分享一下 Weex 的方案设计和开发方式，当然在此之前，Weex 能够做出什么样效果的界面，可以让大家先睹为快。
![](/L1/461/1/f3
这里会介绍一下 Weex 的简单入门开发方式
有了正文介绍的背景情况，接下来我们分享一下 Weex 的方案设计和开发方式，当然在此之前，Weex 能够做出什么样效果的界面，可以让大家先睹为快。
如果大家对今年双十一主会场的展示效果和体验还有印象的话，那就是我们 Weex 技术方案的首秀——当然这个页面已经下线了。如果大家错过了或还想再回味一下，我们有另外一个线上的页面可供参观：今天大家用手机淘宝扫码打开下面这个地址：
不论是安卓还是 iOS 客户端，甚至是普通浏览器打开，都可以看到相同的“秋意渐浓填新装”的活动，这是目前大家可以看到的一个用 Weex 渲染出来的界面。
如何用 Weex 写出无线端动态界面
这样的界面是如何开发出来的呢？言归正传，给大家介绍一下 Weex 界面的制作过程——从最基础的写法开始
Hello World
&template&
&text&Hello World&/text&
&/template&
屏幕上就会展示一段“Hello World”的文本
我们把要展示的内容放在了 &template& 的标签里，这里的内容是一个文本标签 &text&，标签里的内容正是要展示的文本。
加特技：CSS 样式
我们可以通过 style 特性给文本设置一些 CSS 样式：
&template&
&text style="color: #ff0000;"&Hello World&/text&
&/template&
或通过在外层增加 &style& 样式表：
&template&
&text class="title"&Hello World&/text&
&/template&
.title {color: #ff0000; font-size: 48; font-weight:}
现在我们加入一张图片，并且通过 flexbox 布局方式使其左右排布：
&template&
&container&
&image class="thumb" src="/tfscom/TB1OMfAJFXXXXbfXXXXqVMCNVXX-400-400.jpg"&&/image&
&text class="title"&一个超赞的宝贝标题&/text&
&/container&
&/template&
.thumb {width: 200; height: 200;}
.title {flex: 1; color: #ff0000; font-size: 48; font-weight: background-color: #}
加入交互：JavaScript 数据和方法
点击商品信息可以打开商品详情：
&template&
&container onclick="gotoDetail"&
&image class="thumb" src="/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg"&&/image&
&text class="title"&一个超赞的宝贝标题&/text&
&/container&
&/template&
.thumb {width: 200; height: 200;}
.title {flex: 1; color: #ff0000; font-size: 48; font-weight: background-color: #}
module.exports = {
methods: {
gotoDetail: function () {
this.$openURL('/item.htm?id=')
这里的 &script& 标签是我们引入的可以用 JavaScript 定义数据和方法的地方，&template& 标签里的 onclick 事件会绑定 &script& 里的 gotoDefault() 方法，这个方法里的 $openURL(url) 是一个我们内置的 API 方法，可以打开一个网址。
如果同一个页面中会出现多个商品，还可以通过数据绑定的方式避免进行复用：
&template&
&container style="flex-direction:"&
&container repeat="{{itemList}}" onclick="gotoDetail"&
&image class="thumb" src="{{pictureUrl}}"&&/image&
&text class="title"&{{title}}&/text&
&/container&
&/container&
&/template&
.thumb {width: 200; height: 200;}
.title {flex: 1; color: #ff0000; font-size: 48; font-weight: background-color: #}
module.exports = {
itemList: [
{itemId: '', title: '宝贝标题1', pictureUrl: '/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{itemId: '', title: '宝贝标题2', pictureUrl: '/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}
methods: {
gotoDetail: function () {
this.$openURL('/item.htm?id=' + this.itemId)
这里我们通过双大括号的语法将 &template& 中要展示的特性或内容和 &script& 中的数据和方法绑定在了一起。
自定义组件 & 组件化开发
如果页面结构比较复杂之后，我们还可以通过一些自定义组件来将大的元素拆分成一个个小的元素，以此增强代码的可复用性、易读性、可扩展性：
&wx-element name="taobao-item"&
&template&
&container onclick="gotoDetail"&
&image class="thumb" src="{{pictureUrl}}"&&/image&
&text class="title"&{{title}}&/text&
&/container&
&/template&
.thumb {width: 200; height: 200;}
.title {flex: 1; color: #ff0000; font-size: 48; font-weight: background-color: #}
module.exports = {
itemId: '',
title: '',
pictureUrl: ''
methods: {
gotoDetail: function () {
this.$openURL('/item.htm?id=' + this.itemId)
&/wx-element&
&template&
&container style="flex-direction:"&
&taobao-item repeat="{{itemList}}"&&/taobao-item&
&/container&
&/template&
module.exports = {
itemList: [
{itemId: '', title: '宝贝标题1', pictureUrl: '/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{itemId: '', title: '宝贝标题2', pictureUrl: '/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'}
基本的 Weex 开发方式就是这些了，想主会场这样如此复杂的界面，其实也都是这样的代码组合而成的。
整个开发方式应该还是蛮简单清晰的吧，总体上是一个“傻瓜版”的 HTML / webcomponents 式开发，但可以做出 native 级别的体验。
版权声明：本文内容由互联网用户自发贡献，本社区不拥有所有权，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至： 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
用云栖社区APP，舒服~
【云栖快讯】浅析混合云和跨地域网络构建实践，分享高性能负载均衡设计，9月21日阿里云专家和你说说网络那些事儿，足不出户看直播，赶紧预约吧！&&
结合大数据能力帮助电商企业快速搭建平台、应对业务高并发，剖析秒杀、视频直播等场景
基于阿里云快速搭建海量基因数据上传、存储到分析挖掘的一体化解决方案。极大提升基因数据的解读效率，为精准医疗助力！
通过混合云，带给企业先进的大数据、云服务、安全可靠的互联网新技术，以及“海量”的计算、存储、网络、CDN、BGP...
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
MaxCompute75折抢购
Loading...}