最近花了一天左右的時間學習了下微信小程序的開發，試著練習一把的心態，搞了一個很簡單的頁面。

就當是學習總結吧：學習要點還是挺多的，通過查看官方接口文檔，熟悉微信小程序開發工具，工程架構，相比傳統頁面開發類似，微信小程序也是由js文件，頁面布局文件wxml和樣式文件wxss

一、先登錄微信公眾平臺，在小程序欄目里注冊獲取appid，在開發工具里填寫該appid，打開開發工具進行編碼工作。

1.1、知識點鞏固。

app.json文件

{ "pages":[  "pages/huangbaokang/huangbaokang",  "pages/zhanglulu/zhanglulu" ], "window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#baf088",  "navigationBarTitleText": "幸福婚姻",  "navigationBarTextStyle":"black"  }, "tabBar": {  "list": [   {    "pagePath": "pages/huangbaokang/huangbaokang",    "text": "黃寶康",    "iconPath": "images/1.png",    "selectedIconPath": "images/1.png"   },   {    "pagePath": "pages/zhanglulu/zhanglulu",    "text": "張露露",    "iconPath": "images/2.png",    "selectedIconPath": "images/2.png"   }  ] }}

入口全局配置主要配置頁簽tabBar設置，全局pages定義，頭部背景，及字體，網絡超時等。

wxml標簽的掌握

huangbaokang.wxml文件

<!--pages/huangbaokang/huangbaokang.wxml--><view class='title'>黃寶康的帥氣照</view><view class='photo-list' wx:for="{{photos_hbk}}" > <!--遍歷圖片文件，生成各個view--> <view class='photo-item'>  <image src='/images/hbk{{index+1}}.png'></image> </view></view>

huangbaokang.js文件

Page({ /**  * 頁面的初始數據  */ data: {  photos_hbk: ['1.png', '2.png', '3.png', '4.png'] }})

huangbaokang.wxss文件

/* pages/huangbaokang/huangbaokang.wxss */.title{ font-size: 70rpx; text-align: center;}.photo-list{ margin-top: 20rpx;}.photo-item{ width: 100%; height: 100%; margin-top: 20rpx;}

具體到頁面的開發，需要學習wxml各種標簽的用法，語句wx:for的使用，及動態數據綁定（使用{{}}）。

事件函數處理

進一步掌握事件處理等，綁定一個方法，在js文件中相對應一個方法。

二、上傳發布審核上線

編碼完之后，可以在開發工具右上角點擊上傳按鈕將代碼至微信后臺。如下：

輸入相關版本號確定之后可以在微信小程序后臺管理處看到提交的版本。

上圖我的是提交完之后的，提交完之后進入審核中，一般一兩天就能查看審核結果，通過審核之后，還需要發布上線。