taro開發(fā)微信小程序的實踐

更新時間：2019年05月21日 14:56:37 作者：Harhao

這篇文章主要介紹了taro開發(fā)微信小程序的實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在京東凹凸實驗室開發(fā)Taro跨平臺早期之前，就已經進行Taro嘗鮮了。開發(fā)這個實例 貓眼電影 已經過去幾個月了。案例部分使用的是貓眼電影真實線上接口，關于訂座的座位數(shù)據(jù)是自己模擬實現(xiàn)的，案例只供參考學習。

開發(fā)環(huán)境

操作系統(tǒng)：Window 10
Taro版本：v0.0.69
Node版本：v8.11.1
github地址: https://github.com/Harhao/miniProgram

運行效果

目錄分析

src 是主要的開發(fā)目錄，各個文件實現(xiàn)功能如下所示:

├─.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配置的是小程序中所有使用的頁面定義路由。下面重點介紹幾個比較重要的關鍵點微信小程序頁。

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端獲取到了所有城市的數(shù)據(jù)。之前用了 easyMock 模擬數(shù)據(jù)接口，現(xiàn)在不能使用了。不過現(xiàn)在在微信小程序的云開發(fā)，可以把數(shù)據(jù)模擬上去。其中TopTab是正在熱映和即將上映的兩個分類總的組件。

// 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組件主要重點的代碼是：

<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官方案例提供的推薦實現(xiàn)tab標簽組件的方式。使用其他方法亦可。該頁主要實現(xiàn)電影列表的影評價和推薦指數(shù)，價格等。微信小程序中基本所有接口都依賴于 cityId ,也就是在 movies 頁獲取定位地址。下面 getMoviesOnList 是獲取真實線上貓眼電影的接口，需要偽造請求 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 (影院座位頁)

自己模擬實現(xiàn)了一個推薦座位與選座功能。為了實現(xiàn)座位信息選擇,使用了二維數(shù)組對座位信息已選和未選，其中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 是當前定位城市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 函數(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個座位',
   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
   })
  }
  })
 }
 }

推薦座位功能實現(xiàn), getRecomment 是推薦位實現(xiàn)，現(xiàn)在至于1人、2人、3人、4人推薦。情侶位實現(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電影詳情頁

電影詳情是一部電影簡略介紹。主要實現(xiàn)了，電影主要簡略描述和預告片的播放關閉，實現(xiàn)比較簡單。 getDetailData 是獲取電影詳情數(shù)據(jù)接口。其中獲取到img路徑直接獲取不到圖片數(shù)據(jù)，需要對路徑進行改寫，如下代碼所示：

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地址: https://github.com/Harhao/miniProgram

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

采用自執(zhí)行的匿名函數(shù)解決for循環(huán)使用閉包的問題
這篇文章主要介紹了采用自執(zhí)行的匿名函數(shù)解決for循環(huán)使用閉包的問題,很簡單，但比較實用，需要的朋友可以參考下
2014-09-09
JS面向對象編程淺析
下面就結合我自己的體會和所學習的東東和大家一起來學習在JS中如何使用面向對象的編程。
2011-08-08
詳解JavaScript狀態(tài)容器Redux
Redux官網上是這樣描述Redux，Redux is a predictable state container for JavaScript apps.（Redux是JavaScript狀態(tài)容器，提供可預測性的狀態(tài)管理）。目前Redux GitHub有5w多star，足以說明 Redux 受歡迎的程度
2021-06-06
D3.js的基礎部分之數(shù)組的處理數(shù)組的排序和求值(v3版本)
這篇文章主要介紹了D3.js的基礎部分之數(shù)組的處理數(shù)組的排序和求值(v3版本) ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05
IE6下出現(xiàn)JavaScript未結束的字符串常量錯誤的解決方法
JavaScript文件只在IE6下出錯（“未結束的字符串常量”）的解決辦法。
2010-11-11
uniapp退出關閉當前小程序或APP的簡單實現(xiàn)
最近通過Uniapp開發(fā)APP又一個非常實用的功能,這篇文章主要給大家介紹了關于uniapp退出關閉當前小程序或APP的簡單實現(xiàn),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-12-12
mysql輸出數(shù)據(jù)賦給js變量報unterminated string literal錯誤原因
mysql 數(shù)據(jù)庫數(shù)據(jù)賦給js變量報unterminated string literal錯誤原因
2010-05-05
javascript 使用正則test( )第一次是 true,第二次是false
這篇文章主要介紹了使用正則test( )第一次是 true,第二次是false的相關資料,需要的朋友可以參考下
2017-02-02
js中 javascript:void(0) 用法詳解
void(0)用于執(zhí)行某些處理，但是不整體刷新頁面的情況下，下面小編就給大家詳細介紹js中 javascript:void(0)的含義，需要的朋友可以參考下
2015-08-08
JS控制下拉列表左右選擇實例代碼
在本篇內容中小編給各位分享的是關于如何使用JS控制下拉列表左右選擇的實例代碼，需要的朋友們可以參考下。
2020-05-05