微信小程序开发(5) 2048游戏

在这篇微信小程序开发教程中，我们将介绍如何使用微信小程序开发2048小游戏。

本文主要分为两个部分，小程序主体部分及小游戏页面部分

一、小程序主体部分

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

1. 小程序逻辑

App({

  onLaunch: function() {

    // Do something initial when launch.

  },

  onShow: function() {

      // Do something when show.

  },

  onHide: function() {

      // Do something when hide.

  },

  globalData: 'I am global data'

})

2. 小程序公共设置

主要注册一个页面，即2048游戏主页

{

  "pages":[

    "pages/index/index"

  ],

  "window":{

    "navigationBarBackgroundColor":"#ffffff",

    "navigationBarTextStyle":"#1AAD16",

    "navigationBarTitleText":"2048游戏",

    "backgroundColor":"#eeeeee",

    "backgroundTextStyle":"light"

  },

  "networkTimeout": {

    "request": 10000,

    "downloadFile": 10000

  },

  "debug": false

}

二、小游戏页面部分

2048游戏小程序页面主要由以下文件组成。

1. 页面结构

其页面结构代码如下

<view class="container">

  <view class="game-body">

    <loading hidden="{{hidden}}">

        加载中...

    </loading>

    <view class="heading">

          <text class="title">2048</text>

          <view class="scores-container">

            <view class="score-container">{{score}}</view>

              <view class="best-container">{{highscore}}</view>

          </view>

    </view>

    <view class="above-game">

          <text class="game-intro">你能拿到2048吗？</text>

          <text class="restart-button" bindtap="restart">新游戏</text>

    </view>

    <view class="game-container">

        <view class="game-message game-{{over ? (win ? 'won' : 'over') : ''}}">

              <text class="over-msg">{{overMsg}}</text>

              <view class="lower">

                <!-- <text class="keep-playing-button">继续</text> -->

                  <text class="retry-button" bindtap="restart">再试一次</text>

            </view>

        </view>

        <view class="grid-container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">

            <view wx:for="{{grids}}" wx:for-index="rowIdx" wx:for-item="row" class="grid-row">

                  <view wx:for="{{row}}" wx:for-index="colIdx" wx:for-item="cell" class="grid-cell">

                      <view class="tile tile-{{cell.value}}">

                          <view wx:if="{{cell}}" class="tile-inner">

                              {{cell.value}}

                          </view>

                      </view>

                  </view>

            </view>

        </view>

      </view>

      <!-- <view class="game-explanation">

      <view class="important">如何开始：</view> 手指上下左右滑动

    </view> -->

</view>

</view>

2. 样式表

样式代码如下所示

.container {

  margin:;

  padding: 20px 0;

  background: #faf8ef;

  color: #776e65;

  font-family: "Helvetica Neue", Arial, sans-serif;

  font-size: 18px;

}

.heading:after {

  content: "";

  display: block;

  clear: both;

}

.title {

  font-size: 80px;

  font-weight: bold;

  margin:;

  display: block;

  float: left;

}

.scores-container {

  float: right;

  text-align: right;

}

.score-container, .best-container {

  position: relative;

  display: inline-block;

  background: #bbada0;

  padding: 15px 25px;

  font-size: 25px;

  height: 25px;

  line-height: 47px;

  font-weight: bold;

  border-radius: 3px;

  color: white;

  text-align: center;

  margin: 8px 0 0 8px;

}

.score-container:after, .best-container:after {

  position: absolute;

  width: 100%;

  top: 10px;

  left:;

  text-transform: uppercase;

  font-size: 13px;

  line-height: 13px;

  text-align: center;

  color: #eee4da;

}

.score-container .score-addition, .best-container .score-addition {

  position: absolute;

  right: 30px;

  color: red;

  font-size: 25px;

  line-height: 25px;

  font-weight: bold;

  color: rgba(119, 110, 101, 0.9);

  z-index:;

}

.score-container:after {

  content: "Score";

}

