国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wuyangchun / 1330人閱讀

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

前言

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

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

我們創(chuàng)建小程序開發(fā)者工具幫我們自動生成的目錄：

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

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

app.js 控制全局的邏輯結(jié)構(gòu)

app.json 配置一些全局?jǐn)?shù)據(jù)，所有頁面都要在此處注冊

app.wxml 內(nèi)容結(jié)構(gòu)

app.wxss 全局樣式

另外我們也需要自己創(chuàng)建，用于模塊式的開發(fā)：

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

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

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

二、ES6模塊化語言

上面我們講到如何模塊化的去處理我們的業(yè)務(wù)，實際上還是把業(yè)務(wù)和邏輯區(qū)分開來。但是我們?nèi)绾蝺?yōu)雅的去調(diào)用這些模塊呢？一似乎我們會去尋找一種方法去解決它，沒錯我們的es6擔(dān)任了這個使命。

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

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

項目功能

首頁全屏輪播圖優(yōu)雅而大氣　

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

視頻播放，video組件使用　

人工客服

動態(tài)評論列表

獲取用戶信息　

利用mock 傳數(shù)據(jù)　

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

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

輪播圖的一些處理技巧：

* 輪播圖不在像我們以往單純的放置圖片的輪播圖的效果了，我們這里動態(tài)的添加數(shù)據(jù)，為每個輪播圖都配置一些desc來描述，更好的吸引顧客的眼球。
* 采用view來承載我們的desc，為他們添加相應(yīng)的樣式。
* 動態(tài)的綁定數(shù)據(jù)，每個輪播圖的desc肯定不一樣，這就需要我們?nèi)ソ壎〝?shù)據(jù)使用我們的{{item}}。name數(shù)據(jù)從哪來呢？我們?nèi)ata里去手動添加嗎？就讓我們在堅持一些。后面更精彩。
二、數(shù)據(jù)的來源

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

1.URL式的數(shù)據(jù)封裝采用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({}),上面的代碼很詳細(xì)的介紹了他的使用方法，我們直接今天重點吧。怎么去使用網(wǎng)上的數(shù)據(jù)呢？

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

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

三、頁面跳轉(zhuǎn)雙向傳遞數(shù)據(jù)

一個小程序頁面跳轉(zhuǎn)總是必須的，但是頁面的數(shù)據(jù)如何去傳遞呢？

data-id="{{item.id}}" 在我們點擊跳轉(zhuǎn)事件綁定一個數(shù)據(jù)，這樣我們就可以在下一個頁面獲取這個id了
    onLoad: function (options) {
    const id = options.id;
    console.log(id)
  },

然后我們再根據(jù)這個獲取到的id進(jìn)行相應(yīng)的處理，這里小編在總結(jié)總結(jié)，以后寫的詳細(xì)一定。關(guān)于頁面如何雙向傳遞數(shù)據(jù)，時間有限，就先都這里，希望你們的點贊哦。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94937.html

相關(guān)文章

  • 模塊化高效開發(fā)微信小程序—汽車試駕

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

    lewif 評論0 收藏0

  • 模塊化高效開發(fā)微信小程序—汽車試駕

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

    CoderBear 評論0 收藏0

  • 使用TypeScript開發(fā)微信小程序

    摘要：使用開發(fā)微信小程序基礎(chǔ)接口核心設(shè)計原則之一就是類型檢查，通過使用接口可以進(jìn)行類型檢查，滿足傳統(tǒng)面向?qū)ο笏枷耄谟行ч_發(fā)，有效避免類型轉(zhuǎn)換問題。使用開發(fā)微信小程序基礎(chǔ)迭代器為每一個對象定義了默認(rèn)的迭代器。 使用TypeScript開發(fā)微信小程序（1）——基礎(chǔ)：數(shù)據(jù)類型（Type） ?TypeScript 的基本數(shù)據(jù)類型有boolean、number、string 、array、enum...

    xingpingz 評論0 收藏0

  • 使用ES6新特性開發(fā)微信小程序

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

    Backache 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<