說(shuō)明

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

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

文章思路

文章思路

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

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

先看東西

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

愛(ài)尚吉他設(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工具為我們提供了很多常用的開(kāi)發(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 //安裝依賴(lài)包
$ npm run dev
$ weexplus start //運(yùn)行改命令需要另外開(kāi)一個(gè)終端，運(yùn)行成功后谷歌瀏覽器會(huì)跳出一個(gè)新頁(yè)面,必須安裝谷歌瀏覽器
$ 下載安卓apk調(diào)試包（真機(jī)掃碼調(diào)試）地址 https://pan.baidu.com/s/16kJfMuyXX-Y_yhm5fHt79Q 

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

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

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

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

開(kāi)始寫(xiě)代碼

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

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

map：琴行地圖功能模塊，里面分為琴行地圖首頁(yè)万俗、琴行詳情湾笛、琴行導(dǎo)航
news：文章模塊，里面分為文章列表闰歪、文章詳情嚎研、標(biāo)簽列表
search：文章搜索模塊
video：視頻教程模塊，里面分為視頻模塊首頁(yè)库倘，視頻列表临扮、視頻詳情

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

子曰：“工欲善其事论矾，必先利其器「擞拢”在寫(xiě)首頁(yè)的代碼前在此安利一款切圖標(biāo)注工具--藍(lán)湖贪壳， 大大提高設(shè)計(jì)師和開(kāi)發(fā)的工作效率，具體使用參見(jiàn)官網(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è)類(lèi)型）在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組件，具體的屬性用法參見(jiàn)weex文檔slider用法凡伊×憬ィ考慮到輪播圖的尺寸不固定，在組件中暴露height（圖片高度）和width（圖片寬度）兩個(gè)屬性提供給父組件傳入系忙。

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

標(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布局的地方寫(xiě)上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è)公共組件封裝完畢臼勉，下面開(kāi)始編寫(xiě)首頁(yè)代碼。

首頁(yè)編寫(xiě)

//busi/home.vue
<template>
  <div class="app">
    <scroller>
    <banner-item :bannerList=bannerList></banner-item>
    <div class="home-nav border">
      <title-item title="熱門(mén)欄目" 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="熱門(mén)文章" 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="熱門(mén)專(zhuān)輯" 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',//菜單分類(lèi) 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)該很熟悉這種寫(xiě)法

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開(kāi)發(fā)出來(lái)的愛(ài)尚吉他微信小程序版已經(jīng)上線喜歡彈吉他的小伙伴可以關(guān)注一波

愛(ài)尚吉他微信小程序二維碼