用weexplus從0到1寫一個app

来源:https://www.cnblogs.com/kung0806/archive/2019/03/09/10500306.html
-Advertisement-
Play Games

說明 基於wexplus開發app是來新公司才接觸的，之前只是用過weex體驗過寫demo，當時就被用vue技術棧來開發app的開發體驗驚艷到了，這個開發體驗比react native要好很多，對於我這個純web前端來說簡直不要太好！ weexplus是基於weex官方的二次開發版本，旨在解決wee ...


說明

基於wexplus開發app是來新公司才接觸的，之前只是用過weex體驗過寫demo，當時就被用vue技術棧來開發app的開發體驗驚艷到了，這個開發體驗比react native要好很多，對於我這個純web前端來說簡直不要太好！

weexplus是基於weex官方的二次開發版本，旨在解決weex官方配置麻煩、性能不好、開發體驗不好等問題。weexplus框架是這邊同事根據實際的項目抽離出來的開源框架，已經幫我們趟過很多坑了，具體組件用法在此不再贅述，link-放出文檔。本文僅為本人視角開發一個吉他學習app的踩坑之路記錄，記下以免後面再踩坑。

文章思路

文章思路
文章可能會很長，在此分幾篇文章來寫，先占個坑：

先看東西

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項目目錄結構

如圖為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&&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官方文檔 https://weex.incubator.apache.org/cn/
  • weexplus文檔 https://weexplus.github.io/doc/
  • weexplus github倉庫 https://github.com/weexplus/boilerplate
  • weexplus安卓端掃碼調試包下載 https://pan.baidu.com/s/16kJfMuyXX-Y_yhm5fHt79Q

一點私貨

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

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【轉載】 用戶、組或角色在當前資料庫中已存在
    今天在給資料庫賬號分配資料庫許可權的時候，直接拋出拋出錯誤，錯誤的詳細信息如下：用戶、組或角色 '' 在當前資料庫中已存在。 (Microsoft SQL Server，錯誤: 15023)。查閱相關文檔後發現，拋出這種錯誤，可能是因為資料庫中存在孤立用戶。 將資料庫恢復到其他伺服器時，資料庫中包含一 ...
  • 【轉載】MySql新建賬號並分配許可權
    在伺服器的MySQL運維過程中，我們有時會遇到新建MySql賬號的情況，要求新建的賬號只允許某些特定的資料庫操作許可權，只能訪問到特定的資料庫，實現資料庫許可權的嚴格管理，以下以MySQL-Front管理軟體為例，簡述在Mysql中新建賬號並分配相應的許可權。 （1）在伺服器上打開mysql-front數 ...
  • 【轉載】 Sqlserver中查看自定義函數被哪些對象引用
    Sqlserver資料庫中支持自定義函數，包含表值函數和標量值函數，表值函數一般返回多個數據行即數據集，而標量值函數一般返回一個值，在資料庫的存儲過程中可調用自定義函數，也可在該自定義函數中調用另一個自定義函數。我們可以通過Sqlserver提供的查看依賴關係的功能來精確定位自定義函數在哪些對象中有 ...
  • MySQL 筆記整理（8.b） --事務到底是隔離還是不隔離的？
    筆記記錄自林曉斌（丁奇）老師的《MySQL實戰45講》 （本篇內圖片均來自丁奇老師的講解，如有侵權，請聯繫我刪除） 8.a） --事務到底是隔離還是不隔離的？ 本周工作較忙，加上懶惰，拖更了，抱歉。 接上文，分析下事務A的返回結果，為什麼k=1.這裡我們做如下假設： 這樣，事務A的視圖數組就是[99 ...
  • dagger2的初次使用
    1、打開app的build.gradle文件： 頂部停用apt插件： 2、去project的build.gradle文件中聲明apt的插件路徑： ...
  • iOS NFC
    #import @interface ViewController () @property (nonatomic,retain) UIButton *beginTestBtn; @property (nonatomic,retain) UILabel *textLabel; @end @imple... ...
  • 蘋果電腦（Mac mini或Macbook或iMac）恢復出廠設置
    蘋果電腦（Mac mini或Macbook或iMac）恢復出廠設置，首先要做好如下的準備： 第一：數據的備份；第二：保證正常的wifi連接；第三：有線的滑鼠鍵盤連接； 具體恢復操作步驟： 步驟一：電腦啟動時，按下鍵盤組合鍵（option + command + R，或alt + command + ... ...
  • 基於weex的app開發腳手架weexplus學習筆記
    認識weexplus weexplus是基於weex官方的二次開發版本，weex和react native一樣同屬第2代跨平臺技術，解決了第一代性能低下，體驗不好的問題，同時保留了第一代 多平臺一套代碼，基於web技術棧，支持動態發版 等所有優點。 weexplus腳手架作者 開發 運行開發環境 ( ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類