.best-container:after {

  content: "Best";

}

p {

  margin-top:;

  margin-bottom: 10px;

  line-height: 1.65;

}

a {

  color: #776e65;

  font-weight: bold;

  text-decoration: underline;

  cursor: pointer;

}

strong.important {

  text-transform: uppercase;

}

hr {

  border: none;

  border-bottom: 1px solid #d8d4d0;

  margin-top: 20px;

  margin-bottom: 30px;

}

.game-container {

  margin-top: 40px;

  position: relative;

  padding: 15px;

  cursor: default;

  -webkit-touch-callout: none;

  -ms-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  -ms-touch-action: none;

  touch-action: none;

  background: #bbada0;

  border-radius: 6px;

  width: 500px;

  height: 500px;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

.game-container .game-message {

  /*display: none;*/

  position: absolute;

  top:;

  right:;

  bottom:;

  left:;

  background: rgba(238, 228, 218, 0.5);

  z-index:;

  text-align: center;

}

.game-container .game-message p {

  font-size: 60px;

  font-weight: bold;

  height: 60px;

  line-height: 60px;

  margin-top: 222px;

}

.game-container .game-message .lower {

  display: block;

  margin-top: 59px;

}

.game-container .game-message a {

  display: inline-block;

  background: #8f7a66;

  border-radius: 3px;

  padding: 0 20px;

  text-decoration: none;

  color: #f9f6f2;

  height: 40px;

  line-height: 42px;

  margin-left: 9px;

}

.game-container .game-message .keep-playing-button {

  display: none;

}

.game-container .game-message.game-won {

  background: rgba(237, 194, 46, 0.5);

  color: #f9f6f2;

}

.game-container .game-message.game-won .keep-playing-button {

  display: inline-block;

}

.game-container .game-message.game-won, .game-container .game-message.game-over {

  display: block;

}

.grid-container {

  position: absolute;

  z-index:;

}

.grid-row {

  margin-bottom: 15px;

}

.grid-row:last-child {

  margin-bottom:;

}

.grid-row:after {

  content: "";

  display: block;

  clear: both;

}

.grid-cell {

  width: 106.25px;

  height: 106.25px;

  margin-right: 15px;

  float: left;

  border-radius: 3px;

  background: rgba(238, 228, 218, 0.35);

}

.grid-cell:last-child {

  margin-right:;

}

.tile-container {

  position: absolute;

  z-index:;

}

.tile, .tile .tile-inner {

  width: 107px;

  height: 107px;

  line-height: 107px;

}

.tile.tile-position-1-1 {

  -webkit-transform: translate(0px, 0px);

  -moz-transform: translate(0px, 0px);

  -ms-transform: translate(0px, 0px);

  transform: translate(0px, 0px);

}

.tile.tile-position-1-2 {

  -webkit-transform: translate(0px, 121px);

  -moz-transform: translate(0px, 121px);

  -ms-transform: translate(0px, 121px);

  transform: translate(0px, 121px);

}

.tile.tile-position-1-3 {

  -webkit-transform: translate(0px, 242px);

  -moz-transform: translate(0px, 242px);

  -ms-transform: translate(0px, 242px);

  transform: translate(0px, 242px);

}

.tile.tile-position-1-4 {

  -webkit-transform: translate(0px, 363px);

  -moz-transform: translate(0px, 363px);

  -ms-transform: translate(0px, 363px);

  transform: translate(0px, 363px);

}

.tile.tile-position-2-1 {

  -webkit-transform: translate(121px, 0px);

  -moz-transform: translate(121px, 0px);

  -ms-transform: translate(121px, 0px);

  transform: translate(121px, 0px);

}

.tile.tile-position-2-2 {

  -webkit-transform: translate(121px, 121px);

  -moz-transform: translate(121px, 121px);

  -ms-transform: translate(121px, 121px);

  transform: translate(121px, 121px);

}

.tile.tile-position-2-3 {

  -webkit-transform: translate(121px, 242px);

  -moz-transform: translate(121px, 242px);

  -ms-transform: translate(121px, 242px);

  transform: translate(121px, 242px);

}

.tile.tile-position-2-4 {

  -webkit-transform: translate(121px, 363px);

  -moz-transform: translate(121px, 363px);

  -ms-transform: translate(121px, 363px);

  transform: translate(121px, 363px);

}

.tile.tile-position-3-1 {

  -webkit-transform: translate(242px, 0px);

  -moz-transform: translate(242px, 0px);

  -ms-transform: translate(242px, 0px);

  transform: translate(242px, 0px);

}

.tile.tile-position-3-2 {

  -webkit-transform: translate(242px, 121px);

  -moz-transform: translate(242px, 121px);

  -ms-transform: translate(242px, 121px);

  transform: translate(242px, 121px);

}

.tile.tile-position-3-3 {

  -webkit-transform: translate(242px, 242px);

  -moz-transform: translate(242px, 242px);

  -ms-transform: translate(242px, 242px);

  transform: translate(242px, 242px);

}

.tile.tile-position-3-4 {

  -webkit-transform: translate(242px, 363px);

  -moz-transform: translate(242px, 363px);

  -ms-transform: translate(242px, 363px);

  transform: translate(242px, 363px);

}

.tile.tile-position-4-1 {

  -webkit-transform: translate(363px, 0px);

  -moz-transform: translate(363px, 0px);

  -ms-transform: translate(363px, 0px);

  transform: translate(363px, 0px);

}

.tile.tile-position-4-2 {

  -webkit-transform: translate(363px, 121px);

  -moz-transform: translate(363px, 121px);

  -ms-transform: translate(363px, 121px);

  transform: translate(363px, 121px);

}

.tile.tile-position-4-3 {

  -webkit-transform: translate(363px, 242px);

  -moz-transform: translate(363px, 242px);

  -ms-transform: translate(363px, 242px);

  transform: translate(363px, 242px);

}

.tile.tile-position-4-4 {

  -webkit-transform: translate(363px, 363px);

  -moz-transform: translate(363px, 363px);

  -ms-transform: translate(363px, 363px);

  transform: translate(363px, 363px);

}

.tile {

  position: absolute;

  -webkit-transition: 100ms ease-in-out;

  -moz-transition: 100ms ease-in-out;

  transition: 100ms ease-in-out;

  -webkit-transition-property: -webkit-transform;

  -moz-transition-property: -moz-transform;

  transition-property: transform;

}

.tile .tile-inner {

  border-radius: 3px;

  background: #eee4da;

  text-align: center;

  font-weight: bold;

  z-index:;

  font-size: 55px;

}

.tile.tile-2 .tile-inner {

  background: #eee4da;

  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);

}

