這里默認(rèn)讀者的微信開發(fā)工具都已經(jīng)安裝好了。
1、新建小程序，沒有 AppID 可以使用測(cè)試號(hào)。語(yǔ)言使用 JavaScript。
- 我們先看一下 app.json 文件
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
- 小程序根目錄下的 app.json 文件用來對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
pages 是頁(yè)面路徑列表，也就是新建的頁(yè)面也會(huì)出現(xiàn)在里面，默認(rèn)加載第一個(gè)的頁(yè)面路徑。
window 用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。
navigationBarBackgroundColor 導(dǎo)航欄背景顏色
navigationBarTextStyle 導(dǎo)航欄標(biāo)題顏色，僅支持 black / white
navigationBarTitleText 導(dǎo)航欄標(biāo)題文字內(nèi)容
backgroundTextStyle 下拉 loading 的樣式，僅支持 dark / light
enablePullDownRefresh 是否開啟當(dāng)前頁(yè)面的下拉刷新。
onReachBottomDistance 頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px。
tabBar （客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。
color tab 上的文字默認(rèn)顏色，僅支持十六進(jìn)制顏色
selectedColor tab 上的文字選中時(shí)的顏色，僅支持十六進(jìn)制顏色
backgroundColor tab 的背景色，僅支持十六進(jìn)制顏色
borderStyle tabbar上邊框的顏色， 僅支持 black / white
list tab 的列表，詳見 list 屬性說明，最少2個(gè)、最多5個(gè) tab
position tabBar的位置，僅支持 bottom / top
custom 自定義 tabBarlist 是一個(gè)數(shù)組 里面的數(shù)據(jù)定義：
pagePath 頁(yè)面路徑，必須在 pages 中先定義
text tab 上按鈕文字
iconPath 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。當(dāng) postion 為 top 時(shí)，不顯示 icon。
selectedIconPath 選中時(shí)的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。當(dāng) postion 為 top 時(shí)，不顯示 icon。
networkTimeout 各類網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間，單位均為毫秒。
request 請(qǐng)求時(shí)間
2、新建 一個(gè) page 。
xxx.js 的文件內(nèi)容 ，網(wǎng)絡(luò)請(qǐng)求、頁(yè)面數(shù)據(jù)處理、 下拉上拉數(shù)據(jù)刷新、分享頁(yè)面
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
xxx.json 這個(gè)跟上面寫的 app.json 一樣的?？梢栽诶锩鎸?duì)當(dāng)前的頁(yè)面的導(dǎo)航文字顏色進(jìn)行重定義。
xxx.wxml 這是寫展示的頁(yè)面，是由 html 標(biāo)簽對(duì) 組成的。剛創(chuàng)建會(huì)有一個(gè) text 。也就是把路徑給輸出來了。
<text>pages/demo/demo.wxml</text>
這里就舉幾個(gè)例子
<text>這是一個(gè)測(cè)試</text>
<button>這是一個(gè)按鈕</button>
<image src='/images/icon.jpg'></image>
<input placeholder='請(qǐng)輸入賬號(hào)'></input>
<switch checked='true'></switch>
展示的樣子如下
可以看到上面展示出來的控件，但是我們會(huì)發(fā)現(xiàn)有一些問題，就是說樣式不是咱們想要的，那么我們要在里面加點(diǎn)樣式，使界面看起來好看一點(diǎn)。
xxx.wxml 代碼如下
<view class='demo-back'>
<text class='text-class'>這是一個(gè)測(cè)試文字</text>
<button class='button-class' hover-class='click-class'>這是一個(gè)按鈕</button>
<image src='/images/icon.jpg'></image>
<input class='input-class' placeholder='請(qǐng)輸入賬號(hào)'></input>
<switch checked='true'></switch>
</view>
xxx.wxss 代碼
.demo-back {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: bisque;
}
.text-class {
color: red;
font-size: 20px;
margin-top: 30rpx;
}
.button-class {
color: white;
background-color: rgb(111, 111, 223);
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.click-class {
color: white;
background-color: yellowgreen;
}
.input-class {
margin-top: 30rpx;
margin-bottom: 30rpx;
padding-left: 30rpx;
padding-right: 30rpx;
width: 80vw;
height: 44rpx;
border: 1rpx blue solid;
border-radius: 22rpx;
}
效果如下
自己動(dòng)手實(shí)踐是學(xué)習(xí)最快的路徑。
基礎(chǔ)就寫到這里。相信還會(huì)有一些疑問，比如網(wǎng)絡(luò)請(qǐng)求，布局方式，數(shù)據(jù)處理等等。這都放在下一篇文章中講。
下一篇文章主要講
網(wǎng)絡(luò)請(qǐng)求
布局方式
頁(yè)面跳轉(zhuǎn)
方法點(diǎn)擊
數(shù)據(jù)處理、存儲(chǔ)
