微信小程序——【百景游戏小攻略】

本次课程小项目中的图片以及文章还未获得授权！请勿商用！未经授权，请勿转载！

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	1.编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2.熟悉git代码管理流程，将源代码上传到到 3.github在博客园班级中写一篇相应的博文
作业源代码	https://github.com/LittleFox99/software-engineering
学号	31801128
院系	浙大城市学院计算机专业
班级姓名	计算1803 陈可盈

微信小程序——【百景游戏小攻略】

1.前言

因为作业目标中提到可以学习别人的小程序进行修改，所以就去github上找微信小程序的开源项目，一些项目无法运行，一些项目整体结构十分完整且数据存放在云盘上对初学者不太友好。所以最终还是决定自己创一个小的项目，合并与修改一些小组件。（项目中翻牌小游戏是我进行修改的他人项目，目的是使小程序更为完整以及趣味化，同时为后续的认知模型的大作业作准备）
暑假开始，在玩一个休闲游戏，收集了一部分的攻略文章还有图片素材，就打算做一个游戏的小攻略程序。

2.项目展示

2.1界面展示

首页
- 小攻略
首页-小攻略

首页-人物图鉴

翻牌小游戏

翻牌小游戏

布局(举例两个)

布局

2.2目录结构

├── app.js

├── app.json

├── app.wxss

├── components

├── data

│   ├── gonglue.js

│   ├── gonglue.json

│   ├── gonglue.wxml

│   └── gonglue.wxss

├── images

│   ├── b-1.JPG

│   ├── b-2.JPG

│   ├── b-3.JPG

│   ...

│   └── yt-4.JPG

├── pages

│   ├── detail

│   │   ├── article.js

│   │   ├── article.json

│   │   ├── article.wxml

│   │   └── article.wxss

│   ├── game

│   │   ├── game.js

│   │   ├── game.json

│   │   ├── game.wxml

│   │   └── game.wxss

│   ├── game-index

│   │   ├── gama-index.js

│   │   ├── gama-index.json

│   │   ├── gama-index.wxml

│   │   └── gama-index.wxss

│   ├── index

│   │   ├── index.js

│   │   ├── index.json

│   │   ├── index.wxml

│   │   ├── index.wxss

│   │   └── pc

│   │       ├── person.js

│   │       ├── person.json

│   │       ├── person.wxml

│   │       └── person.wxss

│   ├── logs

│   │   ├── logs.js

│   │   ├── logs.json

│   │   ├── logs.wxml

│   │   └── logs.wxss

│   └── tujian

│       ├── tujian.js

│       ├── tujian.json

│       ├── tujian.wxml

│       └── tujian.wxss

├── project.config.json

├── sitemap.json

└── utils

    └── util.js

data
- 存放攻略的具体数据（该项目写的比较简陋，数据收集较少，所以一些数据直接写在页面里，建议之后将其他页面的数据一起存放在data中）
images
- 存放该项目的所有图片素材
pages
- detail——攻略文章页面
- game——游戏页面
- game-index——游戏的首页
- index——首页
  - pc——人物图鉴的页面
- tujian——布局

3.代码学习之路

3.1布局

3.1.1轮播图

轮播图的wxml文件中轮播图模块我将图片全部列出来，其实只要写个循环

 <view class="lunbo-section">

    <swiper class='lunbo' indicator-dots='true' autoplay='true' interval='4000'>

       <swiper-item> <image src='/images/lunbo-1.JPG'></image> </swiper-item>

       <swiper-item> <image src='/images/lunbo-2.JPG'></image></swiper-item>

       <swiper-item> <image src='/images/lunbo-3.JPG'></image> </swiper-item>

       <swiper-item> <image src='/images/lunbo-4.JPG'></image> </swiper-item>

       <swiper-item> <image src='/images/lunbo-5.JPG'></image> </swiper-item>

    </swiper>

  </view>

{{}}是数据，它绑定使用 Mustache 语法（双大括号）将变量包起来.因为数据较少，轮播图的wxml文件中轮播图模块我将图片全部列出来，其实只要写个循环将图片源载入即可，比如：

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

	<block wx:for="{{imgUrl}}">

		<swiper-item>

			<image src="{{item}}" class="slide-image" />

		</swiper-item>

	</block>

</swiper>