.tile.tile-4 .tile-inner {

  background: #ede0c8;

  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);

}

.tile.tile-8 .tile-inner {

  color: #f9f6f2;

  background: #f2b179;

}

.tile.tile-16 .tile-inner {

  color: #f9f6f2;

  background: #f59563;

}

.tile.tile-32 .tile-inner {

  color: #f9f6f2;

  background: #f67c5f;

}

.tile.tile-64 .tile-inner {

  color: #f9f6f2;

  background: #f65e3b;

}

.tile.tile-128 .tile-inner {

  color: #f9f6f2;

  background: #edcf72;

  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);

  font-size: 45px;

}

@media screen and (max-width:520px) {

  .tile.tile-128 .tile-inner {

    font-size: 25px;

  }

}

.tile.tile-256 .tile-inner {

  color: #f9f6f2;

  background: #edcc61;

  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);

  font-size: 45px;

}

@media screen and (max-width:520px) {

  .tile.tile-256 .tile-inner {

    font-size: 25px;

  }

}

.tile.tile-512 .tile-inner {

  color: #f9f6f2;

  background: #edc850;

  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);

  font-size: 45px;

}

@media screen and (max-width:520px) {

  .tile.tile-512 .tile-inner {

    font-size: 25px;

  }

}

.tile.tile-1024 .tile-inner {

  color: #f9f6f2;

  background: #edc53f;

  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);

  font-size: 35px;

}

