菜鸡教程:简易游戏每周推荐小程序制作

写在前面:

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


接下来开始小程序的制作

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

9ba33d092a044bc3bad79056d2eeb09b_7.jpg

133c7ebb20154037b94893f6fe9ec9eb_5.jpg

c117baf2b94141f982fc624ee79f9a9f_CAFA130596A4C3FC8A022F695FE0CB0D.jpg

  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). 以下为该步骤效果图
550a2e9ca7204fd5980015773b664633_image.png

  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>

该步骤效果图如下

e6d40f515fee4213a6750d150791ab5f_image.png

  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 文件简便很多,若需详细了解请参见官方文档

该步骤代码效果图如下
2246153d0c3b4daa8747658b486103ed_image.png

  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 页面

该步骤效果图如下:
d4e038b43f4c4d7c8f34e2a602a82317_image.png

  7.weekly 页面内容的编写
    (1). 根据 about 页面内容配置出 weekly 页面基本内容,效果图如下:
82c048b3bf5541aebf78214b79e75f6c_image.png

      
    (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;

}

      美化后页面效果图:
79b66e8c737f4a05a444e530048ca92c_image.png

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

data:  {

imgpath:  "/images/2.jpg",

name:  "阴阳师",

gamesum:  "网易和风匠心巨制,开启唯美奇幻之旅",

ishighlyrecommended:  "true"

}

      b. 将对应的游戏名,图片链接,游戏小评改为对应的绑定名格式 {{…}},到此,基础的数据绑定已经实现
      效果图如下:
17bdc7f82b7246a2a265f10e2b6329dd_image.png
(数据绑定由于过于抽象,希望初学者能够翻阅官方文档或者相应视频教程进行学习了解)

至此,我们能通过 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 文件中的数组
      至此,即可通过下拉来查看三个游戏推荐,效果图如下:
b6e0d4e1eb6c450595bb21a08c0c9151_image.png

    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%;

}

      效果图如下:
034b95deb9224f3f8f0a44db3f4641b5_image.png

6fd238984a0d476d8912b033ea0a4ea7_image.png

ee11e5017820435a8cf9c63b146ed9fe_image.png

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

   下篇文章笔者会加入文章详情页来完善该小程序,敬请期待!