前言

今天微信小程式正式上線，抱著學習新技術的心態開始第一次接觸微信小程式，無論外面怎麼吹微信小程式怎麼幹掉大量的原生的app，作為一個新的事物，存在就必定有其存在的價值，作為一個學習者要保持一個正確的學習心態。勇於的追求新的東西。

應用範圍

張小龍對小程式的定義：

小程式是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，使用者掃一掃或者搜一下即可開啟應用。也體現了“用完即走”的理念，使用者不關心是否安裝太多應用的問題。應用將無處不在，隨時隨地可用，但又無需安裝解除安裝。

可以看出下小程式有以下的特點：

• 小程式適合做功能簡單的應用
• 小程式適合做效能要求不高的應用

一個開發者開發應用是否用小程式開發時候，要結合小程式的自身特點進行分析適不適合。

開發者工具

工欲善其事必先利其器，目前開發微信小程式有自己的ide，下面是ide 的下載地址。
開發者工具
掃二維碼登陸，目前開啟是這樣子的：

第一個歡迎頁面

通過找資料入門微信小程式的開發，下面是第一個歡迎頁面：

頁面分析

整個頁面很簡單，主要由一張圖片，文字，以及一個按鈕+文字組成，三者都是垂直居中，可以將他們放到一個容器中，整體居中，垂直向下排列，再對每個節點進行css樣式的調整。

目錄結構

寫歡迎頁面首先在ide中先建立相應的目錄結構：

• images目錄：位於頂級目錄，主要存放圖片
• pages目錄：位於頂級目錄，存放小程式應用主要資訊
• welcome目錄：存放歡迎頁的資訊
• welcome.js檔案：歡迎頁的指令碼檔案
• welcome.json檔案：歡迎頁的配置檔案
• welcome.wxml檔案：歡迎頁的頁面結構檔案（類似與html程式碼）
• welcome.wxss檔案：歡迎頁的css樣式檔案
• app.js:頂層檔案，app的全域性指令碼檔案
• app.json:頂級檔案，app的全域性配置檔案
• app.wxss:頂層檔案，app的全域性樣式檔案
• 目錄建立完畢後，開始在welcome.wxml編寫歡迎頁的頁面結構：
  ####頁面結構

<view class="container">
    <image class="myphoto" src="/images/MyIcon.png"></image>
    <text class="motto">Hello Zan</text>
    <view class="button">
        <text class="button-text">第一個小程式</text>
    </view>
</view>

直接執行會出錯，因為沒有指定app載入的頁面，通過查詢官方api文件找到載入頁面的方法：

{
  "pages":[
    "pages/welcome/welcome"
  ]
}

執行效果如下：

CSS樣式

在welcome.wxss檔案新增相應的樣式：

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.myphoto{
    width: 200rpx;
    height:200rpx;
    margin-top: 200rpx;
}
.motto{
    margin-top: 100rpx;
    font-size: 32rpx;
}
.button{
    margin-top: 200rpx;
    border: 2rpx solid #405f80;
    border-radius:10rpx;
    height: 60rpx;
    width:200rpx;
    text-align: center;
}
.button-text{
    font-size: 22rpx;
    color: #405f80;

}

page{
    height: 100%;
    background-color:#b3d4db;
}

在全域性app.wxss檔案中可以定義字型：

text{
    font-family: Microsoft Yahei;     
}

最後在，通過改變導航欄的顏色與背景顏色一致實現。api文件：

{
  "pages":[
    "pages/welcome/welcome"
  ],
    "window": {
    "navigationBarBackgroundColor": "#b3d4db"
  }
}

最後的效果：

總結

通過再微信提供的ide寫歡迎頁，給我的感覺是ide不夠完善，圖片不能直接同過ide新增，只能通過找到電腦中磁碟對應的目錄才能新增，歡迎頁使用的幾乎都是web前端技術，所以有web前端基本知識+官方文件就能入門微信小程式。