taro开发微信小程序的实践

在京东凹凸实验室开发taro跨平台早期之前，就已经进行taro尝鲜了。开发这个实例 猫眼电影 已经过去几个月了。案例部分使用的是猫眼电影真实线上接口，关于订座的座位数据是自己模拟实现的，案例只供参考学习。

开发环境

操作系统：window 10
taro版本：v0.0.69
node版本：v8.11.1
github地址: https://github.com/harhao/miniprogram

运行效果

 

目录分析

src 是主要的开发目录，各个文件实现功能如下所示:

├─.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端获取到了所有城市的数据。之前用了 easymock 模拟数据接口，现在不能使用了。不过现在在微信小程序的云开发，可以把数据模拟上去。其中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官方案例提供的推荐实现tab标签组件的方式。使用其他方法亦可。该页主要实现电影列表的影评价和推荐指数，价格等。微信小程序中基本所有接口都依赖于 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 (影院座位页)

自己模拟实现了一个推荐座位与选座功能。为了实现座位信息选择,使用了二维数组对座位信息已选和未选，其中0代表该处拥有座位、e代表该处为空。其中数组的行代表了影院的第几排，嵌套的数组的索引代表了第几列。

[
 [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地址: https://github.com/harhao/miniprogram

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。