taro開發(fā)微信小程序的實(shí)踐
在京東凹凸實(shí)驗(yàn)室開發(fā)Taro跨平臺(tái)早期之前，就已經(jīng)進(jìn)行Taro嘗鮮了。開發(fā)這個(gè)實(shí)例 貓眼電影 已經(jīng)過(guò)去幾個(gè)月了。案例部分使用的是貓眼電影真實(shí)線上接口，關(guān)于訂座的座位數(shù)據(jù)是自己模擬實(shí)現(xiàn)的，案例只供參考學(xué)習(xí)。
開發(fā)環(huán)境
操作系統(tǒng)：Window 10
Taro版本：v0.0.69
Node版本：v8.11.1
github地址: https://github.com/Harhao/miniProgram
運(yùn)行效果
目錄分析
src 是主要的開發(fā)目錄，各個(gè)文件實(shí)現(xiàn)功能如下所示:
├─.idea │ └─libraries ├─.temp ├─config └─src ├─assets │ └─images ├─components (公用組件) │ ├─Brandbar │ ├─Selectbar │ ├─Specialbar │ └─Toptab(電影詳情分類) └─pages | ├─cinema(影院列表) | ├─cinemaDetail(影院詳情頁(yè)) | ├─content(電影介紹) | ├─detail(電影詳情頁(yè)) | ├─map(影院地圖定位頁(yè)) | ├─movies(電影列表頁(yè)) | ├─order(電影票訂單頁(yè)) | ├─person(用戶登錄頁(yè)) | ├─position(地理位置選擇頁(yè)) | ├─search(電影/影院搜索頁(yè)) | ├─seat(影院座位頁(yè)) | └─user(用戶中心) |__app.js(入口配置文件) |__app.scss |__index.html
入口配置文件 app.js 分析
Movies 列表頁(yè)是微信小程序的首頁(yè)，下面代碼中config配置的是小程序中所有使用的頁(yè)面定義路由。下面重點(diǎn)介紹幾個(gè)比較重要的關(guān)鍵點(diǎn)微信小程序頁(yè)。
import Taro, { Component } from "@tarojs/taro";
import Movies from "./pages/movies/movies";
import "./app.scss";
class App extends Component {
config = {
//訪問(wèn)路由文件定義
pages: [
"pages/movies/movies",
"pages/person/person",
"pages/cinema/cinema",
"pages/position/position",
"pages/search/search",
"pages/detail/detail",
"pages/content/content",
"pages/cinemaDetail/cinemaDetail",
"pages/map/map",
"pages/seat/seat",
"pages/user/user",
"pages/order/order"
],
//小程序頂部設(shè)置
window: {
backgroundTextStyle: "light",
navigationBarBackgroundColor: "#e54847",
navigationBarTitleText: "貓眼電影",
navigationBarTextStyle: "white",
enablePullDownRefresh: true
},
//底部tab導(dǎo)航欄配置
tabBar: {
color: "#333",
selectedColor: "#f03d37",
backgroundColor: "#fff",
borderStyle: "black",
list: [
{
pagePath: "pages/movies/movies",
text: "電影",
iconPath: "./assets/images/index.png",
selectedIconPath: "./assets/images/index_focus.png"
},
{
pagePath: "pages/cinema/cinema",
text: "影院",
iconPath: "./assets/images/themeOld.png",
selectedIconPath: "./assets/images/theme.png"
},
{
pagePath: "pages/person/person",
text: "我的",
iconPath: "./assets/images/person.png",
selectedIconPath: "./assets/images/personSelect.png"
}
]
}
};
render() {
// Movies小程序入口文件
return <Movies />;
}
}
Taro.render(<App />, document.getElementById("app"));
Movies 電影列表頁(yè)
getCities() 是獲取當(dāng)前定位的城市的路由，因?yàn)樵谪堁垭娪靶〕绦蜃グ袥]有抓取到獲取當(dāng)前定位的地址接口，所以在貓眼電影H5端獲取到了所有城市的數(shù)據(jù)。之前用了 easyMock 模擬數(shù)據(jù)接口，現(xiàn)在不能使用了。不過(guò)現(xiàn)在在微信小程序的云開發(fā)，可以把數(shù)據(jù)模擬上去。其中TopTab是正在熱映和即將上映的兩個(gè)分類總的組件。
// movies頁(yè)
export default class Movies extends Component {
config = {
navigationBarTitleText: "貓眼電影"
};
constructor(props) {
super(props);
}
componentDidMount() {
this.getCities();
}
getCities() {
Taro.request({
url:
"https://www.easy-mock.com/mock/5ba0a7f92e49497b37162e32/example_copy/cities_copy_1541385673090",
method: "GET",
header: {
Accept: "application/json, */*",
"Content-Type": "application/json"
}
}).then(res => {
if (res.statusCode == 200) {
let data = res.data.data.data.data;
Taro.setStorageSync("cities", data);
}
});
}
render() {
return (
<View className="movies">
<Toptab />
</View>
);
}
}
Toptab分類頁(yè)
其中即將上映和正在熱映，做了一個(gè)tab組件主要重點(diǎn)的代碼是：
<View className="tabItemContent" hidden={this.state.currentNavtab === 0?false:true}>
<!-- 正在熱映情況-->
</View>
<View className="tabItemContent" hidden={this.state.currentNavtab === 1?false:true}>
<!--即將上映情況-->
</View>
其中 currentNavTab 控制即將上映和正在熱映的 section 顯隱, hidden 是taro官方案例提供的推薦實(shí)現(xiàn)tab標(biāo)簽組件的方式。使用其他方法亦可。該頁(yè)主要實(shí)現(xiàn)電影列表的影評(píng)價(jià)和推薦指數(shù)，價(jià)格等。微信小程序中基本所有接口都依賴于 cityId ,也就是在 movies 頁(yè)獲取定位地址。下面 getMoviesOnList 是獲取真實(shí)線上貓眼電影的接口，需要偽造請(qǐng)求 header
getMoviesOnList(){
let cityId = this.state.id
Taro.showLoading({
title:"加載中"
});
Taro.request({
url:"https://m.maoyan.com/ajax/movieOnInfoList?token=",
method:"GET",
header:{
"Cookie":`_lxsdk_cuid=164b6cae2cac8-02b7b032f571b5-39614706-1fa400-164b6cae2cbc8; v=3; iuuid=1A6E888B4A4B29B16FBA1299108DBE9CA19FF6972813B39CA13A8D9705187374; revrev=76338a29; _lx_utm=utm_source%3DBaidu%26utm_medium%3Dorganic; webp=true; __mta=3463951.1532075108184.1533098338076.1533118040602.20; _lxsdk=1A6E888B4A4B29B16FBA1299108DBE9CA19FF6972813B39CA13A8D9705187374; from=canary; selectci=true; __mta=3463951.1532075108184.1533118040602.1533118773295.21; _lxsdk_s=164f4f4c9e9-45e-d1b-46%7C%7C50; ci=${cityId}`
}
}).then(res=>{
if(res.statusCode == 200){
Taro.hideLoading();
res.data.movieList.forEach((value)=>{
let arr = value["img"].split("w.h");
value["img"] = arr[0]+"128.180"+ arr[1]
});
this.setState({
onList:res.data.movieList,
startIndex:res.data.movieList.length,
lastIndex:res.data.total -1,
movieIds:res.data.movieIds
});
}else{
this.setState({
onList:null,
movieIds:null
})
}
})
}
seat (影院座位頁(yè))
自己模擬實(shí)現(xiàn)了一個(gè)推薦座位與選座功能。為了實(shí)現(xiàn)座位信息選擇,使用了二維數(shù)組對(duì)座位信息已選和未選，其中0代表該處擁有座位、E代表該處為空。其中數(shù)組的行代表了影院的第幾排，嵌套的數(shù)組的索引代表了第幾列。
[ [0,0,0,0,0,0], [E,0,0,E,0,0]， [0,0,0,0,0,0], [E,0,0,E,0,0] ]
初始化座位信息, https://m.maoyan.com/ajax/seatingPlan?timestamp=${Date.now()} 獲取貓眼電影線上座位信息接口， cityId 是當(dāng)前定位城市ID， ci 是影院ID。 initParams 是獲取線上座位信息接口， seatData 是獲取到的影院座位信息，需要對(duì)座位信息做進(jìn)一步的加工。遍歷座位信息，如果字段 st 為N,則arr設(shè)置為0(代表具有座位并未選)，為E則為該處不具有座位。
initParams(){
const params = this.$router.params;
const self = this;
Taro.setNavigationBarTitle({
title:params.cinemaName
})
Taro.showLoading({
title:"加載中..."
});
Taro.request({
url:`https://m.maoyan.com/ajax/seatingPlan?timestamp=${Date.now()}`,
method:'post',
header:{
'Cookie': 'uuid_n_v=v1; iuuid=26F6BA50506A11E9A973FDD3C7EBDF0E29C7297EC72D4F77A53F9445EF0EE9F3; webp=true; ci=20%2C%E5%B9%BF%E5%B7%9E; _lxsdk_cuid=169be42cf28c8-098c7e821e63bd-2d604637-3d10d-169be42cf29c8; _lxsdk=26F6BA50506A11E9A973FDD3C7EBDF0E29C7297EC72D4F77A53F9445EF0EE9F3; from=canary; uid=124265875; token=9P1-5VoykD_qrpBxpTvSoVhMwzQAAAAAJwgAAE2za6eVZdI-oORrTHb8dP4JEMYCiza0zSSNoRkHx4qajm2Nu6ClhU00u5A1avIySg; __mta=250960825.1553675243337.1553675275840.1553675275842.6; user=124265875%2C9P1-5VoykD_qrpBxpTvSoVhMwzQAAAAAJwgAAE2za6eVZdI-oORrTHb8dP4JEMYCiza0zSSNoRkHx4qajm2Nu6ClhU00u5A1avIySg; _lxsdk_s=169be42cf2b-ca7-4ca-570%7C%7C14'
},
data:{
cityId:params.cityId,
ci:params.ci,
seqNo:params.seqNo
}
}).then(res=>{
if(res.statusCode ==200){
Taro.hideLoading();
const seatData = res.data.seatData;
const seatArray = [];
seatData.seat.sections[0].seats.map(item=>{
let arr = [];
item["columns"].map(seat=>{
if(seat["st"] == "N"){
arr.push('0');
}else{
arr.push('E')
}
})
seatArray.push(arr);
})
self.setState({
seatData:seatData,
seatArray:seatArray
});
}
})
}
做了影院座位信息是否為空篩選之后，接下來(lái)就是選座功能。其中影院座位的選擇與取消使用了 buySeat 進(jìn)行保存。 selectSeat 函數(shù)是選擇座位， row :代表選擇第幾行， column 代表第幾列， item 是該座位是否被選的信息(0為未選表示可選擇、2為已選表示不可再選)
selectSeat(row,column,item){
const self = this;
const arr = this.state.seatArray;
// item代表該座位是否可選
if(item == 0){
if(self.state.buySeat.length ==4){
Taro.showToast({
title: '最多選擇4個(gè)座位',
duration: 2000
})
return false;
}else{
let buySeat = self.state.buySeat;
arr[row][column]= '2';
buySeat.push({
"row":row,
"column":column
});
self.setState({
buySeat:buySeat,
seatArray:arr
})
}
}else{
arr[row][column]= '0';
const buySeat = this.state.buySeat;
let tmpArr = this.state.buySeat;
buySeat.map((value,index)=>{
if(value["row"]== row && value["column"]== column){
tmpArr.splice(index,1);
self.setState({
buySeat:tmpArr,
seatArray:arr
})
}
})
}
}
推薦座位功能實(shí)現(xiàn), getRecomment 是推薦位實(shí)現(xiàn)，現(xiàn)在至于1人、2人、3人、4人推薦。情侶位實(shí)現(xiàn)沒有抓取到貓眼的推薦接口信息。
selectAll(seats){
const self = this;
seats.map(item=>{
let row = parseInt(item.rowId.split('0')[0]);
let column = parseInt(item.columnId.split('0')[0]);
let itemIndex = self.state.seatArray[row][column];
self.selectSeat(row,column,itemIndex);
})
}
getRecomment(recomment,num){
switch(num){
case 1:this.selectAll(recomment.bestOne.seats);break;
case 2:this.selectAll(recomment.bestTwo.seats);break;
case 3:this.selectAll(recomment.bestThree.seats);break;
case 4:this.selectAll(recomment.bestFour.seats);break;
}
}
content電影詳情頁(yè)
電影詳情是一部電影簡(jiǎn)略介紹。主要實(shí)現(xiàn)了，電影主要簡(jiǎn)略描述和預(yù)告片的播放關(guān)閉，實(shí)現(xiàn)比較簡(jiǎn)單。 getDetailData 是獲取電影詳情數(shù)據(jù)接口。其中獲取到img路徑直接獲取不到圖片數(shù)據(jù)，需要對(duì)路徑進(jìn)行改寫，如下代碼所示：
getDetailData(){
Taro.showLoading({
title:"加載中"
});
Taro.request({
url:`https://m.maoyan.com/ajax/detailmovie?movieId=${this.state.params.id}`
}).then(res=>{
if(res.statusCode == 200){
Taro.hideLoading();
let data = res.data.detailMovie;
let arr = data["img"].split("w.h");
data["img"] = arr[0]+"128.180"+ arr[1];
for(let index in data.photos){
let photo = data.photos[index];
let arr = photo.split('w.h');
data.photos[index] = arr[0]+'180.140'+arr[1];
}
this.setState({
detailMovie:data
});
}
}).catch(err=>{
console.log(err.message);
})
}
在今天這個(gè)充滿戀愛酸臭味日子，滿懷期待地水完這篇短文。如果覺得喜歡的話，可不可以給我new個(gè)對(duì)象。說(shuō)錯(cuò)了，應(yīng)該是new個(gè)star~。
github地址: https://github.com/Harhao/miniProgram
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript null和undefined區(qū)別分析
在JavaScript開發(fā)中，被人問(wèn)到：null與undefined到底有啥區(qū)別？2009-10-10
js替換字符串中所有指定的字符(實(shí)現(xiàn)代碼)
下面小編就為大家?guī)?lái)一篇js替換字符串中所有指定的字符(實(shí)現(xiàn)代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
在Javascript里訪問(wèn)SharePoint列表數(shù)據(jù)的實(shí)現(xiàn)方法
在進(jìn)行SharePoint訂制的時(shí)候經(jīng)常會(huì)遇到開發(fā)手段受限制的問(wèn)題，比如通常公司都會(huì)限制服務(wù)器的訪問(wèn)以及部署，很多開發(fā)都只能夠在客戶端來(lái)進(jìn)行2011-05-05
不用ajax實(shí)現(xiàn)點(diǎn)擊文字即可編輯的方法
本文給大家分享一段代碼不使用ajax實(shí)現(xiàn)點(diǎn)擊文字即可編輯的方法，代碼簡(jiǎn)單易懂，需要的朋友參考下吧2007-12-12
JS過(guò)濾url參數(shù)特殊字符的實(shí)現(xiàn)方法
本篇文章主要是對(duì)JS過(guò)濾url參數(shù)特殊字符的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
利用JS+Canvas給南方的冬季來(lái)一場(chǎng)紛紛揚(yáng)揚(yáng)的大雪
現(xiàn)在冬天下雪已經(jīng)是很常見的事情了,為了應(yīng)景,我們可以為我們的網(wǎng)站增加雪花飄落的效果,這個(gè)應(yīng)該還是很不錯(cuò)的,下面這篇文章主要給大家介紹了關(guān)于利用JS+Canvas給南方的冬季來(lái)一場(chǎng)紛紛揚(yáng)揚(yáng)的大雪,需要的朋友可以參考下2022-12-12
JavaScript Accessor實(shí)現(xiàn)說(shuō)明
關(guān)于Getter與Setter大家一定不會(huì)陌生,下面簡(jiǎn)單介紹幾種我所知道的在JavaScript中實(shí)現(xiàn)G/S的方法.2010-12-12
JS判斷是否為JSON對(duì)象及是否存在某字段的方法(推薦)
下面小編就為大家?guī)?lái)一篇JS判斷是否為JSON對(duì)象及是否存在某字段的方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JS彈出對(duì)話框?qū)崿F(xiàn)方法(三種方式)
這篇文章主要介紹了JS彈出對(duì)話框?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了三種方式,包括alert、confirm及prompt,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了js實(shí)現(xiàn)按鈕加背景圖片常用方法,羅列了js事件觸發(fā)控制背景圖片、css樣式控制以及圖片按鈕三種方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-11-11