前言：

小程序 ——實(shí)際上就是基于微信平臺(tái)的H5輕應(yīng)用，微信將系統(tǒng)底層功能（設(shè)備、位置、媒體、文件等）和微信自身功能（登錄、支付、分享等）封裝成相應(yīng)API供小程序調(diào)用。

自從微信小程序出來后，一直想找個(gè)機(jī)會(huì)上手體驗(yàn)一下，因?yàn)樗覀円苿?dòng)端非常像，開發(fā)思想也很契合，而且很輕量，開發(fā)效率也很高。趁著公司最近在做技術(shù)分享，然后花了兩天業(yè)余時(shí)間寫了兩個(gè)頁面，算是有個(gè)大概的入門吧，在此做個(gè)筆記備忘。

因?yàn)楸救酥皩戇^一個(gè)開源的仿想去App的項(xiàng)目，有現(xiàn)成的接口和頁面，我就直接拿那個(gè)項(xiàng)目的UI寫了兩個(gè)頁面，以后有時(shí)間和機(jī)會(huì)再繼續(xù)完善一下吧，本文可能沒有什么技術(shù)含量哈，純粹為了自己練手簡單學(xué)習(xí)一下滴~

下面是小程序運(yùn)行的效果，本文項(xiàng)目地址：WxDesigner

wxapp.gif

技術(shù)要點(diǎn)：

1、對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行了封裝
2、banner的實(shí)現(xiàn)
3、橫向列表和縱向列表及網(wǎng)格布局的實(shí)現(xiàn)
4、圓角圖片的展示

《一》開發(fā)環(huán)境及賬號(hào)準(zhǔn)備

1、下載對(duì)應(yīng)系統(tǒng)（Windows/Mac os）的微信開發(fā)者工具

image.png

《二》項(xiàng)目初建

1、打開微信開發(fā)者工具，新建項(xiàng)目，AppID選測(cè)試號(hào)即可。

image.png

2、新建的項(xiàng)目預(yù)覽(左)及項(xiàng)目默認(rèn)目錄(右)如下，下面詳細(xì)介紹一下項(xiàng)目目錄結(jié)構(gòu)。

image.png

小程序的目錄結(jié)構(gòu)及含義，我們基本都可以用Android項(xiàng)目開發(fā)的知識(shí)類比：

（1）app.json是小程序的全局配置文件，包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。app.json可以理解為Android項(xiàng)目中的AndroidManifest.xml文件，寫的所有的頁面都要在"pages"里面配置。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

（2）wxml文件，所有的頁面都有對(duì)應(yīng)的xxx.wxml文件，類似 HTML 的角色， 由標(biāo)簽、屬性等等構(gòu)成，用來描述當(dāng)前頁面的結(jié)構(gòu)。與 HTML 標(biāo)簽不同的是wxml中的標(biāo)簽是微信包裝好的開發(fā)組件，例如scroll-view、button、 text還有音視頻組件等，wxml可以理解為Android中的xml布局文件。

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

（3）wxss文件，所有的頁面都有對(duì)應(yīng)的xxx.wxss文件，用來描述頁面的樣式風(fēng)格的，類似于CSS。app.wxss為全局樣式，每個(gè)頁面下的為局部樣式。wxss可以理解為我們Android開發(fā)中UI組件對(duì)應(yīng)的各個(gè)屬性樣式，例如布局位置、顏色、字體大小、間距等。

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

（4）js文件，所有的頁面都有對(duì)應(yīng)的xxx.js文件，用來處理用戶操作和業(yè)務(wù)邏輯處理的。可以理解為Android中的Activity。

《三》入門開發(fā)小技巧

開發(fā)小程序跟開發(fā)移動(dòng)端App類似，無非就是頁面+數(shù)據(jù)+用戶交互。

一般項(xiàng)目剛開始都是先實(shí)現(xiàn)幾個(gè)Tab的切換來構(gòu)建項(xiàng)目主體內(nèi)容的展示，在小程序Tab的實(shí)現(xiàn)超級(jí)簡單，直接在app.json中配置一下就搞定了。相比Android首頁Tab及Fragment的搭建，真的是不能再省事了??

