說(shuō)明

基于wexplus開發(fā)app是來(lái)新公司才接觸的，之前只是用過(guò)weex體驗(yàn)過(guò)寫demo，當(dāng)時(shí)就被用vue技術(shù)棧來(lái)開發(fā)app的開發(fā)體驗(yàn)驚艷到了，這個(gè)開發(fā)體驗(yàn)比react native要好很多，對(duì)于我這個(gè)純web前端來(lái)說(shuō)簡(jiǎn)直不要太好！

weexplus是基于weex官方的二次開發(fā)版本，旨在解決weex官方配置麻煩、性能不好、開發(fā)體驗(yàn)不好等問(wèn)題。weexplus框架是這邊同事根據(jù)實(shí)際的項(xiàng)目抽離出來(lái)的開源框架，已經(jīng)幫我們趟過(guò)很多坑了，具體組件用法在此不再贅述，link-放出文檔。本文僅為本人視角開發(fā)一個(gè)吉他學(xué)習(xí)app的踩坑之路記錄，記下以免后面再踩坑。

文章思路

文章思路

文章可能會(huì)很長(zhǎng)，在此分幾篇文章來(lái)寫，先占個(gè)坑：

• 用weexplus從0到1寫一個(gè)app(1)-環(huán)境搭建和首頁(yè)編寫
• 用weexplus從0到1寫一個(gè)app(2)-參數(shù)跳轉(zhuǎn)和文章列表及文章詳情、搜索頁(yè)面的編寫
• 用weexplus從0到1寫一個(gè)app(3)-視頻列表和視頻詳情的編寫

先看東西

app的ui界面與h5、小程序公用一套，所以做出來(lái)的界面也是基本一樣，這里感謝以下楊伯伯提供的設(shè)計(jì)稿。

愛尚吉他設(shè)計(jì)稿

環(huán)境搭建

• node環(huán)境安裝（windows、mac稍有不同，具體安裝自行百度即可）；
• weex環(huán)境安裝（前提是必須有node環(huán)境）；

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

• weexplus環(huán)境的安裝，weexplus工具為我們提供了很多常用的開發(fā)功能，具體詳情查看weexplus文檔即可；

$ npm install weexplus -g

• 創(chuàng)建項(xiàng)目，按照官方文檔用weexplus create會(huì)遇到網(wǎng)速很慢的問(wèn)題，我這里是下載官方的boilerplate然后改名；

$ 瀏覽器訪問(wèn) https://github.com/weexplus/boilerplate，下載壓縮包得到文件boilerplate-master.zip；
$ 解壓boilerplate-master.zip得到文件夾boilerplate-master；
$ cd到跟boilerplate-master平級(jí)的目錄；
$ weexplus rename loveguitar com.loveguitar.23jt loveguitar；
$ cd loveguitar
$ npm install //安裝依賴包
$ npm run dev
$ weexplus start //運(yùn)行改命令需要另外開一個(gè)終端，運(yùn)行成功后谷歌瀏覽器會(huì)跳出一個(gè)新頁(yè)面,必須安裝谷歌瀏覽器
$ 下載安卓apk調(diào)試包（真機(jī)掃碼調(diào)試）地址 https://pan.baidu.com/s/16kJfMuyXX-Y_yhm5fHt79Q 

至此，weexplus開發(fā)環(huán)境基本搭建完畢，如果需要打包安卓、ios的話，與原生開發(fā)一樣，自行百度即可解決。

項(xiàng)目目錄結(jié)構(gòu)

weexplus項(xiàng)目目錄結(jié)構(gòu)

如圖為weexplus腳手架項(xiàng)目目錄結(jié)構(gòu)圖，我們平常開發(fā)主要在src目錄里寫代碼，可以看到該目錄與vue項(xiàng)目目錄結(jié)構(gòu)基本差不多。

開始寫代碼

在寫代碼前可以把腳手架里無(wú)用的代碼刪除掉，留下component文件夾即可。先做的第一件事個(gè)人建議是依照原型或者設(shè)計(jì)稿的業(yè)務(wù)邏輯在src/busi文件夾中按照業(yè)務(wù)模塊建好文件夾（以愛尚吉他為例）：

愛尚吉他業(yè)務(wù)目錄結(jié)構(gòu)

map：琴行地圖功能模塊，里面分為琴行地圖首頁(yè)、琴行詳情、琴行導(dǎo)航
news：文章模塊，里面分為文章列表、文章詳情、標(biāo)簽列表
search：文章搜索模塊
video：視頻教程模塊，里面分為視頻模塊首頁(yè)，視頻列表、視頻詳情

寫一個(gè)首頁(yè)看看

