说明

基于wexplus开发app是来新公司才接触的，之前只是用过weex体验过写demo，当时就被用vue技术栈来开发app的开发体验惊艳到了，这个开发体验比react native要好很多，对于我这个纯web前端来说简直不要太好！

weexplus是基于weex官方的二次开发版本，旨在解决weex官方配置麻烦、性能不好、开发体验不好等问题。weexplus框架是这边同事根据实际的项目抽离出来的开源框架，已经帮我们趟过很多坑了，具体组件用法在此不再赘述，link-放出文档。本文仅为本人视角开发一个吉他学习app的踩坑之路记录，记下以免后面再踩坑。

文章思路

文章可能会很长，在此分几篇文章来写，先占个坑：

• 用weexplus从0到1写一个app(1)-环境搭建和首页编写
• 用weexplus从0到1写一个app(2)-参数跳转和文章列表及文章详情、搜索页面的编写
• 用weexplus从0到1写一个app(3)-视频列表和视频详情的编写

先看东西

app的ui界面与h5、小程序公用一套，所以做出来的界面也是基本一样，这里感谢以下杨伯伯提供的设计稿。

环境搭建

• node环境安装（windows、mac稍有不同，具体安装自行百度即可）；
• weex环境安装（前提是必须有node环境）；

$ npm install  weex-toolkit -g // -g表示全局安装，下同

• weexplus环境的安装，weexplus工具为我们提供了很多常用的开发功能，具体详情查看weexplus文档即可；

$ npm install weexplus -g

• 创建项目，按照官方文档用weexplus create会遇到网速很慢的问题，我这里是下载官方的boilerplate然后改名；

$ 浏览器访问 https://github.com/weexplus/boilerplate，下载压缩包得到文件boilerplate-master.zip；
$ 解压boilerplate-master.zip得到文件夹boilerplate-master；
$ cd到跟boilerplate-master平级的目录；
$ weexplus rename loveguitar com.loveguitar.23jt loveguitar；
$ cd loveguitar
$ npm install //安装依赖包
$ npm run dev
$ weexplus start //运行改命令需要另外开一个终端，运行成功后谷歌浏览器会跳出一个新页面,必须安装谷歌浏览器
$ 下载安卓apk调试包（真机扫码调试）地址 https://pan.baidu.com/s/16kJfMuyXX-Y_yhm5fHt79Q 

至此，weexplus开发环境基本搭建完毕，如果需要打包安卓、ios的话，与原生开发一样，自行百度即可解决。

项目目录结构

如图为weexplus脚手架项目目录结构图，我们平常开发主要在src目录里写代码，可以看到该目录与vue项目目录结构基本差不多。

开始写代码

在写代码前可以把脚手架里无用的代码删除掉，留下component文件夹即可。先做的第一件事个人建议是依照原型或者设计稿的业务逻辑在src/busi文件夹中按照业务模块建好文件夹（以爱尚吉他为例）：

map：琴行地图功能模块，里面分为琴行地图首页、琴行详情、琴行导航
news：文章模块，里面分为文章列表、文章详情、标签列表
search：文章搜索模块
video：视频教程模块，里面分为视频模块首页，视频列表、视频详情

写一个首页看看

子曰：“工欲善其事，必先利其器。”在写首页的代码前在此安利一款切图标注工具--蓝湖， 大大提高设计师和开发的工作效率，具体使用参见官网介绍即可http://sos.lanhuapp.com/#/。

以上为首页的设计图，先来分析一下页面结构，看看哪些可以复并且可以封装为公共组件。如图所示可以分为如下几个模块：

1（banner模块），在componet文件夹下新建my-banner.vue文件
2（模块标题），在componet文件夹下新建my-title.vue文件
3（菜单模块），在componet文件夹下新建my-nav.vue文件
4（文章列表模块两个类型）在componet文件夹下新建news-item.vue文件

按照vue的规范分别在componet文件夹下新建my-banner.vue、my-title.vue·my-nav.vue、news-item.vue四个文件。

轮播图组件my-banner.vue封装

//src/component/my-banner.vue
<template>
  <div class="banner-box">
    <slider class="slider" :style="{'height':height,'width':width}" interval="1500" @change="onchange">
      <div class="frame" :style="{'height':height,'width':width}" v-for="(item,index) in bannerList" :key="index">
        <image :style="{'height':height,'width':width}" class="image" resize="cover" :src="item.pic" />
      </div>
      <indicator class="indicator"></indicator>
    </slider>
  </div>
</template>

这里用到了weex官方的slider和indicator组件，具体的属性用法参见weex文档slider用法。考虑到轮播图的尺寸不固定，在组件中暴露height（图片高度）和width（图片宽度）两个属性提供给父组件传入。

在此注意几个问题：
1.注意图片标签的写法与web中使用vue稍有不同，web中是img，在weex中用image；
2.weex中不支持padding、margin、border属性值的简写，如不支持padding:10px
和border:1px solid #dcdcdc这样的写法。

标题组件my-title.vue的封装

//component/my-title.vue
<template>
  <div class="about-title">
    <text class="title-text">{{title}}</text>
    <div v-if="url!=null&&