"tabBar": {
    "backgroundColor": "#fff",
    "color": "#212121",
    "selectedColor": "#d1a938",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "設(shè)計(jì)",
        "iconPath": "src/icn_designer.png",
        "selectedIconPath": "src/icn_designer_highlight.png"
      },
      {
        "pagePath": "pages/discovery/discovery",
        "text": "發(fā)現(xiàn)",
        "iconPath": "src/icn_guang.png",
        "selectedIconPath": "src/icn_guang_highlight.png"
      }
    ]
  }

下面我們以logs頁面為例，來了解一下頁面的樣式及數(shù)據(jù)綁定是如何實(shí)現(xiàn)的，以及如何處理簡單的用戶操作：

1、頁面樣式：這個(gè)就需要有扎實(shí)的CSS基礎(chǔ)了，反正我的基礎(chǔ)一般般??

image.png

image.png

this.setData({聲明的變量名稱:變量的值})

給變量賦值，一般而言動(dòng)態(tài)賦值都是從網(wǎng)絡(luò)異步獲取數(shù)據(jù)，固定數(shù)據(jù)的綁定直接寫死就行。
②在wxml中通過 {{ }} 的語法把該變量綁定到界面上，即可完成數(shù)據(jù)的綁定。
③寫一個(gè)列表就用一個(gè) wx:for循環(huán)就完成了，對(duì)比Android寫一個(gè)列表，這個(gè)簡直不能太爽??。

wx:for="{{logs}}" 表示對(duì)遍歷數(shù)組logs；
wx:for-item="log" 表示聲明數(shù)組每個(gè)對(duì)象的名稱，可以不聲明，默認(rèn)名稱為item，數(shù)組默認(rèn)下標(biāo)為index。

3、處理用戶操作及頁面數(shù)據(jù)的傳遞：這就簡單講一下點(diǎn)擊事件的處理及頁面數(shù)據(jù)的傳遞。
（1）點(diǎn)擊事件：我們只需要給UI組件聲明catchTap就能給對(duì)應(yīng)的控件綁定點(diǎn)擊事件了，即可以理解為Android中在xml中聲明onClick事件

image.png

image.png

 /**
   * 點(diǎn)擊分類進(jìn)入分類詳情
   */
  categoryDetail: function(e) {
    var categoryId = e.currentTarget.dataset.id;
    console.log(categoryId)
    wx.navigateTo({
      url: '../category/category?id=' + categoryId
    })
  }

跳轉(zhuǎn)的新頁面在onLoad函數(shù)中的options取出傳遞的參數(shù)即可。關(guān)于頁面參數(shù)傳遞的詳細(xì)介紹可以參考：小程序頁面?zhèn)鲄?/a>

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
    console.log("接收頁面?zhèn)鬟f過來的參數(shù)" + options.id)
  }

4、開發(fā)調(diào)試
（1）我們可以在Console中查看我們打印的日志，例如我在網(wǎng)絡(luò)請(qǐng)求net.js中統(tǒng)一處理了接口返回的數(shù)據(jù),打印出接口返回的結(jié)果。

image.png

（2）我們可以在AppData查看每個(gè)頁面綁定的具體數(shù)據(jù)

image.png

（3）還可以在Network中查看到所有的網(wǎng)絡(luò)請(qǐng)求的詳細(xì)情況。

image.png

《四》新手遇到的一些小問題

（1）寫wx:for時(shí)提示下面警告，需加上wx:key=""即可。

image.png

（2）由于微信小程序只支持https的網(wǎng)絡(luò)請(qǐng)求，所以如果是http的接口，真機(jī)調(diào)試時(shí)，需要打開調(diào)試模式，才能正常訪問到數(shù)據(jù)。

《五》參考文檔

微信公眾開放平臺(tái)
微信小程序開發(fā)文檔
微信公眾平臺(tái)