子曰：“工欲善其事，必先利其器。”在寫首頁(yè)的代碼前在此安利一款切圖標(biāo)注工具--藍(lán)湖， 大大提高設(shè)計(jì)師和開發(fā)的工作效率，具體使用參見官網(wǎng)介紹即可http://sos.lanhuapp.com/#/。

首頁(yè)效果圖

以上為首頁(yè)的設(shè)計(jì)圖，先來(lái)分析一下頁(yè)面結(jié)構(gòu)，看看哪些可以復(fù)并且可以封裝為公共組件。如圖所示可以分為如下幾個(gè)模塊：

1（banner模塊），在componet文件夾下新建my-banner.vue文件
2（模塊標(biāo)題），在componet文件夾下新建my-title.vue文件
3（菜單模塊），在componet文件夾下新建my-nav.vue文件
4（文章列表模塊兩個(gè)類型）在componet文件夾下新建news-item.vue文件

模塊分析

按照vue的規(guī)范分別在componet文件夾下新建my-banner.vue、my-title.vue·my-nav.vue、news-item.vue四個(gè)文件。

輪播圖組件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（圖片寬度）兩個(gè)屬性提供給父組件傳入。

在此注意幾個(gè)問(wèn)題：
1.注意圖片標(biāo)簽的寫法與web中使用vue稍有不同，web中是img，在weex中用image；
2.weex中不支持padding、margin、border屬性值的簡(jiǎn)寫，如不支持padding:10px
和border:1px solid #dcdcdc這樣的寫法。

標(biāo)題組件my-title.vue的封裝

//component/my-title.vue
<template>
  <div class="about-title">
    <text class="title-text">{{title}}</text>
    <div v-if="url!=null&&url!=''" @click="goto(url)" class="more">
      <text>更多</text>
      <image src="http://hurely.u.qiniudn.com/20180601152782173548498.png" class="form-icon-r"/>
    </div>
  </div>
</template>

樣式方面沒(méi)什么好說(shuō)的，考慮到有些標(biāo)題是沒(méi)有跳轉(zhuǎn)更多的，需要做一下判斷為空的情況。

在此注意幾個(gè)問(wèn)題：
1.注意在weex中文字需要使用text標(biāo)簽，考慮到后續(xù)可能會(huì)移植為web或者小程序，
text標(biāo)簽最好用class來(lái)控制樣式；
2.weex默認(rèn)支持flex布局，考慮到后續(xù)可能會(huì)移植為web或者小程序，在需要
用到flex布局的地方寫上display:flex屬性。

菜單組件my-nav.vue的封裝

//componet/my-nav.vue
<template>
  <div class="nav">
    <div class="nav-item" @click="goto(item.url)" v-for="(item,index) in navList" :key="index">
      <image class="nav-icon" :style="{'width':width,'height':height}" :src="item.src" />
      <text class="nav-text">{{item.text}}</text>
    </div>
  </div>
</template>

樣式方面沒(méi)什么說(shuō)的，考慮到會(huì)跳轉(zhuǎn)不同的頁(yè)面，注意在跳轉(zhuǎn)方法里做判斷即可。

列表組件news-item.vue的封裝

//componet/news-item.vue
<template>
  <div v-if="type==1">
    <div class="item-box" @click="click">
      <div class="item-left">
        <text class="left-text">{{item.title}}</text>
        <div class="left-line"></div>
        <text class="left-time">{{item.pubdate}}</text>
      </div>
      <div class="item-right">
        <image :src="item.pic.src" mode="aspectFill" class="litpic" />
      </div>
    </div>
  </div>
  <div class="item-box2" v-else-if="type==2"  @click="click">
    <image :src="item.pic.src" mode="aspectFill" class="litpic2" />
    <text class="box2-text">{{item.title}}</text>
  </div>
</template>

可以看到我標(biāo)記4的地方有兩處，在組件里加一個(gè)type作為判斷即可，列表點(diǎn)擊事件通過(guò)this.$emit傳遞到父組件調(diào)用。至此首頁(yè)四個(gè)公共組件封裝完畢，下面開始編寫首頁(yè)代碼。

首頁(yè)編寫

//busi/home.vue
<template>
  <div class="app">
    <scroller>
    <banner-item :bannerList=bannerList></banner-item>
    <div class="home-nav border">
      <title-item title="熱門欄目" url=""></title-item>
      <div class="nav-items">
        <div class="nav-item" v-for="(item,index) in navList" :key="index" @click="goto(item.url)">
          <image mode="aspectFit" :src="item.pic" class="nav-icon"/>
          <text class="nav-text">{{item.title}}</text>
        </div>
      </div>
    </div>
    <div class="home-news border">
      <title-item title="熱門文章" url="../news/list"></title-item>
      <div v-for="(item,index) in newsItems" :key="index">
        <homenews-item
          type=1
          @click="gotonews(item.id)"
          :item="item"
        ></homenews-item>
      </div>
    </div>
    <title-item title="熱門專輯" more="../video/index"></title-item>
    <div class="hot-box">
      <video-item
          v-for="(ite,index) in videoitems" :key="index"
          @click="gotovideo(ite)"
          :item="ite"
          type=2
        ></video-item>
    </div>
    <support-item></support-item>
    </scroller>
  </div>
