芋头开发微信小程序的实践

在JD.COM凸凹实验室开发芋头跨平台之前，已经开展了芋头早期采用者。我们开发这个猫眼电影的例子已经有几个月了。案例部分使用了猫眼电影的真实在线界面，通过仿真实现了关于预约的座位数据，案例仅供参考。

发展环境

操作系统：Window 10 Taro版本：v 0 . 0 . 69节点版本：v8.11.1github地址3360 https://github.com/Harhao/miniProgram

运行效果

目录分析

Src是主要的开发目录，每个文件的功能如下。

.图书馆。tempconfigsrcassetsimages组件(常用组件) 品牌栏pages | cinema |cinemadetail |内容|细节|地图|﹔人物|位置|搜索|座位|用户|__app.js(入口配置文件

电影列表页面是微信小程序的首页。下面代码中的config配置applet中使用的所有页面定义路由。下面重点介绍几个重要的关键点：微信小程序页面。

从“@tarojs/taro”导入Taro，{ Component }；从“”导入电影。/页面/电影/电影'；“进口”。/app . scss '；Class app扩展组件{ config={//access route file definition page 3360[' Pages/movies/movies '，' pages/person/person '，' pages/cinema/cinema '，' pages/position/position '，' pages/search/search '，' pages/detail/detail '，' Pages/cinemap/map '，' pages/user/user '，' pages/order/order']，//在小程序顶部设置window : { background text style : ' light '。导航条backgroundcolor :' # e54847 '，导航条标题文本： '猫眼电影'，导航条文本样式： '白色'，enablepulldownlrefresh : true }，//底部选项卡导航条配置有tabbar: {color3360' # 333 '，selectedcolor3360' # f03d37 '，backgroundcolor3360' # fff '，Borderstyle : '黑色'，list:/assets/images/index.png '，Selectediconpath : '。/assets/images/index _ focus . png ' }，{ page path : ' pages/cinema/cinema '，text :' cinema '，iconPath: '。/assets/images/themold . png '，选择selectedIconPath: '。/assets/images/theme.png' }，{ page path : ' pages/person/person '，Text:' my '，iconpath: '。/assets/images/person.png '，selectediconpath3360 '。/assets/images/person select . png ' }]}；Render() {//Movies小程序条目文件返回Movies/；}}Taro.render(App /，document . getelementbyid(' App '))；电影电影列表页面

GetCities()是获取当前位置城市的路线。由于猫眼电影小程序中没有获取当前位置的地址界面，所以所有城市的数据都是在猫眼电影的H5端获取的。EasyMock模拟数据接口以前用过，现在不能用了。但是现在在微信小程序的云开发中，数据是可以模拟的。其中，TopTab是正在展示且即将发布的两个分类组件。

//电影页导出默认类别电影扩展组件{ config={ navigationbartitletext : '猫眼电影' };建造师（道具){ super(道具);} componentDidMount(){ this。getcities()；} getCities(){ taro。请求({ URL : ' https://www。简单的模仿。com/mock/5ba 0a 7f 92 e 49497 b 37162 e 32/example _ copy/cities _ copy _ 1541385673090 '，method: 'GET '，header : { accept : ' application/JSON，*/*，' Content-Type ' 3: ' application/JSON ' }).然后(RES={ if(RES . statuscode==200)}让数据=RES . data。数据。数据。数据；芋头。setstoraync(' city '，数据)；} });} render(){ return(View类名=' movies ' Toptab//View)；}}Toptab分类页

其中即将上映和正在热映，做了一个标签组件主要重点的代码是：

view class NAmE=' TabitemContent ' hidden={ this。国家。CurrentNavTab===0？false:true}！-正在热映情况-/View View类名=' tabintemcontent '隐藏={ this。国家。currentnavtab===1？false:true}！-即将上映情况-/视图其中currentNavTab控制即将上映和正在热映的部分显隐隐藏的是芋官方案例提供的推荐实现标签标签组件的方式。使用其他方法亦可。该页主要实现电影列表的影评价和推荐指数，价格等。微信小程序中基本所有接口都依赖于cityId，也就是在电影页获取定位地址。下面getMoviesOnList是获取真实线上猫眼电影的接口，需要伪造请求页眉

getMoviesOnList(){ 0让城市id=这个。国家。身份证芋头。showloading({ title : '加载中' });芋头。请求({ URL : ' https://m。毛焰。com/Ajax/movieOnInfoList？token='，method:'GET '，header : { ' Cookie ' : ` _ LX SDK _ cuid=164 B6 CAE 2cac 8-02 b7b 032 f 571 b5-39614706-1 fa 400-164 B6 CAE 2cbc 8；v=3；iuuid=1a 6e 888 b4a 4b 29 b 16 FBA 1299108 DBE 9 ca 19 ff 6972813 b 39 ca 13 A8 d 9705187374；revrev=76338a29_ LX _ UTM=UTM _来源=百度& UTM _中=有机；webp=true _ _ MTA=_ LX SDK=1a 6e 888 b4a 4b 29 b 16 FBA 1299108 DBE 9 ca 19 ff 6972813 b 39 ca 13 A8 d 9705187374；from=金丝雀；selectci=true _ _ MTA=_ LX SDK _ s=164 F4 f4c 9e 9-45e-d1b- 46 | | 50；ci=${cityId}` } }).然后(RES={ if(RES . status code==200){ taro。隐藏加载()；研究数据。电影明星。foreach((value)={ let arr=value[' img '].拆分(' w . h ')；值[' img ']=arr[0]' 128.180 ' arr[1]})；这个。setstate({ onlist : RES . data。movielist，startindex : RES . data。电影明星。长度，lastIndex:res.data.total -1，movieid 3360 RES . data。movie ids })；} else { this。setstate({ onlist : null，movieid 3360 null })} })座椅（影院座位页)

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

[ [0，0，0，0，0，0]，[E，0，0，E，0，0]，[0，0，0，0，0]，[E，0，0，E，0，0]]初始化座位信息，https://m.maoyan.com/ajax/seatingPlan？时间戳=${Date.now()}获取猫眼电影线上座位信息接口，cityId是当前定位城市标识，配置项是影院身份证。initParams是获取线上座位信息接口，座椅数据是获取到的影院座位信息，需要对座位信息做进一步的加工。遍历座位信息，如果字段标准时间为n，则到达)设置为0(代表具有座位并未选),为E则为该处不具有座位。

initParams(){ const params=this .$ router . paramscon ST self=this taro。setnavigationbartitle({ title : params。cinemaname })芋头。showloading({ title : '加载中.'});芋头。请求({ URL : ` https://m。毛焰。com/Ajax/座位图？timestamp=${Date.now()} `，method:'post '，header : { ' Cookie ' : ' uuid _ n _ v=v1；iuuid=26f 6 ba 50506 a 11e 9 a 973 fdd3c 7 ebdf 0 e 29 c 7297 EC 72d 4 f 77 a 53 f 9445 ef 0 ee 9 F3；webp=trueci=20，广州；_ LX SDK _ cuid=169 be 42 cf 28 c8-098 c7e 821 e 63 BD-2d 604637-3d 10d-169 be 42 cf 29 c8；_ LX SDK=26f 6 ba 50506 a 11e 9 a 973 fdd3c 7 ebdf 0 e 29 c 7297 EC 72d 4 f 77 a 53 f 9445 ef 0 ee 9 F3；from=金丝雀；uid=124265875 token=9p 1-5VoyKD _ qrpxptvsovshmwqaaaajwgaae 2 za 6 evzdi-oorthb 8 DP 4 jemyciza0 zsnorkhx4qajm 2 nu6 clhu 00u 5 a1 aviysg；_ _ MTA=250960825 .58860 .8888888861user=124265875，9 P1-5 voykd _ qrpxptvsovzqaaajwgaae 2 za 6 evzdi-oorth b8dp 4 jemyciza0zsnorkhx4qajm 2 nu6 clhu 00u 5a 1 aviysg；_ LX SDK _ s=169 be 42 cf2 B- ca7-4ca-570 | | 14 ' }，数据： {城市id : params。城市id，ci:params.ci，seqNo:params.seqNo } }).然后(RES={ if(RES . status code==200){ taro。隐藏加载()；常量座位数据=RES .数据。座位数据；const seat数组=[]；seatdata。座位。节[0]。座位。map(item={ let arr=[]；项目['列']。地图(座位={ if(座位[' ST ']==' N ')){ arr。push(' 0 ')；} else { arr。推(' E ')})座阵。推送(arr)；})自我。setstate({ seatdata : eatdata，sea array : eaatray })；} }) }做了影院座位信息是否为空筛选之后，接下来就是选座功能。其中影院座位的选择与取消使用了购买座位进行保存选择座位函数是选择座位，第：行代表选择第几行，列代表第几列，项目是该座位是否被选的信息(0为未选表示可选择、2为已选表示不可再选)

选择座位（行、列、项目){ const self=thisconst arr=this。国家。座椅阵列；//项目代表该座位是否可选if(item==0){ if(self。国家。买座位。长度==4){芋头。显示吐司({ title : '最多选择四个座位，duration: 2000 })返回false}else{让购买座位=自我。国家。购买座位；逮捕[行][列]=' 2 ';buySeat.push({ 'row':row，' column ' : column })；自我。setstate({ buy seat : buy seat，sea arr : arr })} } else { arr[row][column]=' 0 '；const BuySite=this。国家。BuySite让tmpArr=这个。国家。购买座位；buySeat.map((值，索引)={ if(值['row']==行值['column']==列){ tmpArr.splice(索引，1);自我。setstate({ buy seat : mparr，seatarra : arr })} })} }推荐座位功能实现，getrefinit是推荐位实现，现在至于一人、2人、3人、4人推荐。情侣位实现没有抓取到猫眼的推荐接口信息。

选择所有座位{ const self=thisseats。map(item={ let row=ParSeint(item。RowID。split(' 0 '[0])；let column=parseInt(项。列d . split(' 0 '[0])；让ItemIndex=self。国家。座椅阵列[行][列]；自行选择座位(行、列、项目索引);}) } getRecomment(recomment，num){ switch(num){ case 1: this。选择所有(推荐。最好的。座位)；打破；案例2:此. selectAll(推荐。最好的两个。座位)；打破；案例3:此. selectAll(推荐。最佳三人组。座位)；打破；案例4:此. selectAll(推荐。最佳四人组。座位)；打破；} }内容电影详情页

电影详情是一部电影简略介绍。主要实现了，电影主要简略描述和预告片的播放关闭，实现比较简单getDetailData。是获取电影详情数据接口。其中获取到图片路径直接获取不到图片数据，需要对路径进行改写，如下代码所示：

getDetailData(){ taro。showloading({ title : '加载中' });芋头。请求({ URL : ` https://m。毛焰。com/Ajax/细节电影？movieId=$ { this。国家。参数。id } ` }).然后(RES={ if(RES . status code==200){ taro。隐藏加载()；让数据=RES . data。细节电影；let arr=data['img'].拆分(' w . h ')；数据[' img ']=arr[0]' 128.180 ' arr[1]；for(让索引进入数据。照片){让照片=数据。照片[索引]；让arr=照片。拆分(' w . h ')；数据。照片[索引]=arr[0]' 180.140 ' arr[1]；}这个。setstate({ detail movie 3360 data })；} }).catch(err={ console。日志(错误。消息))；}) }在今天这个充满恋爱酸臭味日子，满怀期待地水完这篇短文。如果觉得喜欢的话，可不可以给我新的个对象。说错了，应该是新的个明星~ .

开源代码库地址： https://github.com/Harhao/miniProgram

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