菜鸡教程（1）：简易游戏每周推荐小程序制作

写在前面：

1. 阅读本文最好具备一定html+css+js基础,并已成功注册微信小程序,成功下载了开发工具
2.菜鸡菜笔，如有不正，还请大佬们不吝惜赐教

接下来开始小程序的制作

1.首先需下载小程序所需图片

2.hello world（万物的起源）
(1).创建images文件存储小程序所需图片
(2).创建pages目录，并创建相应的js，json，wxss文件
(3).在pages目录下创建about目录及其相应的js，json，wxml，wxss文件
(4).编写pages/json文件，加入代码

{"pages":["pages/about/about"]}

(5).about/about.js文件中加入代码Page({})
(6).about/about.json文件中加入代码{}
(7).about/about.wxml中加入代码<text>hello world</text>
(8).以下为该步骤效果图

3.全局导航栏样式配置,每个界面文字配置
(1).app.json内加入如下代码（全局样式）

"window":  {"enablePullDownRefresh":  true,"navigationBarBackgroundColor":  "white","navigationBarTextStyle":  "black"}

(2).about/about.json内加入如下代码(导航栏文字)

"navigationBarBackgroundColor":  "#fff","navigationBarTitleText":  "关于","navigationBarTextStyle":  "black","enablePullDownRefresh":  true

4.首页代码实现

<view  class='container'><image  src="/images/CAFA130596A4C3FC8A022F695FE0CB0D.jpg"  class='img'>image><text>游戏周周看text><navigator  style="font-size:60rpx;font-weight:bold;display:inlines;"  url='/pages/weekly/weekly'  nav-class='nav-hover'>每周佳游推荐navigator><text>我de邮箱：1347563786@qq.comtext>view>

该步骤效果图如下

5.首页样式设置

