taro开发微信小程序的实践


Posted in Javascript onMay 21, 2019

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

开发环境

操作系统:Window 10
Taro版本:v0.0.69
Node版本:v8.11.1
github地址: https://github.com/Harhao/miniProgram

运行效果

taro开发微信小程序的实践 

目录分析

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

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

Javascript 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
element-ui表格合并span-method的实现方法
May 21 #Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 #Javascript
浅谈React Native 传参的几种方式(小结)
May 21 #Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 #Javascript
JS判断数组里是否有重复元素的方法小结
May 21 #Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 #Javascript
vue路由守卫+登录态管理实例分析
May 21 #Javascript
You might like
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python备份文件的脚本
2008/08/11 Python
python访问纯真IP数据库的代码
2011/05/19 Python
Python获取当前时间的方法
2014/01/14 Python
一则python3的简单爬虫代码
2014/05/26 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
python先序遍历二叉树问题
2017/11/10 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python 获取等间隔的数组实例
2019/07/04 Python
利用python计算时间差(返回天数)
2019/09/07 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
高中毕业生自我鉴定
2013/11/03 职场文书
手机促销活动方案
2014/02/05 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
中小学生学籍证明
2014/10/25 职场文书
通知范文怎么写
2015/04/16 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书