模塊化高效開發微信小程序—汽車試駕

CoderBear 發布于2019-08-02 10:24 / 3212人閱讀

摘要：前言年月日，微信小程序發布。這也標志著的，阿里的，的小程序這三架馬車在年并驅騎行。傳送門試駕小程序開發工具微信開發者工具方便我們在編譯時能夠實時的看到界面變化，我們并不用此來進行小程序的開發，只充當一個模儀器來使用。

前言

2017年1月9日，微信小程序發布。這也標志著FaceBook的RN，阿里的Weex，Tencent的小程序這三架馬車在2017年并驅騎行。如今小程序更是如火中天，在這里，讓我們也跟進時代的步伐從零基礎一起在小程序元年擼個自己的小程序玩玩。git傳送門-試駕小程序

開發工具

1.微信web開發者工具  方便我們在編譯時能夠實時的看到界面變化，我們并不用此來進行小程序的開發，只充當一個模儀器來使用。
2.visual Studio Code  微軟新推出的一款及終端的編輯器，大大的提高了前端工程師的開發效率，這里我們也將用此來進行小程序的開發。沒有了解過的同學也可以試做去使用下吧，良心推薦。。
3.Easy Mork  easy-mock,通過它能快速生成模擬數據的服務，它能為我們提供一個數據接口url，然后使用wx.request({ url: url, .....})來發送數據請求，我的數據大部分都是通過Mork模擬的

創建小程序： 一、目錄架構

我們創建小程序開發者工具幫我們自動生成的目錄：

page文件夾, 頁面文件夾包含你所有的頁面文件,至少包含.js .wxml .wxs后綴文件，.json可選

utlis文件夾 ,放置一些全局需要使用的js文件

app.js 控制全局的邏輯結構

app.json 配置一些全局數據，所有頁面都要在此處注冊

app.wxml 內容結構

app.wxss 全局樣式

另外我們也需要自己創建，用于模塊式的開發：

assets文件夾用于我們存放所有的靜態資源比如：icons/,images/，js/,.json/提供數據

module/文件夾開發功能分模塊開發，這樣有便于多人協作，大大加快了開發效率，同時也提高了代碼的可讀性。

styles/文件夾用于存放頁面的css樣式的文件夾，利用es6的模塊可以提高代碼的復用性和可讀性，便于以后更方便的維護。

二、ES6模塊化語言

上面我們講到如何模塊化的去處理我們的業務，實際上還是把業務和邏輯區分開來。但是我們如何優雅的去調用這些模塊呢？一似乎我們會去尋找一種方法去解決它，沒錯我們的es6擔任了這個使命。

創建模塊時我們需要使用 export default ModuleName 去創建這個模塊。比如我們試駕小程序我們創建一個expory default testDrive這樣就可以了，在這個模塊中我們只要去定義它就好了，const testDrive =（）=> {} 使用我們的箭頭函數。

引用模塊時我們只需要 import testDriver from "xxxxx相應的文件夾"。

項目功能

首頁全屏輪播圖優雅而大氣　

scroll-view的使用，可滾動視圖區域生成　

視頻播放，video組件使用　

人工客服

動態評論列表

獲取用戶信息　

利用mock 傳數據　

具體功能實用技巧 一、首頁全屏輪播圖


  
    
      
      
        {{item.sub_header}}
        {{item.header}}
        {{item.description}}

輪播圖的一些處理技巧：

* 輪播圖不在像我們以往單純的放置圖片的輪播圖的效果了，我們這里動態的添加數據，為每個輪播圖都配置一些desc來描述，更好的吸引顧客的眼球。
* 采用view來承載我們的desc，為他們添加相應的樣式。
* 動態的綁定數據，每個輪播圖的desc肯定不一樣，這就需要我們去綁定數據使用我們的{{item}}。name數據從哪來呢？我們去data里去手動添加嗎？就讓我們在堅持一些。后面更精彩。

二、數據的來源

好吧！！我們不賣關子，直接接著上面的講吧。數據來源處理方式可以分為兩種：