</template>

樣式方面無(wú)需說(shuō)明，這里說(shuō)一下數(shù)據(jù)請(qǐng)求的封裝。分別在busi/util文件夾新建文件request.js和api.js（非必須），其中request.js基于fly庫(kù)封裝（考慮到weex官方的數(shù)據(jù)請(qǐng)求庫(kù)有點(diǎn)坑，在此棄用），便于管理后端接口建議在api.js文件中統(tǒng)一管理。

以下為fly.js庫(kù)的封裝，具體使用參照fly.js官方文檔，如果需要增加登錄攔截什么的，可以在fly.interceptors.request.use中增加即可。

//request.js
var Fly = require("flyio/dist/npm/weex");
var fly = new Fly;

//bmob云數(shù)據(jù)庫(kù)的配置，非必須
const bmobConfig = {
  applicationId:'applicationId',
  restApiKey:'restApiKey',
  secretKey:'secretKey',
  masterKey:'masterKey'
}

var progress = weex.requireModule("progress")
var modal = weex.requireModule("modal")
//添加請(qǐng)求攔截器
fly.interceptors.request.use((request)=>{
  progress.show();
  //給所有請(qǐng)求添加自定義header
  request.headers["X-Tag"]="flyio";
  request.headers['X-Bmob-Application-Id'] = bmobConfig.applicationId;
  request.headers['X-Bmob-REST-API-Key'] = bmobConfig.restApiKey;
  request.headers['Content-Type'] = 'application/json';  
  //可以顯式返回request, 也可以不返回，沒(méi)有返回值時(shí)攔截器中默認(rèn)返回request
  return request;
})

//添加響應(yīng)攔截器，響應(yīng)攔截器會(huì)在then/catch處理之前執(zhí)行
fly.interceptors.response.use(
  (response) => {
      //只將請(qǐng)求結(jié)果的data字段返回
      progress.dismiss();
      return response.data
  },
  (err) => {
      //發(fā)生網(wǎng)絡(luò)錯(cuò)誤后會(huì)走到這里
      progress.dismiss();
      //return Promise.resolve("ssss")
  }
)

module.exports  = fly;

以下為后端接口統(tǒng)一管理文件api.js

/**
 * @description 請(qǐng)求地址
 */

const baseUrl = 'http://baidu.com/';
const urls = {
  videoList:'videoList',
  videoContent:'videoContent',
  amapGetaddress:'amapGetaddress',//高德地圖經(jīng)緯度轉(zhuǎn)地址
  home: baseUrl + 'home',//首頁(yè)
  categoryIndex:baseUrl+'categoryIndex',//菜單分類 type=list顯示
  categoryList:baseUrl+'categoryList',//參數(shù)cid通過(guò)categoryIndex獲得 page為分頁(yè)
  tagList:baseUrl+'tagList',//標(biāo)簽列表&id=7656&page=1
  articleDetails:baseUrl+'articleDetails',//文章詳情
  about:'about',//關(guān)于
  search:baseUrl+'search',//&q=周杰倫&page=1
};
export default urls

數(shù)據(jù)請(qǐng)求實(shí)例，用過(guò)axios庫(kù)的應(yīng)該很熟悉這種寫法

getData() {
    const that = this;
    fly.get(apis.home, {})
    .then(res => {
        let bannerList = [];
        JSON.parse(res).article_hot.data.map((item,index)=>{
            item.pic = item.pic.src;
            bannerList.push(item)
        })
        that.bannerList = bannerList;
        that.newsItems = JSON.parse(res).article_list;
    })
    .catch(error => {});
}

參考文檔

• weex官方文檔 https://weex.incubator.apache.org/cn/
• weexplus文檔 https://weexplus.github.io/doc/
• weexplus github倉(cāng)庫(kù) https://github.com/weexplus/boilerplate
• weexplus安卓端掃碼調(diào)試包下載 https://pan.baidu.com/s/16kJfMuyXX-Y_yhm5fHt79Q

一點(diǎn)私貨

基于同一套u(yù)i開發(fā)出來(lái)的愛尚吉他微信小程序版已經(jīng)上線喜歡彈吉他的小伙伴可以關(guān)注一波

愛尚吉他微信小程序二維碼