当前位置:   article > 正文

微信小程序----一个简单的电影小程序_观影微信小程序源码

观影微信小程序源码

最终界面:

 

电影小程序

首先一共有这些包

 

app.jion中代码:

  1. {
  2. "pages": [
  3. "pages/index/index",
  4. "pages/logs/logs",
  5. "pages/geren/geren",
  6. "pages/xqy/xqy"
  7. ],
  8. "window": {
  9. "backgroundTextStyle": "light",
  10. "navigationBarBackgroundColor": "#fff",
  11. "navigationBarTitleText": "Weixin",
  12. "navigationBarTextStyle": "black"
  13. },
  14. "tabBar": {
  15. "color": "#999999",
  16. "selectedColor": "#f00000",
  17. "backgroundColor": "#efefef",
  18. "borderStyle": "black",
  19. "position": "bottom",
  20. "list": [
  21. {
  22. "pagePath": "pages/index/index",
  23. "text": "首页",
  24. "iconPath": "pages/images/shouye.png",
  25. "selectedIconPath": "pages/images/shouye_selected.png"
  26. },
  27. {
  28. "pagePath": "pages/geren/geren",
  29. "text": "个人",
  30. "iconPath": "pages/images/wode.png",
  31. "selectedIconPath": "pages/images/wode_selected.png"
  32. }
  33. ]
  34. },
  35. "style": "v2",
  36. "sitemapLocation": "sitemap.json"
  37. }

第二步:我们来写第一个界面index

index.json

  1. {
  2. "usingComponents": {},
  3. "navigationBarTitleText": "小栋电影"
  4. }

它实现的是

 

 index.wxml

