在開啟你的第一個小程序項目之前坯临，你需要做一些準備工作塞耕，這是小程序的簡易教程文檔地址：https://developers.weixin.qq.com/miniprogram/dev/佳谦。你需要申請一個小程序賬號殴蹄，獲取你的AppID荚藻，同時咽扇，下載小程序開發(fā)者工具邪财，選擇創(chuàng)建 QuickStart 項目就可以開啟你的第一個小程序項目啦。具體過程质欲，請移步上面的文檔地址树埠。
一、簡單介紹一下目錄結構
當你快速創(chuàng)建了一個小程序的項目后嘶伟，根目錄有幾個應用入口文件你是需要了解它們分別是做什么的怎憋。如：app.js、app.json、app.wxss绊袋、project.config.json
（一）app.js：設置一些項目的全局變量以及處理登錄或者獲取用戶信息等毕匀。
（二）app.json：用來對微信小程序進行全局配置，決定頁面文件的路徑癌别、窗口表現(xiàn)皂岔、設置網(wǎng)絡超時時間、設置多 tab 等展姐。
（三）app.wxss：用來設置項目的一些全局樣式躁垛。
（四）project.config.json：項目配置文件。
（五）項目中一個頁面包含四個文件：index.wxml：頁面結構圾笨；index.wxss：頁面樣式教馆；index.json：頁面配置文件；index.js頁面邏輯層
二墅拭、制作一個簡單的小項目
（一）創(chuàng)建目錄結構
主頁包括“首頁”和”我的”兩個模塊活玲，另外包括一個登錄頁。創(chuàng)建目錄結構以及相關文件谍婉。如下圖：
（二）配置相關文件舒憾，準備相關圖片或其他資源
{
"pages":[
"pages/main/main",
"pages/login/login",
"pages/index/index",
"pages/logs/logs",
"pages/userSetting/userSetting"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar": {
"color": "#999",
"selectedColor": "#666",
"backgroundColor": "#f4f4f4",
"list": [
{
"pagePath": "pages/main/main",
"text": "首頁",
"iconPath": "./images/tabbar/首頁.png",
"selectedIconPath": "./images/tabbar/首頁.png"
},
{
"pagePath": "pages/userSetting/userSetting",
"text": "我的",
"iconPath": "./images/tabbar/我的.png",
"selectedIconPath": "./images/tabbar/我的.png"
}
]
}
}
在app.json文件的pages中添加main項，main放在第一條穗熬，即頁面進入后首頁即為首頁镀迂。
PS：這里有個坑，pages數(shù)據(jù)索引為1的頁面必須出現(xiàn)在tabBar的list中維護的選項唤蔗，不然tabBar顯示不出來探遵。
將相關圖片復制到images文件夾下：
（三）創(chuàng)建首頁相關內容
main.xwml：
<!--main.wxml-->
<view class="main-container">
<view class="swiper-title">
<text>穿越時空的思念</text>
</view>
<swiper class="swiper-container" autoplay='true' interval='3000'>
<swiper-item>
<image class="swiper-image" mode="aspectFit" src='../../images/swiper/pic1.jpg' ></image>
</swiper-item>
<swiper-item>
<image class="swiper-image" mode="aspectFit" src='../../images/swiper/pic2.jpg' ></image>
</swiper-item>
<swiper-item>
<image class="swiper-image" mode="aspectFit" src='../../images/swiper/pic3.jpg' ></image>
</swiper-item>
</swiper>
<view class="swiper-text">
<text>簡介：邪惡的奈落與犬夜叉一行的戰(zhàn)爭愈演愈烈，為了保護心臟不受傷害妓柜，他在白靈山分離出一個能洞察人類心靈的嬰兒箱季，并將心臟托其保管。在此之后棍掐，嬰兒被某高僧砍作兩半藏雏，變成白童子和赤子。當?shù)弥温湫呐K的重要性時作煌，這兩個同樣邪惡的童子決定反客為主掘殴。赤子利用魍魎丸不斷加固體外的甲胄，白童子和神樂則在與犬夜叉戰(zhàn)斗的同時暗中與奈落展開對抗粟誓。犬夜叉奏寨、鋼牙、殺生丸為了除掉奈落也不斷提高各自的戰(zhàn)斗力鹰服，雙方的抗爭終于接近高潮病瞳，宿命中的正邪決戰(zhàn)在所難免……
</text>
</view>
</view>
main.wxss：
/**main.wxss**/
.swiper-container {
width: 100%;
height: 500rpx;
}
.swiper-title {
margin-top:30rpx;
text-align:center;
color: #999;
}
.swiper-image {
width: 100%;
height: 500rpx;
}
.swiper-text {
margin:0;
padding:0 40rpx;
color:#444;
font-size: 0.8rem;
}
main.json：
{
"navigationBarTitleText": "首頁"
}
main.js：
//main.js
//獲取應用實例
const app = getApp()
Page({
data: {
},
//事件處理函數(shù)
onLoad: function () {
}
})
效果圖如下：
PS：以上圖片為輪播圖揽咕，具體可以download項目代碼去看。
（四）創(chuàng)建我的相關模塊文件
userSetting.xwml：
<!--userSetting.wxml-->
<view class="user-setting-container">
<view class="user-setting">
<image class="user-avatar" src="../../images/login-pic.jpg" mode="aspectFit"></image>
<button class="user-login-status" bindtap="login">登錄/注冊</button>
</view>
</view>
userSetting.wxss：
/**userSetting.wxss**/
.user-setting {
display: flex;
align-items: center;
}
.user-avatar {
width: 128rpx;
height: 128rpx;
margin: 30rpx;
border-radius: 50%;
}
.user-login-status {
margin-left: 20rpx;
}
userSetting.json
{
"navigationBarTitleText": "我的"
}
userSetting.js：
//userSetting.js
//獲取應用實例
const app = getApp()
Page({
data: {
},
//事件處理函數(shù)
onLoad: function () {
},
login() {
wx.navigateTo({
url: "../../pages/login/login"
})
}
})
圖片如下：
（五）添加我的模塊仍源，點擊登錄/注冊跳轉到首頁tab選項功能：
相關頁面如下：
login.xwml：
<!--login.wxml-->
<!--login.wxml-->
<view class="container">
<view class="login-info">
<text class="user-nick-name">{{ nickName }}的App</text>
<image class="user-avatar" src="../../images/login-pic.jpg" mode="aspectFit"></image>
<view class="user-info">
<view class="section">
<form action="">
<input class="user-phone-number"
type="number"
name="phoneNumber"
placeholder="請輸入您的手機號碼"
bindinput="phoneNumberInput"
placeholder-style="color: #999;"
focus/>
</form>
</view>
<button class="login-btn" type="default" bindtap="turnToMain">登錄</button>
</view>
</view>
</view>
PS：input標簽為原生組件標簽心褐，在模擬器中需長按鼠標才可以輸入內容。
login.wxss：
/**login.wxss**/
/**login.wxss**/
.login-info {
display: flex;
flex-direction: column;
align-items: center;
}
.user-avatar {
width: 128rpx;
height: 128rpx;
margin: 30rpx;
border-radius: 50%;
}
.user-nick-name {
color: #999;
}
.user-phone-number {
padding: 20rpx;
margin: 30rpx 0;
border: 1rpx solid #f8f8f8;
}
.login-btn {
color: #999;
}
login.json：
{
"navigationBarTitleText": "登錄"
}
login.js：
//login.js
//獲取應用實例
const app = getApp()
Page({
data: {
nickName: '犬夜叉',
phoneNumber: ''
},
//事件處理函數(shù)
onLoad: function () {
},
phoneNumberInput: function(e) {
this.setData({
phoneNumber: e.detail.value
});
},
turnToMain() {
wx.switchTab({
url: '../../pages/main/main'
})
}
})
頁面：
PS：設置字體時可直接用小程序的rpx單位笼踩。
