微信小程序,個人英雄列表

　　最近微信小程序炒得火熱,就跟成都的這個房價同樣.昨天我也嘗試了一下,作了一個本身的英雄列表.今天將本身的製做過程記錄於此.

　　1.下載微信開發者工具

官網連接:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364,下載完成以後默認安裝便可

　　2.新建項目

打開微信開發者工具,(首次須要微信掃碼登陸),以下圖所示,點擊添加項目,而後依次輸入APPID,項目名稱,並選擇你的項目所在的目錄(本地目錄),若是沒有AppID,選擇無APPID便可(部分功能受限)

                           

　　3.編寫代碼

個人項目結構以下:

 

目錄解釋:pages這個文件夾放的是你的這個小程序所涉及到全部頁面.image文件夾放圖片.app.json是一個小程序的入口配置文件,一些全局設置都在這個文件裏面.

咱們能夠看到detail這個目錄下有四個文件:

(1)  detail.js是detail.wxml這個頁面涉及到的js處理的文件

(2) detail.json是detail.wxml的配置文件,好比咱們能夠設置導航條的標題

(3) detail.wxml是小程序索要展現的頁面,UI的架子.

(4) detail.wxss是detail.wxml的樣式文件,相似於css文件

　　3.1 接下來咱們看一看app.json文件:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/detail/detail",
    "pages/notice/notice",
    "pages/noticedetail/noticedetail"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "英雄角色",
    "navigationBarTextStyle":"black",
    "backgroundColor": "#fbf9fe"
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#3cc51f",
    "borderStyle": "#cccccc",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "英雄列表",
      "iconPath": "image/list_normal.png",
      "selectedIconPath": "image/list.png"
    }, {
      "pagePath": "pages/notice/notice",
      "text": "版本公告",
      "iconPath": "image/hot_normal.png",
      "selectedIconPath": "image/hot.png"
    }]
  }
}

pages是整個小程序須要註冊的頁面,注意到不用指定文件後綴,咱們也不用去位一個頁面引用指定的wxss,js,json文件.小程序會自動去匹配相關的 filename.wxml, filename.wxss, filename.js, filename.json文件,因此咱們在命名這些文件的時候要保持文件名一致.

windows是對小程序的導航欄的一些設置,如導航標題,顏色等.

tabBar是小程序底部的導航按鈕,根據本身的需求能夠設置多個按鈕,並指定相應的路徑,名稱.

　　3.2 app.js文件

app.js裏面裝着一些全局函數,全局變量等

//app.js
App({
  onLaunch: function () {
    //調用API從本地緩存中獲取數據
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調用登陸接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null,
    userId:null
  }
})

globalData對象裏面放一些全局變量,好比咱們要跨頁面傳參數,就要用到這個.

若是咱們要在另一個頁面操做這個全局變量,須要以下操做:

var app=getApp();

app.globalData.userId="12"

這樣就能夠操做全局變量了.

　　3.3 數據綁定

小程序中的數據綁定相似於angular,vue,採用雙花括號的方法,花括號內部即變量,在detail.wxml文件中形如{{name}},設置變量name的值須要在對應的detail.js文件中進行設置.

Page({
    data: {
        hero:heros.getInfoById(app.globalData.userId),
　　　　 name:'Ricky',
　　　　 items:[{"id":1,"name":"name1"},{"id":2,"name":"name2"}]
    },
    onLoad:function () {
        this.setData({
            hero:heros.getInfoById(app.globalData.userId)
        })
    },
　　tapName:function(event){
　　　　console.log(event)
　　}
})

單個頁面上要動態設置變量,要經過this.setData({})方法

　　3.4 綁定事件

wxml中的事件綁定採用 bind+方法名

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

自定義屬性採用 data-屬性名 的形式,要去到這個自定義屬性,能夠經過tapName方法中的event對象獲取

　　3.5 列表渲染

小程序中的列表渲染採用wx:for="{{items}}"的方法,每一次循環items這個變量,會生成一個item對象,能夠經過item.name獲取每一次循環中的name屬性

<view wx:for="{{items}}" class="listView" bindtap="showDetail" data-idIndex="{{index+1}}">
　　<view>{{item.name}}</view><view>{{item.id}}</view>
</view>

　　3.6 導航

小程序裏面的頁面跳轉可使用:

wx.navigateTo({
          url: '../detail/detail'
      })

　　官方規定跳轉最多5層頁面.

更多小程序的API信息請參考官方網站:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html?t=1475052046827

 

最後給你們看一下個人迷你小程序的截圖~