这段代码展示了一个电影推荐的小程序页面。页面上有一个顶部的搜索框,可以搜索电影;接下来是一个轮播图展示电影宣传图;然后是三个横向滚动展示电影的区域,每个区域都有电影海报和电影评分等信息;最后是三个横向滚动展示电视剧的区域,同样包括电视剧海报和电视剧评分等信息。

  1. <!--index.wxml-->
  2. <view class="box">
  3. <view class="box1">
  4. <input placeholder="请输入搜索内容" bindinput="getinput" value="{{val}}"> </input>
  5. <icon type="search" wx:if="{{isSearch}}"></icon>
  6. <icon type="clear" wx:if="{{isClear}}" bindtap="cleartap"></icon>
  7. </view>
  8. </view>
  9. <swiper style="width: 100%;height: 250px;"
  10. indicator-dots="true"
  11. indicator-active-color="green"
  12. autoplay="true"
  13. interval="3000"
  14. >
  15. <view>
  16. <swiper-item>
  17. <image src="/pages/images/p2561542272.jpg" mode="scaleToFill"
  18. style="width: 100%;"></image>
  19. </swiper-item>
  20. <swiper-item>
  21. <image src="/pages/images/p2563630521.jpg" mode="scaleToFill"
  22. style="width: 100%;"></image>
  23. </swiper-item>
  24. <swiper-item>
  25. <image src="/pages/images/p2563815623.jpg"
  26. mode="scaleToFill"
  27. style="width: 100%;"></image>
  28. </swiper-item>
  29. <swiper-item>
  30. <image src="/pages/images/p2564461744.jpg"
  31. mode="scaleToFill"
  32. style="width: 100%;"></image>
  33. </swiper-item>
  34. <swiper-item>
  35. <image src="/pages/images/p2566170919.jpg"
  36. mode="scaleToFill"
  37. style="width: 100%;"></image>
  38. </swiper-item>
  39. <swiper-item>
  40. <image src="/pages/images/p2566598269.jpg"
  41. mode="scaleToFill"
  42. style="width: 100%;"></image>
  43. </swiper-item>
  44. <swiper-item>
  45. <image src="/pages/images/p2567841004.jpg"
  46. mode="scaleToFill"
  47. style="width: 100%;"></image>
  48. </swiper-item>
  49. </view>
  50. </swiper>
  51. <view class="one">
  52. <text >影院热映</text>
  53. </view>
  54. <view class="two">
  55. <text>查看更多></text>
  56. </view>
  57. <scroll-view class="scroll-box" scroll-x="true"
  58. enable-flex="true">
  59. <view class="item">
  60. <navigator url="/pages/xqy/xqy">
  61. <image src="/pages/images/p2567841004.jpg"
  62. mode="" />
  63. </navigator>
  64. <text>罗小黑战记</text>
  65. <view class="star">
  66. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  67. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  68. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  69. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  70. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  71. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  72. <text style="font-size: 10px; color: gray;" >8.4</text>
  73. </view>
  74. </view>
  75. <view class="item">
  76. <image src="/pages/images/p2566598269.jpg"
  77. mode="" />
  78. <text>徒手攀岩</text>
  79. <view class="star">
  80. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  81. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  82. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  83. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  84. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  85. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  86. <text style="font-size: 10px; color: gray;" >9</text>
  87. </view>
  88. </view>
  89. <view class="item">
  90. <image src="/pages/images/p2566170919.jpg"
  91. mode="" />
  92. <text>检查方的罪人</text>
  93. <view class="star">
  94. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  95. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  96. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  97. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  98. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  99. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  100. <text style="font-size: 10px; color: gray;" >7.2</text>
  101. </view>
  102. </view>
  103. <view class="item">
  104. <image src="/pages/images/p2563815623.jpg"
  105. mode="" />
  106. <text>哪吒</text>
  107. <view class="star">
  108. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  109. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  110. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  111. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  112. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  113. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  114. <text style="font-size: 10px; color: gray;" >9.9</text>
  115. </view>
  116. </view>
  117. <view class="item">
  118. <navigator url="/pages/xqy/xqy">
  119. <image src="/pages/images/p2561542272.jpg"
  120. mode="" />
  121. </navigator>
  122. <text>速度与激情</text>
  123. <view class="star">
  124. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  125. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  126. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  127. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  128. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  129. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  130. <text style="font-size: 10px; color: gray;" >9.3</text>
  131. </view>
  132. </view>
  133. </scroll-view>
  134. <view class="one">
  135. <text >热门电影</text>
  136. </view>
  137. <view class="two">
  138. <text>查看更多></text>
  139. </view>
  140. <scroll-view class="scroll-box" scroll-x="true"
  141. enable-flex="true">
  142. <view class="item">
  143. <navigator url="/pages/xqy/xqy">
  144. <image src="/pages/images/p2567841004.jpg"
  145. mode="" />
  146. </navigator>
  147. <text>罗小黑战记</text>
  148. <view class="star">
  149. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  150. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  151. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  152. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  153. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  154. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  155. <text style="font-size: 10px; color: gray;" >8.4</text>
  156. </view>
  157. </view>
  158. <view class="item">
  159. <image src="/pages/images/p2566598269.jpg"
  160. mode="" />
  161. <text>徒手攀岩</text>
  162. <view class="star">
  163. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  164. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  165. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  166. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  167. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  168. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  169. <text style="font-size: 10px; color: gray;" >9</text>
  170. </view>
  171. </view>
  172. <view class="item">
  173. <image src="/pages/images/p2566170919.jpg"
  174. mode="" />
  175. <text>检查方的罪人</text>
  176. <view class="star">
  177. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  178. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  179. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  180. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  181. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  182. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  183. <text style="font-size: 10px; color: gray;" >7.2</text>
  184. </view>
  185. </view>
  186. <view class="item">
  187. <image src="/pages/images/p2563815623.jpg"
  188. mode="" />
  189. <text>哪吒</text>
  190. <view class="star">
  191. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  192. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  193. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  194. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  195. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  196. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  197. <text style="font-size: 10px; color: gray;" >9.9</text>
  198. </view>
  199. </view>
  200. <view class="item">
  201. <navigator url="/pages/xqy/xqy">
  202. <image src="/pages/images/p2561542272.jpg"
  203. mode="" />
  204. </navigator>
  205. <text>速度与激情</text>
  206. <view class="star">
  207. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  208. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  209. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  210. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  211. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  212. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  213. <text style="font-size: 10px; color: gray;" >9.3</text>
  214. </view>
  215. </view>
  216. </scroll-view>
  217. <view class="one">
  218. <text >热门电视剧</text>
  219. </view>
  220. <view class="two">
  221. <text>查看更多></text>
  222. </view>
  223. <scroll-view class="scroll-box" scroll-x="true"
  224. enable-flex="true">
  225. <view class="item">
  226. <navigator url="/pages/xqy/xqy">
  227. <image src="/pages/images/p2567841004.jpg"
  228. mode="" />
  229. </navigator>
  230. <text>罗小黑战记</text>
  231. <view class="star">
  232. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  233. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  234. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  235. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  236. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  237. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  238. <text style="font-size: 10px; color: gray;" >8.4</text>
  239. </view>
  240. </view>
  241. <view class="item">
  242. <image src="/pages/images/p2566598269.jpg"
  243. mode="" />
  244. <text>徒手攀岩</text>
  245. <view class="star">
  246. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  247. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  248. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  249. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  250. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  251. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  252. <text style="font-size: 10px; color: gray;" >9</text>
  253. </view>
  254. </view>
  255. <view class="item">
  256. <image src="/pages/images/p2566170919.jpg"
  257. mode="" />
  258. <text>检查方的罪人</text>
  259. <view class="star">
  260. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  261. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  262. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  263. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  264. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  265. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  266. <text style="font-size: 10px; color: gray;" >7.2</text>
  267. </view>
  268. </view>
  269. <view class="item">
  270. <image src="/pages/images/p2563815623.jpg"
  271. mode="" />
  272. <text>哪吒</text>
  273. <view class="star">
  274. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  275. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  276. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  277. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  278. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  279. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  280. <text style="font-size: 10px; color: gray;" >9.9</text>
  281. </view>
  282. </view>
  283. <view class="item">
  284. <navigator url="/pages/xqy/xqy">
  285. <image src="/pages/images/p2561542272.jpg"
  286. mode="" />
  287. </navigator>
  288. <text>速度与激情</text>
  289. <view class="star">
  290. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  291. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  292. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  293. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  294. <image src="/pages/images/statlight.png" style="width: 12px;height: 12px;" mode="" />
  295. <image src="/pages/images/star.png" style="width: 12px;height: 12px;" mode="" />
  296. <text style="font-size: 10px; color: gray;" >9.3</text>
  297. </view>
  298. </view>
  299. </scroll-view>

 