@media screen and (max-width:520px) {

  .tile.tile-1024 .tile-inner {

    font-size: 15px;

  }

}

.tile.tile-2048 .tile-inner {

  color: #f9f6f2;

  background: #edc22e;

  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);

  font-size: 35px;

}

@media screen and (max-width:520px) {

  .tile.tile-2048 .tile-inner {

    font-size: 15px;

  }

}

.tile.tile-super .tile-inner {

  color: #f9f6f2;

  background: #3c3a32;

  font-size: 30px;

}

@media screen and (max-width:520px) {

  .tile.tile-super .tile-inner {

    font-size: 10px;

  }

}

.tile-merged .tile-inner {

  z-index:;

}

.above-game:after {

  content: "";

  display: block;

  clear: both;

}

.game-intro {

  float: left;

  line-height: 42px;

  margin-bottom:;

}

.restart-button {

  display: inline-block;

  background: #8f7a66;

  border-radius: 3px;

  padding: 0 20px;

  text-decoration: none;

  color: #f9f6f2;

  height: 40px;

  line-height: 42px;

  display: block;

  text-align: center;

  float: right;

}

.game-explanation {

  margin-top: 50px;

}

@media screen and (max-width:520px) {

  html, body {

    font-size: 15px;

  }

  body {

    margin: 20px 0;

    padding: 0 20px;

  }

  .title {

    font-size: 27px;

    margin-top: 15px;

  }

  /*.container {

    width: 280px;

    margin: 0 auto;

  }*/

  .score-container, .best-container {

    margin-top:;

    padding: 15px 10px;

    min-width: 40px;

  }

  .heading {

    margin-bottom: 10px;

  }

  .game-intro {

    width: 55%;

    display: block;

    box-sizing: border-box;

    line-height: 1.65;

  }

  .restart-button {

    width: 42%;

    padding:;

    display: block;

    box-sizing: border-box;

    margin-top: 2px;

  }

  .game-container {

    margin-top: 17px;

    position: relative;

    padding: 10px;

    cursor: default;

    -webkit-touch-callout: none;

    -ms-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    -ms-touch-action: none;

    touch-action: none;

    background: #bbada0;

    border-radius: 6px;

    width: 280px;

    height: 280px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

  }

  .game-container .game-message {

    display: none;

    position: absolute;

    top:;

    right:;

    bottom:;

    left:;

    background: rgba(238, 228, 218, 0.5);

    z-index:;

    text-align: center;

  }

  .game-container .game-message .over-msg {

    display: block;

    font-size: 30px;

    font-weight: bold;

    height: 30px;

    line-height: 30px;

    /*margin-top: 222px;*/

    margin-top: 59px;

  }

  .game-container .game-message .lower {

    display: block;

    margin-top: 59px;

  }

  .game-container .game-message .retry-button {

    display: inline-block;

    background: #8f7a66;

    border-radius: 3px;

    padding: 0 20px;

    text-decoration: none;

    color: #f9f6f2;

    height: 40px;

    line-height: 42px;

    margin-left: 9px;

  }

  .game-container .game-message .keep-playing-button {

    display: none;

  }

  .game-container .game-message.game-won {

    background: rgba(237, 194, 46, 0.5);

    color: #f9f6f2;

  }

  .game-container .game-message.game-won .keep-playing-button {

    display: inline-block;

  }

  .game-container .game-message.game-won, .game-container .game-message.game-over {

    display: block;

  }

  .grid-container {

    position: absolute;

    z-index:;

  }

  .grid-row {

    margin-bottom: 10px;

  }

  .grid-row:last-child {

    margin-bottom:;

  }

  .grid-row:after {

    content: "";

    display: block;

    clear: both;

  }

  .grid-cell {

    width: 57.5px;

    height: 57.5px;

    margin-right: 10px;

    float: left;

    border-radius: 3px;

    background: rgba(238, 228, 218, 0.35);

  }

  .grid-cell:last-child {

    margin-right:;

  }

  .tile, .tile .tile-inner {

    width: 58px;

    height: 58px;

    line-height: 58px;

  }

  .tile.tile-position-1-1 {

    -webkit-transform: translate(0px, 0px);

    -moz-transform: translate(0px, 0px);

    -ms-transform: translate(0px, 0px);

    transform: translate(0px, 0px);

  }

  .tile.tile-position-1-2 {

    -webkit-transform: translate(0px, 67px);

    -moz-transform: translate(0px, 67px);

    -ms-transform: translate(0px, 67px);

    transform: translate(0px, 67px);

  }

  .tile.tile-position-1-3 {

    -webkit-transform: translate(0px, 135px);

    -moz-transform: translate(0px, 135px);

    -ms-transform: translate(0px, 135px);

    transform: translate(0px, 135px);

  }

  .tile.tile-position-1-4 {

    -webkit-transform: translate(0px, 202px);

    -moz-transform: translate(0px, 202px);

    -ms-transform: translate(0px, 202px);

    transform: translate(0px, 202px);

  }

  .tile.tile-position-2-1 {

    -webkit-transform: translate(67px, 0px);

    -moz-transform: translate(67px, 0px);

    -ms-transform: translate(67px, 0px);

    transform: translate(67px, 0px);

  }

  .tile.tile-position-2-2 {

    -webkit-transform: translate(67px, 67px);

    -moz-transform: translate(67px, 67px);

    -ms-transform: translate(67px, 67px);

    transform: translate(67px, 67px);

  }

  .tile.tile-position-2-3 {

    -webkit-transform: translate(67px, 135px);

    -moz-transform: translate(67px, 135px);

    -ms-transform: translate(67px, 135px);

    transform: translate(67px, 135px);

  }

  .tile.tile-position-2-4 {

    -webkit-transform: translate(67px, 202px);

    -moz-transform: translate(67px, 202px);

    -ms-transform: translate(67px, 202px);

    transform: translate(67px, 202px);

  }

  .tile.tile-position-3-1 {

    -webkit-transform: translate(135px, 0px);

    -moz-transform: translate(135px, 0px);

    -ms-transform: translate(135px, 0px);

    transform: translate(135px, 0px);

  }

  .tile.tile-position-3-2 {

    -webkit-transform: translate(135px, 67px);

    -moz-transform: translate(135px, 67px);

    -ms-transform: translate(135px, 67px);

    transform: translate(135px, 67px);

  }

  .tile.tile-position-3-3 {

    -webkit-transform: translate(135px, 135px);

    -moz-transform: translate(135px, 135px);

    -ms-transform: translate(135px, 135px);

    transform: translate(135px, 135px);

  }

  .tile.tile-position-3-4 {

    -webkit-transform: translate(135px, 202px);

    -moz-transform: translate(135px, 202px);

    -ms-transform: translate(135px, 202px);

    transform: translate(135px, 202px);

  }

  .tile.tile-position-4-1 {

    -webkit-transform: translate(202px, 0px);

    -moz-transform: translate(202px, 0px);

    -ms-transform: translate(202px, 0px);

    transform: translate(202px, 0px);

  }

  .tile.tile-position-4-2 {

    -webkit-transform: translate(202px, 67px);

    -moz-transform: translate(202px, 67px);

    -ms-transform: translate(202px, 67px);

    transform: translate(202px, 67px);

  }

  .tile.tile-position-4-3 {

    -webkit-transform: translate(202px, 135px);

    -moz-transform: translate(202px, 135px);

    -ms-transform: translate(202px, 135px);

    transform: translate(202px, 135px);

  }

  .tile.tile-position-4-4 {

    -webkit-transform: translate(202px, 202px);

    -moz-transform: translate(202px, 202px);

    -ms-transform: translate(202px, 202px);

    transform: translate(202px, 202px);

  }

  .tile .tile-inner {

    font-size: 35px;

  }

  .game-message p {

    font-size: 30px !important;

    height: 30px !important;

    line-height: 30px !important;

    margin-top: 90px !important;

  }

  .game-message .lower {

    margin-top: 30px !important;

  }

}