使用了滑块视图容器swiper，在页面的js中自己写函数设置swiper的属性或者在wxml设置直接设置属性

data{

		background: ['demo-text-1', 'demo-text-2', 'demo-text-3','demo-text-4','demo-text-5'],

    indicatorDots: true,

      ...

    autoplay: false,

    interval: 2000,

    duration: 500,

      ...

},

...

属性	说明
indicator-dots	是否显示面板指示点
autoplay	是否自动切换
interval	自动切换时间间隔
duration	滑动动画时长

3.1.2选项卡

给页面赋值index，给view(tab)设置一个点击事件bindtap，并且给view(tab)一个data-index索引，根据页面的index来改变tab的状态并决定swiper显示不同页面的内容。

<view class='topTabSwiper'>

    <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>

      <image src='/images/im-2.JPG'></image>

      <text>

        小攻略</text>

    </view>

    <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>

      <image src='/images/im-3.JPG'></image>

      <text>

        人物图鉴</text>

    </view>

</view>

//点击切换，滑块index赋值

  checkCurrent:function(e){

    const that = this;

    if (that.data.currentData === e.target.dataset.current){

        return false;

    }else{

      that.setData({

        currentData: e.target.dataset.current

      })

    }

  }

3.1.3图片列表

以布局页面举例

列表渲染：官方解释——在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。用<block/>，渲染一个包含多节点的结构块。
这里学习了社区的代码片段，在使图片列表完整显示的时候使用的是scoll-view，比较简单的实现页面下拉，但查询微信开发文档时，官方给了一些小tip（比如：在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh 以及若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部），所以代码还有待优化。

<swiper-item style="overflow: scroll;">

				<scroll-view scroll-y refresher-enabled refresher-background="#F6F7F8" refresher-triggered="{{isRefresh}}"  bindrefresherrefresh="refresherpulling" bindscrolltolower="handleTolower">

					<view class="swiper-item">

            <block wx:for="{{item.bjList}}">

              <view class="post-container">

                <image src="{{item.imgSrc}}" class="post-img"></image>

                <text class="post-title">{{item.title}}</text>

              </view>

            </block>

          </view>

					<view class="swiper-item">到底了～～图片均未获得授权</view>

				</scroll-view>

</swiper-item>

handleTolower(e){

    wx.showToast({

      title: '到底啦！'

    })

  },

  refresherpulling() {

    wx.showLoading({

      title: '刷新中'

    })

    setTimeout(() => {

      this.setData({

        isRefresh: false

      })

      wx.showToast({

        title: '加载完成'

      })

    }, 2000)

  }

3.2页面跳转

跳转页面的父页面
- e是事件对象，可以携带额外信息，currentTarget是事件触发的当前事件（注：与Target之间的区别，可自行查阅资料），dataset是当前组件上由data-开头的自定义属性组成的集合。
- 我们在需要点击跳转的模块绑定跳转函数 goDetailArticle(e)，自定义了自定义属性组成的集合data-id，对应跳转数据中的id属性，实现跳转。这里要非常重要，可以打印一下数据 console.log()，查看是否接受到数据了，刚开始e.currentTarget.dataset拿不到数据，我自己debug了很久，查阅资料发现重点：以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType。
- wx.navigateTo带参数的页面跳转，跳转之后并且自带返回箭头，个人理解，比较适用于有列表渲染的idx的模块。wx.switchTab 跳转到tab页。

goDetailArticle(e) {

    var postId = e.currentTarget.dataset.postid;

    console.log(e);

    console.log(postId);

    wx.navigateTo({

     url: '../detail/article?id='+postId

    })

   }

<view class="post-container" bindtap="goDetailArticle" data-postid="{{item.postid}}">

          <view class="post-author-date">

            <image src="{{item.avatar}}" class="post-author"></image>

            <text class="post-date">{{item.date}}</text>

           </view>

          <text class="post-title">{{item.title}}</text>

          <image src="{{item.imgSrc}}" class="post-img"></image>

          <text class="post-content">{{item.content}}</text>

</view>

被跳转的界面接受数据。

onLoad:function(options){

      var postId=options.id;

    this.data.postId = postId;

    var data = postsData.glList[postId];//根据数据集合中自定义的id属性于数据的idx相同，实现获取具体的数据。

    this.setData({...data});//发送数据到data中

      console.log(postsData);

      console.log(options);

    }

