weex-hongkong

by cyforever123

cyforever123 / weex-hongkong

提交weex界面,业务逻辑代码以及android集成相关代码

129 Stars 40 Forks Last release: Not found 12 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


本期六篇文章目录(可点击跳转)

一. 阿里Weex框架快速体验与环境搭建

二. weex sdk集成到Android工程

三. weex服务项目搭建

四. Weex优雅的“降级”到 HTML5

五. weex项目实战篇(一)

六. weex项目实战篇(二)


1. 前言

经过前面的准备,我们终于可以开始上手weex项目了。本篇博客主要基于最近两周项目中用到的关于weex的知识点的整理。

2.新建weex项目

1)新建一个名为hongkong的项目,如图所示: 这里写图片描述

2)输入项目名称,如图所示: 项目名称

3)点击【create】则项目则创建成功,如图所示: 创建成功

4)新建一个.we文件,如图所示: 这里写图片描述

5)新建一个home.we文件后,项目目录如下所示: 这里写图片描述

6)为了方便参考阿里playground中的例子源码,我们把playground源码中的examples文件夹也拷贝到项目中,如下所示: 这里写图片描述

7)可能你会发现我上图还有几个文件目录 image---存放图片 include---存放公共文件,类似做原生项目,比如title标题,每个xml都一样,这样我们做一个公共的,其他页面去include进去,这个文件夹下面就是放的公共页面。 nodemodules---用到weex扩展组件的时候,在terminal中输入指令,则会自动生成,后面会介绍。 weextmp---编译weex文件后,生成的文件夹,可以想象成原生的build文件夹。

3.项目需求

项目中需要实现如下所示界面,如图所示:下图是个首页面,其实很多电商公司的首页面都是这样的楼层布局,我们实现出这个界面也就可以算大概会使用weex了。: 这里写图片描述

刚刚拿到这个界面用weex实现的时候,很多人觉得无从下手,不是难,而是不熟悉,没有参考demo,我这篇文章就算抛砖引玉,带大家入门。

首先,如果让你用原生去实现首页,如何去做? 很简单,用listview或者recycleview,再配合itemType,用多套itemView即可实现,那语言其实都是想通的,既然原生可以用listview去实现,那weex里面是不是有listview控件,并且还有item的概念,我们通过查官方文档,果然是有的。 官方文档地址:https://weex-project.io/cn/v-0.10/references/components/list.html 这份官方文档,希望大家做项目前,可以逛一遍,不用全部记住,至少有个大概印象,知道有哪些控件,如何使用,等项目中需要具体用到,再去当做工具书去查。 比如: 官方文档里面说明,Weex 代码由 < template>、< style>、< script> 三个部分构成。

 

在webstorm的terminal中输入weex test.we后 这里写图片描述

几秒后,则自动打开浏览器,并展现上面的效果。 这里写图片描述 可见一个简单的list已经展示出来了,接下来我们就要改造实现我们需要的效果。

2)这边我讲下我当时的思路: 1.从上向下布局,可以看到第一行就是一个搜索框,用到的知识点就是< text>< div>< image>,有些属性不熟悉,可以查官方文档,布局位置通过style慢慢调整,https://weex-project.io/cn/v-0.10/references/common-style.html这个目录主要讲解位置调整,可以详细阅读。 2.尽量用官方的示例来改,比如用到< img>控件,我们不用自己去写,直接从官方文档,粘贴下来,再做修改,避免自己书写出现错误,从而真的是从入门到放弃。 3.下面的楼层布局,就是几个循环,再加上简单的控件使用