1.URL式的數據封裝采用ajax請求，展示本地存儲能力

 console.log(this.globalData);
展示本地存儲能力
ajax請求
wx.request({
  url: "https://resources.ninghao.net/wxapp-case/db.json",
  data: {},
  method: "GET", 
  success: (response)=>{
    // console.log(response)
    Object.assign(this.globalData,response.data)
    console.log(this.globalData)
  },
  fail: (error)=>{
    // console.log(error)
  },
 
})

在我們小程序里，有著豐富的api，其中就用一種非常強大且實用的api: wx.request({}),上面的代碼很詳細的介紹了他的使用方法，我們直接今天重點吧。怎么去使用網上的數據呢？

在我們每個page里內置很多函數，比如onLaunch(),onLoad()等，每個函數都有不同的作用。我們在page里聲明一個全局globalData并且在onLaunch函數里使用Object.assign（this.globalData,request.data）為這個全局globalData賦值，把我們的數據存放進去。在我們首頁的index.js去調用它slide: app.globalData.slides

2.使用Easy Mork自己去創建數據，這里不是我們的重點，有興趣的可以去了解下Easy Mork如何模擬數據吧。調用方法跟上述一樣。例外我們呢可以直接引入一個js.json文件可以使用我們之前介紹的模塊化去引用并配置到全局data里

三、頁面跳轉雙向傳遞數據

一個小程序頁面跳轉總是必須的，但是頁面的數據如何去傳遞呢？

data-id="{{item.id}}" 在我們點擊跳轉事件綁定一個數據，這樣我們就可以在下一個頁面獲取這個id了

    onLoad: function (options) {
    const id = options.id;
    console.log(id)
  },

然后我們再根據這個獲取到的id進行相應的處理，這里小編在總結總結，以后寫的詳細一定。關于頁面如何雙向傳遞數據，時間有限，就先都這里，希望你們的點贊哦。

GPU云服務器云服務器免費開發微信小程序哪里開發微信小程序怎樣開發微信小程序怎么開發微信小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52327.html

模塊化高效開發微信小程序—汽車試駕

摘要：前言年月日，微信小程序發布。這也標志著的，阿里的，的小程序這三架馬車在年并驅騎行。傳送門試駕小程序開發工具微信開發者工具方便我們在編譯時能夠實時的看到界面變化，我們并不用此來進行小程序的開發，只充當一個模儀器來使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日，微信小程序發布。這也標志...

wuyangchun 2019-08-22 17:11 評論0 收藏0
模塊化高效開發微信小程序—汽車試駕

摘要：前言年月日，微信小程序發布。這也標志著的，阿里的，的小程序這三架馬車在年并驅騎行。傳送門試駕小程序開發工具微信開發者工具方便我們在編譯時能夠實時的看到界面變化，我們并不用此來進行小程序的開發，只充當一個模儀器來使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日，微信小程序發布。這也標志...

lewif 2019-08-29 15:21 評論0 收藏0
使用TypeScript開發微信小程序

摘要：使用開發微信小程序基礎接口核心設計原則之一就是類型檢查，通過使用接口可以進行類型檢查，滿足傳統面向對象思想，利于有效開發，有效避免類型轉換問題。使用開發微信小程序基礎迭代器為每一個對象定義了默認的迭代器。使用TypeScript開發微信小程序（1）——基礎：數據類型（Type） ?TypeScript 的基本數據類型有boolean、number、string 、array、enum...

xingpingz 2019-08-20 13:52 評論0 收藏0
使用ES6新特性開發微信小程序

摘要：使用新特性開發微信小程序國際化與本地化新特性國際化與本地化新增了很多對于國際化的支持，比如時間格式，貨幣格式，數字格式等。 ECMAScript 6（簡稱ES6）是JavaScript語言的最新標準。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。微信小程序支持絕大部分ES6的新增特性。使用ES6新特性開發微信小程序（1） ES6新特性：Cons...

Backache 2019-08-21 11:26 評論0 收藏0