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

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

(0)

相关推荐

  • 使用taro开发微信小程序遇到的坑总结

    Taro,京东凹凸实验室出品的适配多端的一个框架,Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 一.taro开发搭建 1.taro很方便就在于其环境搭建很轻松,照着官方文档几行代码就能搭建好. 2.在进行预览的时候,不同的方式区别是很大的

  • taro开发微信小程序的实践

    在京东凹凸实验室开发Taro跨平台早期之前,就已经进行Taro尝鲜了.开发这个实例 猫眼电影 已经过去几个月了.案例部分使用的是猫眼电影真实线上接口,关于订座的座位数据是自己模拟实现的,案例只供参考学习. 开发环境 操作系统:Window 10 Taro版本:v0.0.69 Node版本:v8.11.1 github地址: https://github.com/Harhao/miniProgram 运行效果 目录分析 src 是主要的开发目录,各个文件实现功能如下所示: ├─.idea │ └─

  • 使用Vue.js开发微信小程序开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

  • 详解Linux 下开发微信小程序安装开发工具

    详解Linux 下开发微信小程序安装开发工具 1. git clone https://github.com/yuan1994/wechat_web_devtools 然后创建一个文件夹 mkdir /opt/tencent/ 移动文件 mv ./wechat_web_devtools /opt/tencent 修改用户组 chown -R root:root /opt/tencent/wechat_web_devtools 启动测试工具 /opt/tencent/wechat_web_devt

  • 使用TypeScript开发微信小程序的方法

    TypeScript简介: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性.

  • 微信小程序项目实践之主页tab选项实现

    官方文档 效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改 如图: 先介绍一下app.json文件 默认有两个代码块: 1.pages 这里注册了当前小程序的所有页面路径 2.window 这里用于设置小程序的状态栏.导航条.标题.窗口背景色. 以上两个详细使用参考文档,本文章不做介绍 我们看下app.json提供的另一个配置项:tabBar tabBar提供一些公有的属性对tab配置: 而针对每一个单独的tab 也有一些属性进行配置: 官方示意图: 具体实现底部Tab

  • 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

    前言 最近博主正在用微信小程序开发一款网上商城系统.恰好赶上了美团开源的小程序开发框架mpvue.该框架继承了vue.js的特性,用起来还是蛮爽的.然后在开发中,数据仓库这块懵逼了, 引入的vuex的辅助函数mapState.mapGetters.mapMutations.mapActions等怎么就不能用呢.苦恼之际打开D盘,一番愉悦之后,终于想通啦- 问题分析 •vuex辅助函数 首先简单说一下vuex的辅助函数mapState.mapGetters.mapMutations.mapActi

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 在webstorm开发微信小程序之使用阿里自定义字体图标的方法

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. 3.在需要使用到图标的页面导入该wxss文件.例如: 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 微信小程序项目实践之九宫格实现及item跳转功能

    效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间.  具体实现: 1.首先添加图片资源文件    在项目根目录新建一个目录,取名为images , 用于存放图片资源,然后添加进入几张图片 2.在home目录下的home.js 文件中(参照前两篇小程序实践文章) 进行数据源的配置 数据源为一个数组,每个数组元素为一个对象,该对象包含name(item文字),img(item示意图),url(点击该item跳转目录) 3.依据列表渲染的知识点进行home.wxml的编程   

随机推荐