微信小程式入門-簡單頁面編寫
阿新 • • 發佈:2018-12-31
前言
今天微信小程式正式上線,抱著學習新技術的心態開始第一次接觸微信小程式,無論外面怎麼吹微信小程式怎麼幹掉大量的原生的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文件找到載入頁面的方法:
需要在app.json檔案中做相應的修改即可:
{
"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文件:
在app.json檔案進行配置去掉黑色的導航欄:
{
"pages":[
"pages/welcome/welcome"
],
"window": {
"navigationBarBackgroundColor": "#b3d4db"
}
}
最後的效果:
總結
通過再微信提供的ide寫歡迎頁,給我的感覺是ide不夠完善,圖片不能直接同過ide新增,只能通過找到電腦中磁碟對應的目錄才能新增,歡迎頁使用的幾乎都是web前端技術,所以有web前端基本知識+官方文件就能入門微信小程式。