用weexplus從0到1寫一個app(1)-環境搭建和首頁編寫

說明

基於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：視訊教程模組，裡面分為視訊模組首頁，視訊列表、視訊詳情
複製程式碼

寫一個首頁看看

子曰：“工欲善其事，必先利其器。”在寫首頁的程式碼前在此安利一款切圖示註工具--藍湖， 大大提高設計師和開發的工作效率，具體使用參見官網介紹即可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&&url!=''" @click="goto(url)" class="more">
      <text>更多</text>
      <image src="http://hurely.u.qiniudn.com/20180601152782173548498.png" class="form-icon-r"/>
    </div>
  </div>
</template>
複製程式碼

樣式方面沒什麼好說的，考慮到有些標題是沒有跳轉更多的，需要做一下判斷為空的情況。

在此注意幾個問題：
1.注意在weex中文字需要使用text標籤，考慮到後續可能會移植為web或者小程式，
text標籤最好用class來控制樣式；
2.weex預設支援flex佈局，考慮到後續可能會移植為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>
複製程式碼

樣式方面沒什麼說的，考慮到會跳轉不同的頁面，注意在跳轉方法裡做判斷即可。

列表元件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>
複製程式碼

可以看到我標記4的地方有兩處，在元件里加一個type作為判斷即可，列表點選事件通過this.$emit傳遞到父元件呼叫。至此首頁四個公共元件封裝完畢，下面開始編寫首頁程式碼。

首頁編寫

//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>
複製程式碼

樣式方面無需說明，這裡說一下資料請求的封裝。分別在busi/util資料夾新建檔案request.js和api.js（非必須），其中request.js基於fly庫封裝（考慮到weex官方的資料請求庫有點坑，在此棄用），便於管理後端介面建議在api.js檔案中統一管理。

以下為fly.js庫的封裝，具體使用參照fly.js官方文件，如果需要增加登入攔截什麼的，可以在fly.interceptors.request.use中增加即可。

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

//bmob雲資料庫的配置，非必須
const bmobConfig = {
  applicationId:'applicationId',
  restApiKey:'restApiKey',
  secretKey:'secretKey',
  masterKey:'masterKey'
}

var progress = weex.requireModule("progress")
var modal = weex.requireModule("modal")
//新增請求攔截器
fly.interceptors.request.use((request)=>{
  progress.show();
  //給所有請求新增自定義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, 也可以不返回，沒有返回值時攔截器中預設返回request
  return request;
})

//新增響應攔截器，響應攔截器會在then/catch處理之前執行
fly.interceptors.response.use(
  (response) => {
      //只將請求結果的data欄位返回
      progress.dismiss();
      return response.data
  },
  (err) => {
      //發生網路錯誤後會走到這裡
      progress.dismiss();
      //return Promise.resolve("ssss")
  }
)

module.exports  = fly;
複製程式碼

以下為後端介面統一管理檔案api.js

/**
 * @description 請求地址
 */

const baseUrl = 'http://baidu.com/';
const urls = {
  videoList:'videoList',
  videoContent:'videoContent',
  amapGetaddress:'amapGetaddress',//高德地圖經緯度轉地址
  home: baseUrl + 'home',//首頁
  categoryIndex:baseUrl+'categoryIndex',//選單分類 type=list顯示
  categoryList:baseUrl+'categoryList',//引數cid通過categoryIndex獲得 page為分頁
  tagList:baseUrl+'tagList',//標籤列表&id=7656&page=1
  articleDetails:baseUrl+'articleDetails',//文章詳情
  about:'about',//關於
  search:baseUrl+'search',//&q=周杰倫&page=1
};
export default urls

複製程式碼

資料請求例項，用過axios庫的應該很熟悉這種寫法

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官方文件 weex.incubator.apache.org/cn/
• weexplus文件 weexplus.github.io/doc/
• weexplus github倉庫 github.com/weexplus/bo…
• weexplus安卓端掃碼除錯包下載 pan.baidu.com/s/16kJfMuyX…

一點私貨

基於同一套ui開發出來的愛尚吉他微信小程式版已經上線喜歡彈吉他的小夥伴可以關注一波