SegmentFault WeexBox最新的文章
2019-10-19T17:34:20+08:00
https://segmentfault.com/feeds/blogs
https://creativecommons.org/licenses/by-nc-nd/4.0/
【开源】合摩 WeexBox2 正式发布
https://segmentfault.com/a/1190000020740478
2019-10-19T17:34:20+08:00
2019-10-19T17:34:20+08:00
myeveryheart
https://segmentfault.com/u/myeveryheart
0
<h2><a href="https://link.segmentfault.com/?enc=71958kbONg9%2FM%2Ba0U7Tirw%3D%3D.3KvM8jMGIDu68hiZTEikt4Bpm4cKKkDU6hz0LINNQSP6WL3B%2BV8W5RaaOEppiSuA" rel="nofollow">WeexBox2</a></h2>
<h3>一套简洁高效的APP混合开发解决方案</h3>
<h3>写在开头</h3>
<p><code>WeexBox官方QQ群号:943913583</code></p>
<p>离 WeexBox1 发布已过了大半年,这半年里我们一直在努力加入激动人心的功能,现在是时候介绍 WeexBox2 了。</p>
<h3>WeexBox2 的特色</h3>
<p>WeexBox2 在 WeexBox1 的基础上,新增:</p>
<ul>
<li>支持 TypeScript</li>
<li>全局热重载</li>
<li>支持 Android 10</li>
<li>支持 iOS 13</li>
<li>支持 Flutter(可选)</li>
</ul>
<h3>TypeScript</h3>
<p>目测 Vue3 正式版明年就会发布了,其中一个重要特性就是更好的 TypeScript 支持,相信会刮起一股 TS 风。其实 Vue2 已经支持的还不错了,所以 WeexBox 先把这个功能给做了。<br>在 WeexBox 里使用 TS 不需要任何额外配置,原来写 JS 的地方改成 TS就行,很简单吧~</p>
<h3>全局热重载</h3>
<p>以前我们调试的时候,调试哪个页面就要去扫一次二维码,如果我们一个功能横跨多个页面,我们就需要来回切换,浪费时间。为什么不在APP启动时只开启一次调试,以后不管我当前处于哪些页面,都能改了代码立马刷新呢,就跟我们开发 web 一样,WeexBox 做到了!</p>
<h3>Flutter</h3>
<p>Weex 是有局限性的,当它满足不了需求的时候,只有两种选择,原生 OR 降低要求。WeexBox 从来不做妥协,于是我们引入了 Flutter 来弥补 Weex 的不足。<br>最重要的是,WeexBox 打通了原生、Weex、Flutter 三者的路由和通信功能,让你能专注于其中一端(牛逼的你也可以多端开发,就像我司合摩的大前端一样)的开发而不用担心它们之间的壁垒。</p>
<h3>结尾的小广告</h3>
<p>我司正处于上升期,求贤若渴,感兴趣的小伙伴可以看这里哦。投简历时加上一句“Mario推荐”,也许有意想不到的效果~<br><a href="https://link.segmentfault.com/?enc=LLWtFCmurUzUKFQGpaJV%2Bg%3D%3D.h3kY6fCm4IpWBAX%2FHUKjbliQlpaAwyZ9Go0ehq4XEjzJguqYEiuzJhj%2FyVxJOVSV" rel="nofollow">https://www.lagou.com/gongsi/297763.html</a></p>
WeexBox 给你最好的图片加载方式
https://segmentfault.com/a/1190000018250543
2019-02-22T15:52:25+08:00
2019-02-22T15:52:25+08:00
myeveryheart
https://segmentfault.com/u/myeveryheart
11
<p><code>WeexBox官方QQ群号:943913583</code></p>
<p>在讲WeexBox之前,我们先来看看Weex是如何做图片加载的。<br>Weex提供了<image>来加载图片,更具体的说,<image>有3种使用方式。</p>
<pre><code>src=Base64
谁会把Base64硬写到源码里?</code></pre>
<pre><code>src=http
那我是不是要先把图片部署到服务器,再把这个图片的地址拷贝来用,麻烦不麻烦?</code></pre>
<pre><code>src=相对路径
相对路径是相对bundle URL的,相对路径将被重写为绝对资源路径(本地或远程)。
但是我在开发的时候,我更清楚的知道图片相对源码的路径而不是最终bundle的路径。</code></pre>
<p>综上,weex的这3种方式用着都很别扭。</p>
<p>抛开weex的限制,我就问你开发中使用图片最舒服的方式是什么。<br>答案当然是:卧槽用file-loader啊!</p>
<p>如果把file-loader集成进weex项目,在项目里用file-loader的方式引用图片,跑weex debug肯定是会报错的,不信的童鞋可以试试。</p>
<p>于是WeexBox提供了@weexbox/debugger和@weexbox/builder。它们不但能让你开心的用file-loader,还提供了一些便利的功能。</p>
<p>假设你已经用@weexbox/cli初始化好了项目,并且会使用file-loader。使用图片大概是这样的。(<a href="https://link.segmentfault.com/?enc=GEXJNVFlOs5D0whAkuGhng%3D%3D.TnL%2FkpSZAXiDnrQDvHwR0bogZSTYlWz3QGBy9xqJNBbriexFoF6ZeGrw6ucpl84qsIiK7YaDQvbCq%2FpKC%2BDMfSw0%2BufviffuIwVvkUKd%2FTI%3D" rel="nofollow">点击查看完整例子</a>)</p>
<pre><code class="js"><template>
<div>
<image :src="logo" class="logo" />
</div>
</template>
<script>
import logo from '../../../static/logo.png'
export default {
data() {
return {
logo,
}
},
}
</script></code></pre>
<p>这种使用图片的方式是不是既熟悉又怀念。</p>
<p>重点来了,打开config/update-config.json文件,你能看到形如下面的配置。</p>
<pre><code class="js">const config = {
develop: {
// 从网络加载图片
imagePublicPath: 'https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy',
},
test: {
// 从网络加载图片
imagePublicPath: 'https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy',
},
preRelease: {
// 从app加载图片
imagePublicPath: 'bundle://',
},
release: {
// 从app加载图片
imagePublicPath: 'bundle://',
},
}
module.exports = config</code></pre>
<p>当<code>imagePublicPath</code>为<code>http</code>时,需要你自己把<code>deploy</code>部署到服务器,图片地址即是部署的地址。 <br>当<code>imagePublicPath</code>为<code>bundle://</code>时,weexbox会自动拷贝<code>static</code>到app中。</p>
<p>于是乎,调试的时候跑<code>npm run debug xxx/App.vue</code>的时候,本机图片可以正常显示了。部署的时候,任君挑选是要部署到服务器还是app中。</p>
<p>由此可见,切换图片源不用你改动任何一行业务代码,weexbox全部帮你搞定了。</p>
WeexBox 1.2.0 新增 Lottie 动画,妈妈再也不用担心我加班写动画了!
https://segmentfault.com/a/1190000017948726
2019-01-19T11:09:59+08:00
2019-01-19T11:09:59+08:00
myeveryheart
https://segmentfault.com/u/myeveryheart
19
<p><img src="/img/bVbntuK?w=300&h=300" alt="图片描述" title="图片描述"></p>
<p><code>WeexBox官方QQ群号:943913583</code></p>
<h2>背景</h2>
<p>weex官方提供了<a href="https://link.segmentfault.com/?enc=cci63H3%2F98nwfkdi9Vw4qA%3D%3D.liFIX4MTz%2BjZQ2SFD6ZsceV9ZvJRwYAor27lJxJ8pwyhik6GwrDTB3KiSR6ccUGc8GftXmoL0rvkbD3QQYW0xYLvUm5ipOjnKqEQ2tIHrEk%3D" rel="nofollow">animation</a>模块可以用来在组件上执行动画,但是它的功能有限还容易造成卡顿。所以WeexBox从一开始就支持了<a href="https://link.segmentfault.com/?enc=0%2FxID%2BNrV5rp1sTOYsQ%2BzQ%3D%3D.P2debcIusAy5opi%2BOBVj9E5%2BXx5iRXd%2BPJmCJfv%2BjiXyOXBqFPDkubfMQobTB88b" rel="nofollow">BindingX</a>,丰富的API和流畅的性能可以支撑复杂的动画。可是这样就满足了吗?<br>致力于解放开发的WeexBox,怎么忍心看着你们写大坨大坨的动画代码呢,如果可以不写代码,那就太好了~</p>
<h2>Lottie</h2>
<p><a href="https://link.segmentfault.com/?enc=Il5y5PIQ6UwyDz%2Ft3%2BykXQ%3D%3D.u5EF7GChErFuZsL%2BeSNsqoXa%2BdENMDXe3N3CoJQ2StY%3D" rel="nofollow">Lottie</a>是Airbnb开源的动画库。它通过AE做成动画导出JSON文件,然后前端使用Lottie直接加载JSON文件生成动画,不需要前端进行复杂的绘制等操作。而且它还具有占用内存少,加载流畅等特点。N多现成可用的优秀动画在<a href="https://link.segmentfault.com/?enc=UUv9VkTShcW2yAJwikAb8Q%3D%3D.F3sLxIL9qQMKxIZEDnuyH5rvSkmdQcj2TDhOtlP8fk8%3D" rel="nofollow">这里</a></p>
<h2>WeexBox中使用Lottie</h2>
<p>因为太简单,我就直接贴代码了。</p>
<pre><code class="vue"><template>
<div class="wrap">
<wb-lottie class="happyBirthday" :sourceJson=sourceJson :loop=loop ref="lottie"></wb-lottie>
<text class="title">播放动画</text>
<div class="button" @click="play">
<text class="button-text">播放</text>
</div>
<div class="empty"></div>
<text class="title">暂停动画</text>
<div class="button" @click="pause">
<text class="button-text">暂停</text>
</div>
<div class="empty"></div>
<text class="title">停止动画</text>
<div class="button" @click="stop">
<text class="button-text">停止</text>
</div>
<div class="empty"></div>
</div>
</template>
<script>
// 这个就是设计师给你的json文件
const happyBirthday = require('./happyBirthday.json')
export default {
components: {
},
data() {
return {
sourceJson: happyBirthday,
loop: false,
}
},
created() {
},
methods: {
// 播放动画
play() {
this.$refs.lottie.play((result) => {
console.log(JSON.stringify(result))
})
},
// 暂停动画
pause() {
this.$refs.lottie.pause()
},
// 停止动画
stop() {
this.$refs.lottie.stop()
},
},
}
</script>
<style lang="scss" scoped>
@import '../../style/global';
.happyBirthday {
width: 750px;
height: 750px;
}
</style></code></pre>
<p>以上只演示了部分功能,详细文档<a href="https://link.segmentfault.com/?enc=7X4SI%2FPNXa4A6pAjMmSitA%3D%3D.wl3EaReFGzvUQTrJJHHl4Br299%2F0T3feGNK3XtyfgKo8SaV9fQXKmOtid%2FGejs%2B%2BTXSeCk49GhlUEeRzpxGjnFhyTukc971ozU5z%2BWgTEls%3D" rel="nofollow">在此</a></p>
<h2>总结</h2>
<p>我们终于找到了能让设计师、产品都对动画满意的方法,那就是设计师设计好了直接导出动画啊哈哈,妈妈再也不用担心我加班写动画了!</p>
【开源】合摩 WeexBox 正式发布
https://segmentfault.com/a/1190000017460230
2018-12-20T16:17:19+08:00
2018-12-20T16:17:19+08:00
myeveryheart
https://segmentfault.com/u/myeveryheart
16
<p><img src="/img/remote/1460000017460300?w=2166&h=2166" alt="" title=""></p>
<h2>WeexBox</h2>
<h3>一套简洁高效的APP混合开发解决方案</h3>
<h3>写在开头</h3>
<p><code>WeexBox官方QQ群号:943913583</code></p>
<p>一提到 Weex,相信下面已经有一群小伙伴在哀嚎了,是的,大多数开发者对 Weex 的感情是既爱又恨的。Weex 是优秀的跨平台框架,「Write Once, Run Everywhere」,但坑也多的不要不要的,特别对于刚开始尝试 Weex 开发的团队来说,各种坑和不友好把许多人劝退了。</p>
<p>首先聊聊我们为什么选择weex,在我们做技术选型时,综合考虑了目前市面上比较流行的RN、Weex,最终我们选择了 Weex。在决定使用哪种技术前,我们也在不断的问自己,为什么,为什么,为什么?在综合考虑各种因素后,我们技术团队决定使用weex。</p>
<p>决定使用哪种技术,主要看其优缺点:其优点来验证,是否符合我们的业务场景;其缺点来判断,是否限制我们的业务场景,是否有方案避开这种限制。</p>
<p>使用weex的优点:</p>
<ul>
<li>Weex 使用同一套代码来构建 Android、iOS 和 Web 应用。</li>
<li>Weex 能用 Vue 的前端框架,贴近我们的技术栈</li>
<li>Weex 比 RN 更轻量,体积小巧,可以分包,每个页面一个实例,性能更好</li>
<li>学习成本低,上手快</li>
<li>有良好的扩展性,比较好扩展新的 Component 和 Module</li>
</ul>
<p>同时,它也因资料少,社区活跃度不够,相对的坑较多,被大家一直诟病。我们收集了大家在开发中遇见的问题,针对这些问题,我们开发了<a href="https://link.segmentfault.com/?enc=tjwS%2FtcBk1B7HoI078FnIw%3D%3D.krhBKsp6vt3JYbypz9x%2BhJx74xLKchKSgyiOd9DvEdGIxpNeryQjBi%2FeYBzqR0K8" rel="nofollow">WeexBox</a>框架,并致力于:</p>
<ul>
<li>扩展 weex 的能力</li>
<li>把最佳实践带入进来,提供大前端正确拥抱的姿势</li>
<li>开发一些实用工具,带来更棒的开发体验</li>
<li>填掉 weex 的坑</li>
</ul>
<p><strong>最终,开发者能够专注写bug了~~~</strong></p>
<h3>WeexBox 的特色</h3>
<ul>
<li>零配置,开箱即用的项目,自带最佳实践</li>
<li>无需安装 weex-toolkit(有多少汪在这一步安装不上、运行报错的。来,举个爪)</li>
<li>比 weex-debugger、weex-builder 更快的构建速度</li>
<li>支持 sass、es6、file-loader、uglify、eslint等</li>
<li>可通过审核的热更新,静默模式和强制模式随意切换</li>
<li>N 多实用的 Module 扩展</li>
</ul>
<p><strong>合摩大前端团队实现了app开发从0到1,9天上线的壮举!可见 <a href="https://link.segmentfault.com/?enc=fP2RGrujF%2Bb7CEqEojYUcw%3D%3D.zw8qCHL%2FjiDQYTVvp4EokHNMj7lqttu3ft9jAH1EslIH6ScA3lI4NUW96aSqjARQ" rel="nofollow">WeexBox</a> 能够带来开发效率的巨大提升。</strong></p>
<h3>快速上手</h3>
<p>@weexbox/cli 帮助你快速初始化工程项目。</p>
<pre><code class="sh"># 安装
cnpm i -g @weexbox/cli
# 新建一个weex工程
weexbox create projectName
# 进入工程
cd projectName
# 安装依赖
cnpm i
# 随后,可以愉快的写bug了...
</code></pre>
<h3>项目结构</h3>
<pre><code class="sh">.
├── config // 配置文件夹
│ ├── update-config.json // 热更新的配置文件
│ └── weexbox-config.js // 图片资源的配置文件
├── deploy // 输出文件夹
├── platforms // 原生文件夹
│ ├── android // Android工程
│ └── ios // iOS工程
├── src // vue源码文件夹
│ └── module // 模块文件夹
│ ── page // 页面文件夹
│ ├── App.vue // vue源码
│ └── index.js // 入口文件
├── static // 图片资源文件夹
└── package.json // 配置文件
</code></pre>
<p>安装依赖后,项目的结构如上,同时也搭建了app 的基础架构;在工程 platforms 文件夹中,会看到两个文件夹 android 、ios,Android 端使用 Android Studio 开发工具,导入 platforms/android 文件夹,构建打包生成项目的apk;iOS 端使用 Xcode 开发工具,导入 platforms/ios 文件夹,构建打包生成项目的ipa;随后,在src下建立业务模块,就可以愉快的开发了~</p>
<p>这时你可能又有疑问了?本地书写的代码,如何能及时的展示在app界面上呢,不可能要每次打包吧,这样的话,也太LOW了!对的,不需要,这时你需要进入 <a href="https://link.segmentfault.com/?enc=W93jbQQgqNuxJ1XfigW42Q%3D%3D.LHFgN1WKONB%2FyCrRBxjFRwLKIXFjCatRdkeLlDhL0LAT5cNpaLt8PzbCDpCct2EVFSwiPALhxLpRDQAWnZsSUvog1eT3Pux%2B4dJ%2FflS%2Fq%2FOYScPgWfxiILNfSBHwO2%2F2fsZ97UBVzE97GzZdBFEjxTWKemviLobmxuhsw6fiK5rlHbwKzZOEZetScAz9Zfq3pkQhSbqUi2xpv%2BadvGkk9w%3D%3D" rel="nofollow">Debug 调试</a> 中了。</p>
<h3>Debug 调试</h3>
<p><strong>Tips: 确保电脑与手机处于同一网段.</strong></p>
<h4>1、调试打包在真机上的代码</h4>
<pre><code class="sh">npm run debug</code></pre>
<p><img src="/img/remote/1460000017460301?w=848&h=661" alt="" title=""></p>
<p>打开app的调试扫码工具,扫二维码使pc与移动终端建立连接</p>
<p><img src="/img/remote/1460000017460302?w=2093&h=1352" alt="" title=""></p>
<h4>2、调试正在开发的页面</h4>
<pre><code class="sh">npm run debug [vue/weex页面的路径]
</code></pre>
<p>打开app的调试扫码工具,扫二维码使pc与移动终端建立连接</p>
<p>更多详细的 debug 步骤请查看,WeexBox 开发指南中的 <a href="https://link.segmentfault.com/?enc=XchXfMpzpTb3U4enfOK9OA%3D%3D.Vx0zI83UlKcF%2ByqDsPo6JFY3n1sncRc4CvRSSeCOneuugMGe5adp%2FxLQPjgq5KphWCYQWSGuIu0RmRRJvRKdYK5tNTkqpqkvh0CTrf7OmnSe5brp8qwv6SRwnOz8SDHGxQ7B2vUYFKJesJWvQXJ%2B1G3QGOnSCuk87nMJnT1pD5wWmJBl%2BL%2FXHaQKaqPuK1IuIqW1Jy2CCVUxi0WUsHXTBA%3D%3D" rel="nofollow">Debug 调试</a></p>
<p><a href="https://link.segmentfault.com/?enc=iDXx32IuNmKf07G25S43Fg%3D%3D.vkXCoGQfrLWqA5UDxe944R89bwo8rONELaCHpPqrW7UeWeyca6mPRdI7WxKixA1%2F" rel="nofollow">WeexBox</a> 也提供了很多常见的模块。</p>
<h3>如何使用呢?</h3>
<p>1、丰富的 <code>modal</code> 模块</p>
<p><code>modal</code> 模块,除了常见的:alert、confirm外,还延伸了一些更频繁使用的api,eg:actionSheet(操作表弹框)、showLoading(显示菊花)等,更加常态化、大众化以及多元化。</p>
<pre><code class="sh"># 引用
const modal = weex.requireModule('wb-modal')
# 警告弹框
modal.alert({
title: '标题',
message: '弹窗内容',
okTitle: '确定'
}, (result) => {
})
// callback参数
result: {
status: 0
}</code></pre>
<p>效果图:</p>
<p><img src="/img/remote/1460000017460303?w=750&h=1334" alt="" title=""></p>
<pre><code class="sh"># 引用
const modal = weex.requireModule('wb-modal')
# 操作表弹窗,配合 wb-external 可调取摄像头及相册
modal.actionSheet({
title: '标题',
message: '弹窗内容',
actions: [{
// 按钮类型'danger', 'cancel', 'normal'。默认normal
type: 'danger',
// 按钮的标题
title: '删除'
}]
}, (result) => {
})
// callback参数
result: {
// 取消按钮-1,其他0
status: 0,
data: {
// 按钮的索引
index: 0
}
}
</code></pre>
<p>效果图:</p>
<p><img src="/img/remote/1460000017460304?w=750&h=1334" alt="" title=""></p>
<p>等等功能,更多常见的<code>modal</code> api,详情请查看 <a href="https://link.segmentfault.com/?enc=WPWvdmGbspDeLENltGE9QA%3D%3D.LsIs0cfwC0HEjKpnw542OjS6NnQbiorGZI8L3zbg8SDsB%2B9rgfrJIZeeDbCBdiJRsuSAcfutRk%2BF6E7Jz0X8Wg%3D%3D" rel="nofollow">传送门</a></p>
<p>2、 打开外部功能 Module</p>
<pre><code class="sh"># 引用
const external = weex.requireModule('wb-external')
# 调用摄像头拍照,实现图片裁剪上传
external.openCamera({
// 能否剪裁
enableCrop: true,
// 是否矩形剪裁,true为圆形剪裁
isCircle: true,
// 宽度
width: 100,
// 高度
height:100
}, (result) => {
})
// callback参数
result: {
status: 0,
error: '',
data: {
// 图片的存储路径
url: '/docment/123.png'
}
}</code></pre>
<p>等等功能,更多常见的<code>external</code> api,详情请查看 <a href="https://link.segmentfault.com/?enc=HqV8G4O1QwD%2FYNE8uD3YSQ%3D%3D.e%2Fdc2CfSVqnipt3d8NmX0aQjV%2Bn2xyU8cUaKz8UC6v3NhClyFAUUA7mD2up2l3Rv8PJmMjS7wG0yDLeKZPpwXA%3D%3D" rel="nofollow">传送门</a></p>
<h3>写在最后</h3>
<p>目前 <a href="https://link.segmentfault.com/?enc=OuOJ6wv5MIpJdw1NDTsC4A%3D%3D.laFnq72%2FQ1pxgbQc48Nx9SYCGkS%2BH3KKAtHrTqi5DBI%3D" rel="nofollow">weex</a> 官方也在不断的更新,虽然有各种bug被人诟病,但是,哪个优秀的技术发展没有经历这样的过程呢,“不经一番寒彻骨,怎得梅花扑鼻香”,技术本身就没有对错,只有我们调整好自己的心态,挖掘底层事物,垫好自己的基石,让技术更好的为业务服务。</p>
<p>项目团队通过大量的业务实践和积累以后,总结归纳出这套基于 weex 的技术方案 <a href="https://link.segmentfault.com/?enc=YSB2MAABbZ9tzHehC%2FhEsw%3D%3D.q36EU9kT1KxEeYqEiw8TMr%2B88e46uK5FHh6pBY97JOlCJHTmWbvnMfD9syhhgu%2FH" rel="nofollow">WeexBox</a> 并开源,解决大家在使用 weex 所遇见的各种坑,同时对官方的 Module 进行拓展、延伸,提供了更加丰富的模块,解决实际业务场景中的问题。目前团队使用 <a href="https://link.segmentfault.com/?enc=5sqWwHpmfK4I4Whzg6briw%3D%3D.kTiQxn6J6YhtgueBrotH1jCp5kxDOpbkoSc5oqVCKK7aTGr%2Bb2fUFkgVptU78CH7" rel="nofollow">WeexBox</a> 已研发了好几款APP,它能满足及支撑我们上百个页面的业务场景,让我们的开发效率大大提升,使我们的技术栈更加完善。</p>
<p>在使用中有任何问题,欢迎给我们issue,有任何想法也欢迎PR。</p>
<p>最后希望我们的方案能帮助开发中的你。</p>
<p>官网地址:<a href="https://link.segmentfault.com/?enc=Fj4REtfWsCpAA2QoDpXlNA%3D%3D.9vR5qrzVElFDQ%2F5rHPihusIWac7dRwavFcSTyR%2Fb9QpgfEsreo6W6DxS4DGnSth1" rel="nofollow">https://aygtech.github.io/wee...</a></p>
<p>github: <a href="https://link.segmentfault.com/?enc=1RiiNHBbjtqmE19K0xfgGA%3D%3D.9w8mm05G5bTACHz7VJS3Y%2BY%2B4QoUujq5H62AM4JbNUZV5O7ci72dUios1s%2Fh2bWO" rel="nofollow">https://github.com/aygtech/ay...</a></p>
<p>附上一份完整功能列表</p>
<p><img src="/img/remote/1460000017460305?w=4064&h=5034" alt="" title=""></p>