3.3静态数据

var local_database = [

  {

    date:"07月29日 2020年",

    title:"【保姆级·「驿站探险」·快速通关攻略】",

    imgSrc:"/images/yizhan.JPG",

    avatar:"/images/t1.JPG",

    content:"牡丹亭的主线和副线我都快快做完了，分享一下心得。方便新手们参考。但我几乎算0氪玩家，用的人也比较非，一定还有更好更快的办法。",

    author:"东西研究所",

    postid: 0,

    detail:"选人冒险属性高的（这个应该不用说吧）。去驿站出发前选人会显示体力的，挑体力高的人去，一次可以做多点任务。还要看人物天赋。我一开始抽到的人没什么厉害的，前期都在用卿级的冯梦龙，他算是卿级属性最好的。然后还有阿朵，自带天赋是摘花砍树都可以省体力，遇到那种-15的牡丹花之类的，相当于省一半体力了。但阿朵属性比较低，可以带珍宝配加属性。后来一些可以用的就是徐霞客（体力多，容易抽到）、王昭君（属性高，省粮草）、汪直、常遇春。别的冒险属性高的我没抽到。反正数值大家自己看，选体力多的就对了！还是体力，三白酒可以补50体力。每天在客栈可以领三次（10:00、16:00、21:00）。还有就是土行孙那里也能拿到。省去看广告的时间。地图上会有小泉水，发光的，不用仔细找也能看到。一次补50体力。同理还有摇钱树，也是发光的，点了能有铜钱（似乎耗费5体力）。反正大家地图上看到什么奇怪东西，又不用花什么体力都可以点一下。"

  },

  ......

]

var mydata="jiangbai";

module.exports = {

  glList: local_database,

  jiangbai:mydata

}

3.4游戏逻辑

项目中翻牌小游戏是他人项目，目的是使小程序更为完整以及趣味化，同时学习其中的游戏逻辑，为后续的认知模型的大作业作准备。具体代码以及注释可看github上的项目。以下是我自己对这个小程序的一点理解

/*开始游戏*/

startGame: function ()

{

  /*打乱牌堆,首先是选出参与游戏的牌，然后打乱*/

  var tmp = this.data.allCard.sort(

    .....

  );

 	/*设置卡片的state，游戏刚开始时露出所有牌的正面，而后迅速变成背面*/

  setTimeout(function () {

     // 所有的牌翻到背面

     // 开始计时了才让点

     // 游戏开始计时

}

/*二维数组设定卡牌位置，通过获取坐标，检测是翻过来的第几张牌，通过卡牌的state来看玩家是否完成配对*/

onTap: function (event){

  //1.牌翻过来，没有完成配对，修改卡牌的状态

  //2.牌翻过来，完成配对，修改卡牌的状态，页面显示改变

  //3.检查是否所有牌都已经翻过来,都已翻过来提示游戏结束

}

4.总结

4.1收获

小程序的新手入门，因为小程序的开发比较类似web，也算是复习了web前端的一点知识。从刚开始下载github上一些demo的一脸茫然，到现在已经可以开始着手自己写一个微信小程序的代码片段，并最后可以组成一个不太完整比较粗糙的小程序。之前不怎么喜欢看官方的开发文档，比较喜欢直接搜索或找demo学习，现在发现官方的开发文档才是最重要的最规范的。

4.2困难

刚开始看不懂github上一些项目非常完整的代码，找不到他们的数据在哪，后来才知道他们将数据放在服务器上。写代码的日常是页面接受不到数据，需要一直找bug，以及web的知识忘记了不少，布局上经常出现问题。微信组件也非常不熟悉，代码能力跟不上想法，不停地看博客教程和官方的开发文档。

4.3优化

使用的是静态数据，没有配置域名（没有服务器）而不能进行后台操作
人物图鉴的页面还没有写完整
渲染列表数据多了，容易卡
列表模块可以写成模版，是代码看起来更简洁

。。。。。。

5.参考资料

https://www.cnblogs.com/chenyingying0/archive/2020/03/23/12556083.html

写项目的时候，参考的博客很多，大多已经找不到链接，如有侵权，非常抱歉！

6.本次课程小项目中的图片以及文章还未获得授权！请勿商用！未经授权，请勿转载！