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

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

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

博客班级	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.前言
  • 2.项目展示
    • 2.1界面展示
    • 2.2目录结构
  • 3.代码学习之路
    • 3.1布局
      • 3.1.1轮播图
      • 3.1.2选项卡
      • 3.1.3图片列表
    • 3.2页面跳转
    • 3.3静态数据
    • 3.4游戏逻辑
  • 4.总结
    • 4.1收获
    • 4.2困难
    • 4.3优化
  • 5.参考资料
  • 6.本次课程小项目中的图片以及文章还未获得授权！请勿商用！未经授权，请勿转载！

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.本次课程小项目中的图片以及文章还未获得授权！请勿商用！未经授权，请勿转载！