最近微信小程序炒得火熱,就跟成都的這個(gè)房?jī)r(jià)一樣.昨天我也嘗試了一下,做了一個(gè)自己的英雄列表.今天將自己的制作過程記錄于此.

　　1.下載微信開發(fā)者工具

官網(wǎng)鏈接:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364,下載完成之后默認(rèn)安裝即可

　　2.新建項(xiàng)目

打開微信開發(fā)者工具,(首次需要微信掃碼登錄),如下圖所示,點(diǎn)擊添加項(xiàng)目,然后依次輸入APPID,項(xiàng)目名稱,并選擇你的項(xiàng)目所在的目錄(本地目錄),如果沒有AppID,選擇無APPID即可(部分功能受限)

　　3.編寫代碼

我的項(xiàng)目結(jié)構(gòu)如下:

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

我們可以看到detail這個(gè)目錄下有四個(gè)文件:

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

(2) detail.json是detail.wxml的配置文件,比如我們可以設(shè)置導(dǎo)航條的標(biāo)題

(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是整個(gè)小程序需要注冊(cè)的頁面,注意到不用指定文件后綴,我們也不用去位一個(gè)頁面引用指定的wxss,js,json文件.小程序會(huì)自動(dòng)去匹配相關(guān)的 filename.wxml, filename.wxss, filename.js, filename.json文件,所以我們?cè)诿@些文件的時(shí)候要保持文件名一致.

windows是對(duì)小程序的導(dǎo)航欄的一些設(shè)置,如導(dǎo)航標(biāo)題,顏色等.

tabBar是小程序底部的導(dǎo)航按鈕,根據(jù)自己的需求可以設(shè)置多個(gè)按鈕,并指定相應(yīng)的路徑,名稱.

　　3.2 app.js文件

app.js里面裝著一些全局函數(shù),全局變量等

//app.js
App({
 onLaunch: function () {
  //調(diào)用API從本地緩存中獲取數(shù)據(jù)
  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{
   //調(diào)用登錄接口
   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對(duì)象里面放一些全局變量,比如我們要跨頁面?zhèn)鲄?shù),就要用到這個(gè).

如果我們要在另外一個(gè)頁面操作這個(gè)全局變量,需要如下操作:

var app=getApp();

app.globalData.userId="12"

這樣就可以操作全局變量了.

　　3.3 數(shù)據(jù)綁定

小程序中的數(shù)據(jù)綁定類似于angular,vue,采用雙花括號(hào)的方法,花括號(hào)內(nèi)部即變量,在detail.wxml文件中形如{{name}},設(shè)置變量name的值需要在對(duì)應(yīng)的detail.js文件中進(jìn)行設(shè)置.

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

單個(gè)頁面上要?jiǎng)討B(tài)設(shè)置變量,要通過this.setData({})方法

　　3.4 綁定事件

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

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

自定義屬性采用 data-屬性名 的形式,要去到這個(gè)自定義屬性,可以通過tapName方法中的event對(duì)象獲取

　　3.5 列表渲染

小程序中的列表渲染采用wx:for="{{items}}"的方法,每一次循環(huán)items這個(gè)變量,會(huì)生成一個(gè)item對(duì)象,可以通過item.name獲取每一次循環(huán)中的name屬性

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

　　3.6 導(dǎo)航

小程序里面的頁面跳轉(zhuǎn)可以使用:

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

　　官方規(guī)定跳轉(zhuǎn)最多5層頁面.

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

 最后給大家看一下我的迷你小程序的截圖~

感謝大家的閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！