taro開發微信小程序
在京東凹凸實驗室開發Taro跨平臺早期以前，就已經進行Taro嚐鮮了。開發這個實例
貓眼電影已通過去幾個月了。案例部分使用的是貓眼電影真實線上接口，關於訂座的座位數據是本身模擬實現的，案例只供參考學習。css
開發環境
操做系統：Window 10
Taro版本：v0.0.69
Node版本：v8.11.1
github地址: https://github.com/Harhao/miniProgram
複製代碼
運行效果
目錄分析
src是主要的開發目錄，各個文件實現功能以下所示:html
├─.idea
│ └─libraries
├─.temp
├─config
└─src
├─assets
│ └─images
├─components (公用組件)
│ ├─Brandbar
│ ├─Selectbar
│ ├─Specialbar
│ └─Toptab(電影詳情分類)
└─pages
| ├─cinema(影院列表)
| ├─cinemaDetail(影院詳情頁)
| ├─content(電影介紹)
| ├─detail(電影詳情頁)
| ├─map(影院地圖定位頁)
| ├─movies(電影列表頁)
| ├─order(電影票訂單頁)
| ├─person(用戶登陸頁)
| ├─position(地理位置選擇頁)
| ├─search(電影/影院搜索頁)
| ├─seat(影院座位頁)
| └─user(用戶中心)
|__app.js(入口配置文件)
|__app.scss
|__index.html
複製代碼
入口配置文件app.js分析
Movies列表頁是微信小程序的首頁，下面代碼中config配置的是小程序中全部使用的頁面定義路由。下面重點介紹幾個比較重要的關鍵點微信小程序頁。git
import Taro, { Component } from "@tarojs/taro";
import Movies from "./pages/movies/movies";
import "./app.scss";
class App extends Component {
config = {
//訪問路由文件定義
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"
],
//小程序頂部設置
window: {
backgroundTextStyle: "light",
navigationBarBackgroundColor: "#e54847",
navigationBarTitleText: "貓眼電影",
navigationBarTextStyle: "white",
enablePullDownRefresh: true
},
//底部tab導航欄配置
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電影列表頁
getCities()是獲取當前定位的城市的路由，由於在貓眼電影小程序抓包中沒有抓取到獲取當前定位的地址接口，因此在貓眼電影H5端獲取到了全部城市的數據。以前用了easyMock模擬數據接口，如今不能使用了。不過如今在微信小程序的雲開發，能夠把數據模擬上去。其中Toptab是正在熱映和即將上映的兩個分類總的組件。github
// movies頁
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分類頁
其中即將上映和正在熱映，作了一個tab組件主要重點的代碼是：web
<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官方案例提供的推薦實現tab標籤組件的方式。使用其餘方法亦可。該頁主要實現電影列表的影評價和推薦指數，價格等。微信小程序中基本全部接口都依賴於cityId,也就是在movies頁獲取定位地址。下面getMoviesOnList是獲取真實線上貓眼電影的接口，須要僞造請求headerajax
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(影院座位頁)
本身模擬實現了一個推薦座位與選座功能。爲了實現座位信息選擇,使用了二維數組對座位信息已選和未選，其中0表明該處擁有座位、E表明該處爲空。其中數組的行表明了影院的第幾排，嵌套的數組的索引表明了第幾列。json
[
[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是當前定位城市ID，ci是影院ID。initParams是獲取線上座位信息接口，seatData是獲取到的影院座位信息，須要對座位信息作進一步的加工。遍歷座位信息，若是字段st爲N,則arr設置爲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
});
}
})
}
複製代碼
作了影院座位信息是否爲空篩選以後，接下來就是選座功能。其中影院座位的選擇與取消使用了buySeat進行保存。selectSeat函數是選擇座位，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個座位',
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
})
}
})
}
}
複製代碼
推薦座位功能實現,getRecomment是推薦位實現，如今至於1人、2人、3人、4人推薦。情侶位實現沒有抓取到貓眼的推薦接口信息。數組
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電影詳情頁
電影詳情是一部電影簡略介紹。主要實現了，電影主要簡略描述和預告片的播放關閉，實現比較簡單。getDetailData是獲取電影詳情數據接口。其中獲取到img路徑直接獲取不到圖片數據，須要對路徑進行改寫，以下代碼所示：
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);
})
}
複製代碼
在今天這個充滿戀愛酸臭味日子，滿懷期待地水完這篇短文。若是以爲喜歡的話，可不能夠給我new個對象。說錯了，應該是new個star~。
github地址: github.com/Harhao/mini…
相關文章
- 1. 微信小程序、uni-app開發微信小程序、taro開發微信小程序基礎知識
- 2. Taro開發微信小程序-用戶受權(三)
- 3. Taro開發微信小程序的初體驗
- 4. taro + iview 實現跨平臺開發（App，Wap，微信小程序）
- 5. Taro開發微信小程序安裝運行
- 6. Taro開發微信小程序-登陸實現(二)
- 7. 微信小程序Taro開發(3)：canvas製作鐘錶
- 8. Taro開發微信小程序-TabBar實現(四)
- 9. [taro]微信開發者工具運行taro創建的小程序
- 10. 微信小程序(Taro)手撕FormData
- 更多相關文章...
- • W3C 程序 - W3C 教程
- • ASP 子程序 - ASP 教程
- • PHP開發工具
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