3、页面逻辑处理

var app = getApp();

var Grid = require('./grid.js');

var Tile = require('./tile.js');

var GameManager = require('./game_manager.js');

var config = {

    data: {

        hidden: false,

        // 游戏数据可以通过参数控制

        grids: [],

        over: false,

        win: false,

        score: 0,

        highscore: 0,

        overMsg: '游戏结束'

    },

    onLoad: function() {

        this.GameManager = new GameManager(4);

        this.setData({

            grids: this.GameManager.setup(),

            highscore: wx.getStorageSync('highscore') || 0

        });

    },

    onReady: function() {

        var that = this;

        // 页面渲染完毕隐藏loading

        that.setData({

            hidden: true

        });

    },

    onShow: function() {

        // 页面展示

    },

    onHide: function() {

        // 页面隐藏

    },

    onUnload: function() {

        // 页面关闭

    },

    // 更新视图数据

    updateView: function(data) {

        // 游戏结束

        if(data.over){

            data.overMsg = '游戏结束';

        }

        // 获胜

        if(data.win){

            data.overMsg = '恭喜';

        }

        this.setData(data);

    },

    // 重新开始

    restart: function() {

        this.updateView({

            grids: this.GameManager.restart(),

            over: false,

            won: false,

            score: 0

        });

    },

    touchStartClienX: 0,

    touchStartClientY: 0,

    touchEndClientX: 0,

    touchEndClientY: 0,

    isMultiple: false, // 多手指操作

    touchStart: function(events) {

        // 多指操作

        this.isMultiple = events.touches.length > 1;

        if (this.isMultiple) {

            return;

        }

        var touch = events.touches[0];

        this.touchStartClientX = touch.clientX;

        this.touchStartClientY = touch.clientY;

    },

    touchMove: function(events) {

        var touch = events.touches[0];

        this.touchEndClientX = touch.clientX;

        this.touchEndClientY = touch.clientY;

    },

    touchEnd: function(events) {

        if (this.isMultiple) {

            return;

        }

        var dx = this.touchEndClientX - this.touchStartClientX;

        var absDx = Math.abs(dx);

        var dy = this.touchEndClientY - this.touchStartClientY;

        var absDy = Math.abs(dy);

        if (Math.max(absDx, absDy) > 10) {

            var direction = absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0);

            var data = this.GameManager.move(direction) || {

                grids: this.data.grids,

                over: this.data.over,

                won: this.data.won,

                score: this.data.score

            };

            var highscore = wx.getStorageSync('highscore') || 0;

            if(data.score > highscore){

                wx.setStorageSync('highscore', data.score);

            }

            this.updateView({

                grids: data.grids,

                over: data.over,

                won: data.won,

                score: data.score,

                highscore: Math.max(highscore, data.score)

            });

        }

    }

};