3)首页源码 ```

通过上面的布局,则跨越实现出需求的效果。下面稍微分析下上述代码。

4)源码分析
布局就不做过多解释了,都是用的官方控件,不清楚的可以看官方介绍。主要讲下一些技巧,心得跟当时遇到的一些坑。
**1.公共url的抽取**
最后图片,js都部署在远程服务器,原生开发的时候,相信大家都会新建一个UrlUtil类来管理url,当然该类里面肯定有个baseUrl为服务器地址,理所应当,weex项目也可以这样,方便维护。

![这里写图片描述](http://img.blog.csdn.net/20170125234846250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGZza2hnYWxzaGdrYWpnaGxqZ2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
在.we文件中使用到图片地址时,则可以用如下方式:

2.多页面跳转。
当点击列表中一个商品,跳转到商品详情页时,原生是通过intent意图,weex中可以通过内建模块navigator来实现。
官方地址:https://weex-project.io/cn/v-0.10/references/modules/navigator.html
但是如果一个手机装了两个weex项目的话,跳转会弹出选择框,问你跳转到哪个项目,就像你手机里面有多个浏览器,打开网页时,询问你一样,这种效果显然不好。可以修改,但是要改源码,如下所示:
![这里写图片描述](http://img.blog.csdn.net/20170126000916072?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGZza2hnYWxzaGdrYWpnaGxqZ2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
在SDK中找到WXNavigatorModule类,然后修改WEEX的值为自己项目特有,再在隐式意图跳转的地方,修改成刚刚修改的值即可。
![这里写图片描述](http://img.blog.csdn.net/20170126001152998?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGZza2hnYWxzaGdrYWpnaGxqZ2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

3.weex通过网络请求获取数据。
官方地址:https://weex-project.io/cn/v-0.10/references/modules/stream.html

4.weex如何调用android原生功能。
既然weex项目要调用android原生功能,很明显,我们需要再创建一个android项目来集成weex项目,从而实现weex调用android原生功能。
集成可以参考:http://blog.csdn.net/dfskhgalshgkajghljgh/article/details/52757849
Weex 为我们提供了扩展机制,共提供了三类扩展:Module扩展、Component扩展和Adapter扩展。
![这里写图片描述](http://img.blog.csdn.net/20170126001405674?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGZza2hnYWxzaGdrYWpnaGxqZ2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

1)Module扩展
第一步,继承WXModule类,实现扩展:

public class WXZxingModule extends WXModule { @WXModuleAnno(runOnUIThread = true) public void assistant() { IntentIntegrator integrator = new IntentIntegrator((Activity)mWXSDKInstance.getContext()); integrator.initiateScan(); } } ``` 第二步,注册扩展:

public class WXApplication extends Application {

@Override
public void onCreate() {
    super.onCreate();
    InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
    WXSDKEngine.initialize(this, config);

    try {
        WXSDKEngine.registerModule("weex_zxing", WXZxingModule.class);
    } catch (WXException e) {
        e.printStackTrace();
    }
}

}

第三步,we文件中调用module中方法: 1.点击相应事件

2.调用原生方法

            

2)Component扩展 比如一些特殊view,weex无法实现,则可以自定义Component来实现,让后weex中引用。 第一步,继承WXComponent< TextView> 类,实现扩展:

public class RichText extends WXComponent {

public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) { super(instance, dom, parent, isLazy); }

@Override protected TextView initComponentHostView(Context context) { TextView view = new TextView(context); view.setMovementMethod(LinkMovementMethod.getInstance()); return view; }

@WXComponentProp(name = "tel")//该注解,则为weex中调用的方法名 public void setTelLink(String tel){ SpannableString spannable=new SpannableString(tel); spannable.setSpan(new URLSpan("tel:"+tel),0,tel.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); ((TextView)mHost).setText(spannable); } }

第二步,注册扩展:

WXSDKEngine.registerComponent("richtext", RichText.class);

第三步,we文件中调用:


3)Adapter 扩展: 前面已经介绍过: http://blog.csdn.net/dfskhgalshgkajghljgh/article/details/52757849

5.项目成果

目前项目全部都是用weex实现的,效果图如下图所示: 首页: 首页


登录页: 登录页


商品为空: 商品为空


商品详情页: 商品详情页

6.项目源码: github下载地址:https://github.com/cyforever123/weex-hongkong


如有错误欢迎指出来,一起学习。

交流讨论群 群号:469890293

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.