.container{background-color: #eee;height:  100vh;display:  flex;flex-direction:  column;align-items:  center;justify-content:  space-around;}.img{width:  375rpx;height:  375rpx;border-radius:  100%;}.nav-hover{color:  green;}

tips:样式配置使用了微信特有的弹性盒子模型，相对于普通的css文件简便很多，若需详细了解请参见官方文档

该步骤代码效果图如下

6.“每周佳游推荐”页面的创建以及与主界面的链接
(1).在pages目录下创建weekly目录并且创建相应的js，json，wxml，wxss文件;
(2).weekly/weekly.js文件内输入代码Page({});
(3).weekly/weekly.json文件内输入

{"navigationBarBackgroundColor":  "#fff","navigationBarTitleText":  "本周推荐","navigationBarTextStyle":  "black","enablePullDownRefresh":  true}

(4).app.json中配置weekly页面：
在pages/app.json文件加入代码"pages/weekly/weekly"
配置完成后即可通过主页“每周佳游推荐”按钮进入weekly页面

该步骤效果图如下：

7.weekly页面内容的编写
(1).根据about页面内容配置出weekly页面基本内容，效果图如下：

(2).配置页面的基本格式构架（弹性盒子）：
对游戏名进行美容：style="font-weight:bold;font-size:20px"
对游戏小评进行美容：style="font-weight:lighter;font-size:10px;"
对整体页面美容：在weekly.wxss内导入弹性盒子布局

.container{height:  100vh;background-color: #fff;display:  flex;flex-direction:  column;justify-content:  space-around;align-items:  center;position:  relative;}

美化后页面效果图：

（顺眼了很多hhh）
(3).知识拓展：微信小程序中的数据绑定
以上，我们做出了一个简单页面跳转效果，但显然，作为一个微信小程序，这些是不够的，我们还得推荐更多的东西，并能够很方便地对数据进行更新维护才行
所以，数据绑定就出现了，它能够帮助我们方便的对数据进行更新并在小程序内更简洁的添加更多自己想要加入的东西
以下，为数据绑定的实现步骤：
a.在weekly.js的Page（{}）内加入代码

data:  {imgpath:  "/images/2.jpg",name:  "阴阳师",gamesum:  "网易和风匠心巨制，开启唯美奇幻之旅",ishighlyrecommended:  "true"}

b.将对应的游戏名，图片链接，游戏小评改为对应的绑定名格式{{…}}，到此，基础的数据绑定已经实现
效果图如下：

（数据绑定由于过于抽象，希望初学者能够翻阅官方文档或者相应视频教程进行学习了解）

至此，我们能通过js文件对每周的数据进行更新，那假如一周想推荐两部甚至三部电影呢？

8.weekly页面的升级
(1).实现每周三个游戏的推荐
a.基本原理讲解：在数据绑定的基础上将js文件中的数据定义为一个数组，使用wx：for来对其进行数据输出（详细使用方法请参照官方文档，本文只提供基本原理及实现代码）
b.代码实现：在weekly.js页面中定义数组（顺便加入笔者评分功能，使用wx：if），代码为：

Page({data:  {ThisWeekGame:  [{imgpath:  "/images/2.jpg",name:  "阴阳师",gamesum:  "网易和风匠心巨制，开启唯美奇幻之旅",ishighlyrecommended:  "true"},{imgpath:  "/images/5.jpg",name:  "Chaos Ring 3",gamesum:  "使人泪腺崩塌的手游rpg精作！",ishighlyrecommended:  "true"},{imgpath:  "/images/7.jpg",name:  "Fate/Grand Order",gamesum:  "遵从召唤而来，汝是吾的master吗",ishighlyrecommended:  false}],}})

在weekly.wxml页面将代码更改为：

<view  class='container'><text> ----------------本周佳游推荐----------------text><view  wx:for="{{ThisWeekGame}}"><view  class='container'  ><image  src="{{item.imgpath}}"  class='img'>image><text  style="font-weight:bold;font-size:20px">{{item.name}}text><text  style="font-weight:lighter;font-size:10px;">{{item.gamesum}}text><text  wx:if="{{item.ishighlyrecommended}}"  style="font-weight:bold;"  class='font-color'>五星推荐text><text  wx:if="{{!item.ishighlyrecommended}}"  style="font-weight:bold;"  class='font-color'>值得一玩text>view>view>view>

以循环的方式输出js文件中的数组
至此，即可通过下拉来查看三个游戏推荐，效果图如下：

9.weekly页面升级后不够美观？swiper组件的引用！
swiper：滑块视图容器，可通过该组件将三个页面以滑动方式来呈现，提高页面美观性
下面是代码实现：
a.weekly.wxml文件内将代码修改为：

<view  class=''><text> ----------------本周佳游推荐----------------text><swiper  indicator-dots='{{true}}'  class='game-swiper'><swiper-item  class='game'  wx:for="{{ThisWeekGame}}"><view  class='container game-card'  bindtap='f1'  ><image  src="{{item.imgpath}}"  class=''>image><text  style="font-weight:bold;font-size:20px">{{item.name}} text><text  style="font-weight:lighter;font-size:10px;"> {{item.gamesum}}text><text  wx:if="{{item.ishighlyrecommended}}"  style="font-weight:bold;"  class='font-color'>五星推荐text><text  wx:if="{{!item.ishighlyrecommended}}"  style="font-weight:bold;"  class='font-color'>值得一玩text>view>swiper-item>swiper>view>

b.weekly.wxss文件内将代码修改为：

.container{height:  100vh;background-color: #fff;display:  flex;flex-direction:  column;justify-content:  space-around;align-items:  center;position:  relative;}.game-image{width:  200rpx;height:  200rpx;}.game{display:  flex;}.game-details{display:  flex;flex-direction:  column;}.font-color{color:aqua;}.game-swiper{height:  95vh;}.return-button{position:  absolute;right:  0;top:40rpx;}.game-card{height:  100%;width:  100%;}

效果图如下：

至此，一个简单的游戏每周推荐小程序制作完成。读者可直接复制最后的代码来完成该小程序，也可以一步一步的学习，来帮助自己获得进步。

下篇文章笔者会加入文章详情页来完善该小程序，敬请期待！@TOC