Page(config);

除此之外，还引用了原Web版2048游戏的一些js文件。

包括

游戏管理 game_manager.js

格子管理 grid.js

本地存储管理 local_storage_manager.js

瓦片管理 tile.js

三、程序效果图

四、源代码下载

扫描下方二维码并关注公众账号，回复 “1239” 获取

源代码使用方法，请参考微信小程序开发入门教程

微信小程序开发(5) 2048游戏的更多相关文章

微信小程序开发的游戏《拼图游戏》
微信小程序开发的游戏<拼图游戏> 代码直接考进去就能用 pintu.js // pintu.js Page({ /** * 页面的初始数据 */ data: { }, initGame: ...
微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
微信小程序开发详解——小程序，大颠覆！
微信小程序开发联系苏念 188.1414.7927 微信小程序系统开发微信新功能开发小程序开发小程序怎么开发 app小程序开发简化小程序开发微信小程序定制小程序制作开发微信小程序 ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
微信小程序开发基础
前言: 微信小程序开入入门,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下面提供微信小程序官方地址:https://developers.weixin.qq.com ...
零基础入门微信小程序开发
注:本文来源于:<零基础入门微信小程序开发> 课程介绍本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...
微信小程序开发教程，大多数人都搞错的八个问题
小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火.这种能力真是全中国再也没有人有了,政府也没有. 但四处传的消息很多是失真的,废话不说,先列 ...
微信小程序开发笔记（一）
一.为什么要学习微信小程序开发微信小程序是一个可以在微信上打开的轻应用,他是由多个页面组成的程序,跟传统APP比较如下: 优点 1.不需要在应用商店下载,不占用内存空间,即开即用 2.可以在微信内直 ...
微信小程序——【百景游戏小攻略】
微信小程序--[百景游戏小攻略] 本次课程小项目中的图片以及文章还未获得授权!请勿商用!未经授权,请勿转载! 博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE ...