个人界面:

geren.wxml:

  1. <!--pages/geren/geren.wxml-->
  2. <text style="font-size: 20px;font-weight: 700;line-height: 40px;">城市</text>
  3. <view class="box1">
  4. <input placeholder="请输入你的居住城市"></input>
  5. </view>
  6. <view class="box2">
  7. </view>
  8. <text style="font-size: 20px;font-weight: 700;line-height: 40px;"></text>
  9. <view class="box1">
  10. <input placeholder="请输入你的省份"></input>
  11. </view>
  12. <view class="box2">
  13. </view>
  14. <text style="font-size: 20px;font-weight: 700;line-height: 40px;">国家</text>
  15. <view class="box1">
  16. <input placeholder="请输入你的国家"></input>
  17. </view>
  18. <view class="box2">
  19. </view>
  20. <text style="font-size: 20px;font-weight: 700;line-height: 40px;">性别</text>
  21. <view class="box1">
  22. <input placeholder="请输入你的性别"></input>
  23. </view>
  24. <view class="box2">
  25. </view>

 

geren.json

  1. {
  2. "usingComponents": {},
  3. "navigationBarTitleText": "个人界面"
  4. }

 接下来点击图片会进入详情页,一下写出一个关于速度与激情的详情页:

xqy.json

  1. {
  2. "usingComponents": {},
  3. "navigationBarTitleText": "详情页"
  4. }

xqy.wxml

  1. <!--pages/xqy/xqy.wxml-->
  2. <view class="box1">
  3. <image src="/pages/images/p2561542272.jpg" style="width: 150px;height: 220px;" mode="scaleToFill"></image>
  4. <view class="box2">
  5. <text style="font-size: 34px;font-weight: 700;">速度与激情</text>
  6. <view class="box3">
  7. <text style="font-size: 16px;color: gray;">纪录片/美国/片长100分钟</text>
  8. </view>
  9. <view class="star">
  10. <image src="/pages/images/statlight.png" style="width: 20px;height: 20px;" mode="" />
  11. <image src="/pages/images/statlight.png" style="width: 20px;height: 20px;" mode="" />
  12. <image src="/pages/images/statlight.png" style="width: 20px;height: 20px;" mode="" />
  13. <image src="/pages/images/statlight.png" style="width: 20px;height: 20px;" mode="" />
  14. <image src="/pages/images/statlight.png" style="width: 20px;height: 20px;" mode="" />
  15. <image src="/pages/images/star.png" style="width: 20px;height: 20px;" mode="" />
  16. <text style="font-size: 30px; color: gray;" >9.3分</text>
  17. </view>
  18. </view>
  19. </view>
  20. <view class="box4">
  21. <text style="font-size: 25px;font-weight: 700;">简介</text>
  22. </view>
  23. <view class="box4">
  24. <text>一个是美国外交安全局的忠诚特工、身材魁梧的执法者霍布斯(强森饰),一个是前英国军事特工精英、无法无天的恶棍肖(斯坦森饰)。在201.. </text>
  25. </view>
  26. <view class="box5">
  27. <text style="font-size: 25px;font-weight: 700;">演员</text>
  28. </view>
  29. <scroll-view class="scroll-box" scroll-x="true"
  30. enable-flex="true">
  31. <view class="item">
  32. <image src="/pages/images/dawei.jpg"></image>
  33. <text>大卫·雷奇</text>
  34. <view>
  35. <text style="font-size: 15px; color: gray;">导演</text>
  36. </view>
  37. </view>
  38. <view class="item">
  39. <image src="/pages/images/qiangseng.jpg"></image>
  40. <text>道恩·强森</text>
  41. <view>
  42. <text style="font-size: 15px; color: gray;">饰 卢克·霍布斯 Luke Hobbs</text>
  43. </view>
  44. </view>
  45. <view class="item">
  46. <image src="/pages/images/jieseng.jpg"></image>
  47. <text>杰森·斯坦森</text>
  48. <view>
  49. <text style="font-size: 15px; color: gray;">饰 德卡·肖 Deckard Shaw</text>
  50. </view>
  51. </view>
  52. <view class="item">
  53. <image src="/pages/images/aierba.jpg"></image>
  54. <text>伊德里斯·艾尔巴</text>
  55. <view>
  56. <text style="font-size: 15px; color: gray;">饰 布雷克斯顿 Brixton</text>
  57. </view>
  58. </view>
  59. <view class="item">
  60. <image src="/pages/images/fannisha.jpg"></image>
  61. <text>凡妮莎·柯比 </text>
  62. <view>
  63. <text style="font-size: 15px; color: gray;">饰 哈蒂·肖 Hattie Shaw</text>
  64. </view>
  65. </view>
  66. </scroll-view>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/代码探险家/article/detail/789688
推荐阅读
相关标签
  

闽ICP备14008679号