1. 程式人生 > >答題微信小程式實現(2):點選計數

答題微信小程式實現(2):點選計數

不太習慣用新版寫東西,還是markdown寫著習慣。
我也是一個初學者,所以把目的拆分成一個個小模組,分別實現吧。
答題和隨機的原始框架在(1)中已經實現了。
那麼這篇就寫積分。也就是答對一題,加1分。這裡簡化成點選一次加1分。
好開森,點選計數的功能終於搞定了。
非常簡單的程式碼,不過對於初學者來說,找出這行程式碼也不太容易,我的方法就是拿過來一個覺得應該有這個功能的程式原始碼,一點點把無關的程式碼段落刪除,剩下的應該就是我想要的了。點選計數,答題程式應該有這個功能,外賣程式應該也有這個功能,帶點讚的也應該有。
程式執行介面如下。
這裡寫圖片描述

點選一次計數,就加一次,1,2,3……,算分用。
index.wxml中的程式碼如下:

<view>{{index+1}}</view>

<button bindtap="jishu">計數</button>

index.js中的程式碼如下:


var app = getApp()
Page({
  data: {
    index: 0,
  },
  jishu: function () {
    var that = this;

    this.setData({ index: that.data.index + 1 });

  }

})

看一下真的是超簡單,就是給button一個jishu函式,計數函式給view賦index的值。
this.setData({index:that.data.index+1})。

下面是另一種計數形式,購物車和外賣的點選計數,帶有wx:for,微信迴圈語句,就是一個列表。
這裡寫圖片描述

如圖所示,點選計數,+1。結構裡面新建了一個目錄data,目錄裡新建了一個post-data.js檔案。
post-data.js裡面的東西如下:

var local_database = [{
  num: 1
}
]
module.exports = {
  postList: local_database
}

不用線上json檔案的話,以後以這種js檔案的方式儲存題庫最好。var local_database和module.exports的格式固定即可。
index.wxml中有關計數的東西如下:

<view wx:for="{{postList}}" wx:for-item="item" wx:for-index="index">
  <text>{{item.num}}</text>
 <button bindtap="add" data-index="{{index}}">計數</button >
</view>

這麼個迴圈應該用在題庫裡。
index.js中跟計數這塊有關的程式碼如下:

var postData = require("../../data/post-data.js");
Page({
  data: {
    postList: postData.postList
  },
  add: function (e) {
    var index = e.currentTarget.dataset.index;
    var num = this.data.postList[index].num;
    num++;
    var carts = this.data.postList;
    carts[index].num = num;
    this.setData({
      postList: carts,

    });
  },

})

require載入資料。

相關推薦

答題程式實現2計數

不太習慣用新版寫東西,還是markdown寫著習慣。 我也是一個初學者,所以把目的拆分成一個個小模組,分別實現吧。 答題和隨機的原始框架在(1)中已經實現了。 那麼這篇就寫積分。也就是答對一題,加1分。這裡簡化成點選一次加1分。 好開森,點選計數的功能終

程式入門2:web-view的使用

上一篇:簡單介面的實現 web-view是最近微信推出的元件,最開始用的時候對於我來說,就是一個內嵌網頁,相當於HTML裡的a標籤。然而這個元件卻不像想象中的那麼好用,不過困擾我十多天後,終於找到一個小方法來“解決”了,看完勿噴。 首先,你得是用企業賬戶或其它賬戶申請註冊的

程式入門1簡單介面的實現

原始碼我已經放在GitHub上了https://github.com/A666AHL/pupil 1.安裝 微信web開發者工具 不多BB,直接從安裝IDE開始 首先,你得進入微信公眾平臺官網(https://mp.weixin.qq.com) 點選底部的小程式並檢視詳情

程式開發2---APP()函式

