資訊專(zhuān)欄INFORMATION COLUMN
摘要：前言年月日，微信小程序發(fā)布。這也標(biāo)志著的，阿里的，的小程序這三架馬車(chē)在年并驅(qū)騎行。傳送門(mén)試駕小程序開(kāi)發(fā)工具微信開(kāi)發(fā)者工具方便我們?cè)诰幾g時(shí)能夠?qū)崟r(shí)的看到界面變化，我們并不用此來(lái)進(jìn)行小程序的開(kāi)發(fā)，只充當(dāng)一個(gè)模儀器來(lái)使用。
前言
2017年1月9日，微信小程序發(fā)布。這也標(biāo)志著FaceBook的RN，阿里的Weex，Tencent的小程序這三架馬車(chē)在2017年并驅(qū)騎行。如今小程序更是如火中天，在這里，讓我們也跟進(jìn)時(shí)代的步伐從零基礎(chǔ)一起在小程序元年擼個(gè)自己的小程序玩玩。git傳送門(mén)-試駕小程序
開(kāi)發(fā)工具1.微信web開(kāi)發(fā)者工具 方便我們?cè)诰幾g時(shí)能夠?qū)崟r(shí)的看到界面變化，我們并不用此來(lái)進(jìn)行小程序的開(kāi)發(fā)，只充當(dāng)一個(gè)模儀器來(lái)使用。
2.visual Studio Code 微軟新推出的一款及終端的編輯器，大大的提高了前端工程師的開(kāi)發(fā)效率，這里我們也將用此來(lái)進(jìn)行小程序的開(kāi)發(fā)。沒(méi)有了解過(guò)的同學(xué)也可以試做去使用下吧，良心推薦。。
3.Easy Mork easy-mock,通過(guò)它能快速生成模擬數(shù)據(jù)的服務(wù)，它能為我們提供一個(gè)數(shù)據(jù)接口url，然后使用wx.request({ url: url, .....})來(lái)發(fā)送數(shù)據(jù)請(qǐng)求，我的數(shù)據(jù)大部分都是通過(guò)Mork模擬的
創(chuàng)建小程序：
一、目錄架構(gòu)
我們創(chuàng)建小程序開(kāi)發(fā)者工具幫我們自動(dòng)生成的目錄：
page文件夾, 頁(yè)面文件夾 包含你所有的頁(yè)面文件,至少包含.js .wxml .wxs后綴文件，.json可選
utlis文件夾 ,放置一些全局需要使用的js文件
app.js 控制全局的邏輯結(jié)構(gòu)
app.json 配置一些全局?jǐn)?shù)據(jù)，所有頁(yè)面都要在此處注冊(cè)
app.wxml 內(nèi)容結(jié)構(gòu)
app.wxss 全局樣式
另外我們也需要自己創(chuàng)建，用于模塊式的開(kāi)發(fā)：
assets文件夾 用于我們存放所有的靜態(tài)資源比如：icons/,images/，js/,.json/提供數(shù)據(jù)
module/文件夾 開(kāi)發(fā)功能分模塊開(kāi)發(fā)，這樣有便于多人協(xié)作，大大加快了開(kāi)發(fā)效率，同時(shí)也提高了代碼的可讀性。
styles/文件夾 用于存放頁(yè)面的css樣式的文件夾，利用es6的模塊可以提高代碼的復(fù)用性和可讀性，便于以后更方便的維護(hù)。
二、ES6模塊化語(yǔ)言上面我們講到如何模塊化的去處理我們的業(yè)務(wù)，實(shí)際上還是把業(yè)務(wù)和邏輯區(qū)分開(kāi)來(lái)。但是我們?nèi)绾蝺?yōu)雅的去調(diào)用這些模塊呢？一似乎我們會(huì)去尋找一種方法去解決它，沒(méi)錯(cuò)我們的es6擔(dān)任了這個(gè)使命。
創(chuàng)建模塊時(shí)我們需要使用 export default ModuleName 去創(chuàng)建這個(gè)模塊。比如我們?cè)囻{小程序我們創(chuàng)建一個(gè)expory default testDrive這樣就可以了，在這個(gè)模塊中我們只要去定義它就好了，const testDrive =（）=> {} 使用我們的箭頭函數(shù)。
引用模塊時(shí)我們只需要 import testDriver from "xxxxx相應(yīng)的文件夾"。
項(xiàng)目功能首頁(yè)全屏輪播圖優(yōu)雅而大氣
scroll-view的使用，可滾動(dòng)視圖區(qū)域生成
視頻播放，video組件使用
人工客服
動(dòng)態(tài)評(píng)論列表
獲取用戶(hù)信息
利用mock 傳數(shù)據(jù)
具體功能實(shí)用技巧 一、首頁(yè)全屏輪播圖{{item.sub_header}} {{item.header}} {{item.description}}
輪播圖的一些處理技巧：
* 輪播圖不在像我們以往單純的放置圖片的輪播圖的效果了，我們這里動(dòng)態(tài)的添加數(shù)據(jù)，為每個(gè)輪播圖都配置一些desc來(lái)描述，更好的吸引顧客的眼球。
* 采用view來(lái)承載我們的desc，為他們添加相應(yīng)的樣式。
* 動(dòng)態(tài)的綁定數(shù)據(jù)，每個(gè)輪播圖的desc肯定不一樣，這就需要我們?nèi)ソ壎〝?shù)據(jù)使用我們的{{item}}。name數(shù)據(jù)從哪來(lái)呢？我們?nèi)ata里去手動(dòng)添加嗎？就讓我們?cè)趫?jiān)持一些。后面更精彩。
二、數(shù)據(jù)的來(lái)源
好吧！！我們不賣(mài)關(guān)子，直接接著上面的講吧。數(shù)據(jù)來(lái)源處理方式可以分為兩種：
1.URL式的數(shù)據(jù)封裝采用ajax請(qǐng)求，展示本地存儲(chǔ)能力
console.log(this.globalData);
展示本地存儲(chǔ)能力
ajax請(qǐng)求
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，其中就用一種非常強(qiáng)大且實(shí)用的api: wx.request({}),上面的代碼很詳細(xì)的介紹了他的使用方法，我們直接今天重點(diǎn)吧。怎么去使用網(wǎng)上的數(shù)據(jù)呢？
在我們每個(gè)page里內(nèi)置很多函數(shù)，比如onLaunch(),onLoad()等，每個(gè)函數(shù)都有不同的作用。我們?cè)趐age里聲明一個(gè)全局globalData并且在onLaunch函數(shù)里使用Object.assign（this.globalData,request.data）為這個(gè)全局globalData賦值，把我們的數(shù)據(jù)存放進(jìn)去。在我們首頁(yè)的index.js去調(diào)用它slide: app.globalData.slides
2.使用Easy Mork自己去創(chuàng)建數(shù)據(jù)，這里不是我們的重點(diǎn)，有興趣的可以去了解下Easy Mork如何模擬數(shù)據(jù)吧。調(diào)用方法跟上述一樣。例外我們呢可以直接引入一個(gè)js.json文件可以使用我們之前介紹的模塊化去引用并配置到全局data里
三、頁(yè)面跳轉(zhuǎn)雙向傳遞數(shù)據(jù)一個(gè)小程序頁(yè)面跳轉(zhuǎn)總是必須的，但是頁(yè)面的數(shù)據(jù)如何去傳遞呢？
data-id="{{item.id}}" 在我們點(diǎn)擊跳轉(zhuǎn)事件綁定一個(gè)數(shù)據(jù)，這樣我們就可以在下一個(gè)頁(yè)面獲取這個(gè)id了
onLoad: function (options) {
const id = options.id;
console.log(id)
},
然后我們?cè)俑鶕?jù)這個(gè)獲取到的id進(jìn)行相應(yīng)的處理，這里小編在總結(jié)總結(jié)，以后寫(xiě)的詳細(xì)一定。關(guān)于頁(yè)面如何雙向傳遞數(shù)據(jù)，時(shí)間有限，就先都這里，希望你們的點(diǎn)贊哦。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/52327.html
摘要：前言年月日，微信小程序發(fā)布。這也標(biāo)志著的，阿里的，的小程序這三架馬車(chē)在年并驅(qū)騎行。傳送門(mén)試駕小程序開(kāi)發(fā)工具微信開(kāi)發(fā)者工具方便我們?cè)诰幾g時(shí)能夠?qū)崟r(shí)的看到界面變化，我們并不用此來(lái)進(jìn)行小程序的開(kāi)發(fā)，只充當(dāng)一個(gè)模儀器來(lái)使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日，微信小程序發(fā)布。這也標(biāo)志...
摘要：前言年月日，微信小程序發(fā)布。這也標(biāo)志著的，阿里的，的小程序這三架馬車(chē)在年并驅(qū)騎行。傳送門(mén)試駕小程序開(kāi)發(fā)工具微信開(kāi)發(fā)者工具方便我們?cè)诰幾g時(shí)能夠?qū)崟r(shí)的看到界面變化，我們并不用此來(lái)進(jìn)行小程序的開(kāi)發(fā)，只充當(dāng)一個(gè)模儀器來(lái)使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日，微信小程序發(fā)布。這也標(biāo)志...
摘要：使用開(kāi)發(fā)微信小程序基礎(chǔ)接口核心設(shè)計(jì)原則之一就是類(lèi)型檢查，通過(guò)使用接口可以進(jìn)行類(lèi)型檢查，滿(mǎn)足傳統(tǒng)面向?qū)ο笏枷耄谟行ч_(kāi)發(fā)，有效避免類(lèi)型轉(zhuǎn)換問(wèn)題。使用開(kāi)發(fā)微信小程序基礎(chǔ)迭代器為每一個(gè)對(duì)象定義了默認(rèn)的迭代器。 使用TypeScript開(kāi)發(fā)微信小程序（1）——基礎(chǔ)：數(shù)據(jù)類(lèi)型（Type） ?TypeScript 的基本數(shù)據(jù)類(lèi)型有boolean、number、string 、array、enum...
摘要：使用新特性開(kāi)發(fā)微信小程序國(guó)際化與本地化新特性國(guó)際化與本地化新增了很多對(duì)于國(guó)際化的支持，比如時(shí)間格式，貨幣格式，數(shù)字格式等。 ECMAScript 6（簡(jiǎn)稱(chēng)ES6）是JavaScript語(yǔ)言的最新標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的，所以又稱(chēng)ECMAScript 2015。 微信小程序支持絕大部分ES6的新增特性。 使用ES6新特性開(kāi)發(fā)微信小程序（1） ES6新特性：Cons...
閱讀 2580·2021-08-20 09:38
閱讀 1360·2019-08-30 15:43
閱讀 598·2019-08-29 17:13
閱讀 1609·2019-08-29 14:01
閱讀 1320·2019-08-29 13:29
閱讀 2331·2019-08-23 18:29
閱讀 2052·2019-08-23 17:51
閱讀 1920·2019-08-23 17:16