随机推荐

emwin之WM_DeleteWindow函数使用注意事项
@2018-12-21 [小记] 在当前窗口P创建一新窗口C后再使用函数 WM_DeleteWindow 删除该C窗口时,删除窗口句柄必须是根句柄,如果使用 WM_GetClientWindow(pM ...
[2017-7-25]Android Learning Day3
最近真的有点迷茫,感觉没有一个完整的教学体系很难进行下去,有的都是自己瞎捉摸,就跟以前ACM的时候一样,动不动就“这就是一道,水题暴力就行了”.“我们枚举一下所有的状态,找一下规律就行了”,mmp哟. ...
luogu4162 最长距离 (dijkstra)
相邻格子连双向边,如果一个点有障碍,那进它的边权就是1,否则是0 这样的话,两点间的最短路+[起始点有障碍],就是从一个点走到另一个需要清除的障碍的个数求出最短路后枚举这两个点就可以了然而30*3 ...
NOIP2017逛公园（dp+最短路）
策策同学特别喜欢逛公园.公园可以看成一张N个点M条边构成的有向图,且没有自环和重边.其中1号点是公园的入口,N号点是公园的出口,每条边有一个非负权值, 代表策策经过这条边所要花的时间. 策策每天都会 ...
PHP函数memory_get_usage获取PHP内存清耗量
(PHP 4 >= 4.3.2, PHP 5, PHP 7) memory_get_usage — 返回分配给 PHP 的内存量说明 int memory_get_usage ([ bool ...
QTREE6&&7 - Query on a tree VI &&VII
树上连通块不用具体距离,只询问连通块大小或者最大权值可以类比Qtree5的方法,但是记录东西很多,例如子树有无0/1颜色等一个trick,两个LCT分离颜色每个颜色在边上. 仅保留连通块顶部不 ...
数据库和Django model 生成和反向生成
Django 脚本生成数据表建立映射关系如果询问时区时间,选1 然后输入timezone.now() python manage.py makemigrations (如果有子应用的话子应用名称填 ...
（三）orcale体系结构
https://www.cnblogs.com/chengxiao/p/5904783.html 一.什么是Oracle数据库? 众所周知,Oracle DataBase是一款关系型数据库管理系统(不 ...
mysql建立索引的几大原则
(转)仅供自己学习,特此记录 1．选择唯一性索引唯一性索引的值是唯一的,可以更快速的通过该索引来确定某条记录.例如,学生表中学号是具有唯一性的字段.为该字段建立唯一性索引可以很快的确定某个学生的信息 ...
java 文件创建调试
BufferedWriter bw=new BufferedWriter(new FileWriter("/2.txt")); bw.write("hello" ...