App({ onLaunch: function(options) { // Do something initial when launch. }, onShow: function(options) { // Do something when show. }, onHide: function() {

程式入門3移動端訪問PC

上一篇講了web-view的使用,然而你會發現這隻能訪問一些百度、淘寶、騰訊等一些存在的網站,但如何訪問自己本地ip以來訪問自己寫的一些網站呢? 注意:這篇文章是利用Python開發的web,可能對一些其他僅有HTML、css、js的靜態不太適用 對於Django部分本篇不做過多講解,以後

程式實現給迴圈列表新增樣式例項

微信小程式有個屬性hover-class='active',是指當點選列表元素時當按下滑鼠左鍵會顯示active樣式,但是滑鼠離開樣式就會復原.可以參考以下解決方案,直接上程式碼: wxml:<view class="taga"> <view class=

程式實戰---實現登入介面

昨天小程式第一天公測,就下載個小程式自帶IDE玩了玩,看了看API,擼出了個登入介面給大家分享下。 下面是主介面和程式碼。 index.wxml <view class="container"> <view class="usermotto">

程式開發——使用sshstruts2+hibernate+spring框架實現後臺與前臺進行通訊

使用ssh框架實現對微信小程式前臺的通訊,做到前後臺分離,後臺頁面都為靜態頁面,通過用json來現實與前臺通訊(面向介面程式設計)。在這次因為只為了實現通訊所以沒有用hibernate。只用了struts2+spring,也是ssh框架中struts和spring整合。實現了

程式-01筆記

微信小程式和Vue有點相似。 首先下載開發工具,直接去官網找工具就可以了  然後安裝使用就可以了 點選選擇小程式,來到這裡 點選測試號小程式 ,會自動生成AppID。然後建立專案就可以了 介面就是這樣、可以選擇各種機型以及屬於你的糞×。點選編譯或者直接

程式支付thinkphp

之前一直想學下微信支付,這次終於有機會來操作一下,還是記錄下來,跟大家分享分享。 一、首先,我們要在微信官方網站上去下載支付介面,然後改個名方便呼叫(例如:WeiXinpay),然後將下載的檔案放入thinkphp的Vendor檔案下面; 二、然後去官網下載商戶操作證書:https://pa

程式——操作

首先,你需要從官網上https://mp.weixin.qq.com/cgi-bin/wx下載“微信web開發者工具”,如下圖 雙擊開啟 設定專案路徑,AppId或者點選小程式,入門就建立快速啟動模版,確定開啟。 開啟程式後,我們先認識一下目錄:如圖所示, pages資料夾放的是你每

程式 筆記

navigateTo, redirectTo 只能開啟非 tabBar 頁面。 switchTab 只能開啟 tabBar 頁面。 reLaunch 可以開啟任意頁面。 頁面底部的 tabBar 由頁面決定,即只要是定義為 tabB

程式learning - 1簡易教程

官方連結:https://developers.weixin.qq.com/miniprogram/dev/ 學習微信小程式,重點標記,只做記錄,自行看官方文件       全域性配置 小程式根目錄下的 app.json 檔案用來對微信

程式學習18 —— 上拉載入和下拉重新整理

在微信小程式上實現下拉重新整理、上拉載入的效果 使用系統提供的onPullDownRefresh、onReachBottom這2個事件, 前提需要在app.json或page.json配置檔案中設定,才能使用。 app.json是全應用的頁面都可以使用該事件

程式新聞文章釋出系統前後臺完整程式碼

1:建表 。分類表,新聞表 2:後臺。新增新聞,管理新聞。 3:小程式介面。列表頁,詳情頁。 4:後臺介面 5:小程式程式碼 //////////////////////////////////////////////

遊戲開發2

一、檔案結構 在上一節中,我們已經看到了小程式開發的介面。在介面中的中間部分,為檔案結構區域: 可以看到該專案中有: audio資料夾:用來存放音訊檔案; images資料夾:用來存放圖片檔案; js資料夾:用來存放指令碼檔案; .game.js檔案; .game.json

從零開始學程式開發

從我學習開發小程式到現在,已經有好幾款上線了。雖然都是一些益智類的小程式,不難,但是也從裡面學到了一些知識。 1.準備工作 首先需要去官網註冊一個小程式的帳號。註冊好賬號以後,就可以設定補充小程式的資訊

程式 - debug除錯

微信小程式除錯的方式是基於Chrome.     1. 常見console.log除錯(可以具體參考console.log這個函式使用,它可不止這一個作用!)         2.使用NETWORK(我們可以查詢到訪問了那些介面以

程式實現多個button按鈕 多操作

<block wx:for="{{gd1List2}}"> <button class="{{item.isChecked2?'normal':'a2'}}" bindtap='getDemo2' data-text="{{item.name}}" dat

程式把玩scroll-view元件

scroll-view為滾動檢視,分為水平滾動和垂直滾動。注意滾動檢視垂直滾動時一定要設定高度否則的話scroll-view不會生效。滾動檢視常用的地方一般都是Item項比較多的介面,比如我的模組