宝哥软件园

wyao:微信小程序介绍3:豆瓣电影实战

编辑:宝哥软件园 来源:互联网 时间:2021-12-18

微信小程序借鉴了很多web概念,但与webApp、微信公众号等传统BS架构不同。它是一个CS架构和一个客户端程序。

小程序开发的实际应用——豆瓣电影

项目配置

app.jsop中的简单配置

wyao:微信小程序入门三:豆瓣电影实战(图1)

- navigationBarBackgroundColor:导航栏的背景色。

- navigationBarTitleText:导航栏的文本内容

- navigationBarTextStyle:字体颜色,只能是黑色或白色。

规划程序的所有页面并配置

-创建所需的目录。

wyao:微信小程序入门三:豆瓣电影实战(图2)

-每页包含三个文件:js、wxss和wxml,可以根据需要添加json文件。

-修改app.json配置中的页面。

- wyao:微信小程序入门三:豆瓣电影实战(图3)

- app.json中的第一项将显示为默认页面。

完成列表页面

旋转图表

- wxml页面结构

wyao:微信小程序入门三:豆瓣电影实战(图4)

- js页面

wyao:微信小程序入门三:豆瓣电影实战(图5)

imgulls阵列的地址为模拟数据,可自行更改。

- wxss页面

wyao:微信小程序入门三:豆瓣电影实战(图6)

-设置图片的宽度和高度。

-需要将app.wxss修改为

wyao:微信小程序入门三:豆瓣电影实战(图7)

-分类部分

- wxml页面代码

wyao:微信小程序入门三:豆瓣电影实战(图8)

- wxss代码

wyao:微信小程序入门三:豆瓣电影实战(图9)

详细信息页面

页面跳转

-从纸板页面跳转到列表页面

-使用导航选项卡

导航器url='./list/list?type=in _ theaters ' hover-class=' none '

-悬停-class=' node '取消点击高亮效果。

- ?Type=in _ theater传递参数

-如何在页面之间传递值

-问号参数类似于web开发的方式

-您跳转到的页面是通过onLoad方法的参数(params)获得的。

wyao:微信小程序入门三:豆瓣电影实战(图10)

- url='./list/list?Type=in _ theater title=AAAA ',可以传递多个参数并在中间使用;

- js代码

wyao:微信小程序入门三:豆瓣电影实战(图11)

- wxml代码

wyao:微信小程序入门三:豆瓣电影实战(图12)

-款式暂时没有增加。

更多资讯
游戏推荐
更多+