微信小程式入門基礎教程
準備工作
要開發微信小程式之前，需要做一些準備工作，首先進入https://mp.weixin.qq.com/debug/wxadoc/dev/index.html去下載快速開發原始碼包
然後再進入https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html去下載微信開發者工具，接下來就解壓原始碼包和安裝微信開發工具，安裝好開發軟體之後，在桌面可以看到
然後點選進入需要手機微信掃碼確認登入，掃碼完之後選擇本地小程式專案
選擇新增專案之後
如果想要學習一下微信小程式，暫時不釋出的，就可以點選無AppID,如果後期要釋出就去官網申請小程式帳號，會給你發一個AppID,專案名稱你就隨意取一個，專案目錄就進入剛剛我們下載解壓後的原始碼包，然後就會進入微信開發的介面了
瞭解完這個開發介面之後，我們就可以進行簡單的微信小程式開發了
小程式配置檔案
首先來說下小程式的三個全域性檔案：
app.js:小程式指令碼，宣告全域性變數和監聽處理小程式的生命週期函式
app.json:全域性配置檔案，如小程式有多少個頁面，視窗標題顏色內容，導航條配置，視窗顏色等等，注意：此頁不可新增任何註釋
app.wxss:存放公共樣式
另外還有兩個檔案，一個是utils這個檔案裡面主要是放一些通用工具類，重點是pages這個檔案，他是存放所有頁面的資料夾，小程式頁面主要是由三個檔案構成，wxml,wxss,js,json,
pages裡面的檔案你是可以刪除，然後建立屬於自己的檔名稱，目前pages中預設兩個檔案index和logs你可以刪除，但是如果你新建立你的新頁面檔案，得在app.json中宣告，這裡要注意一下，在app.json中的pages陣列中，第一個宣告的頁面就是微信小程式會進入的首頁
進入開發階段
- ## 1. 改變頂部導航樣式 ##
如果要改變某頁面頂部導航樣式，要在當前頁面的json檔案中修改，例如，要修改index頁面的頂部導航，則在index.json中設定
{
"navigationBarTitleText": "首頁",
"navigationBarBackgroundColor": "black",
"navigationBarTextStyle": "#fff"
}如果要修改全部頁面的頂部導航，則要在app.json中修改
"window": {
"backgroundTextStyle" 如果在index.json中也設定了頂部導航，則優先級別是index.json,app.json裡面設定頂部導航是預設樣式
index頁面設定頂部導航，結果如下：
- ##2.頁面跳轉問題##
首先微信小程式中有個navigator標籤，你可以把他理解成web中的a標籤
在wxml檔案中：
<!-- 跳轉到新頁面 -->
<navigator url="../test/test">navigator跳轉</navigator>
<!-- 跳轉到當前頁面 -->
<navigator url="../test/test" open-type="redirect">redirect跳轉</navigator>當然除了可以在wxml中直接寫跳轉，也可以用另外一種方法寫跳轉
在wxml中：
<text bindtap="navigatorFunc">navigator跳轉</text>
<text bindtap="enterTest">redirect跳轉</text>在js檔案中：
enterTest:function(){
wx.redirectTo({
url: '../test/test',
})
},
navigatorFunc:function(){
wx.navigateTo({
url: '../test/test',
})
},- ##3.建立輪播圖##
在wxml中：
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<navigator url="{{item.link}}" hover-class="navigator-hover">
<image src="{{item.url}}" class="slide-image"/>
</navigator>
</swiper-item>
</block>
</swiper> swiper不能放在任何元素內部，否則輪播會出錯
在wxss中：
.slide-image{
width: 100%;
}設定圖片寬度鋪滿整個螢幕
在js中：
data: {
imgUrls: [
{
link: '/pages/index/index',
url: 'http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701524.jpg'
}, {
link: '/pages/logs/logs',
url: 'http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701516.jpg'
}, {
link: '/pages/test/test',
url: 'http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701517.jpg'
}
],
// 是否需要底部輪播小點
indicatorDots: true,
// 是否自動播放
autoplay: true,
// 自動播放時間間隔
interval: 5000,
// 滑動動畫時間
duration: 1000,
},其中link為跳轉的連結，URL為圖片的地址，但是這個圖片地址不能是本地地址，必須是線上圖片地址或者base64為圖片
執行效果如下：
- ##4.底部導航欄切換##
在app.json中新增：
"tabBar": {
"color": "#000",
"selectedColor": "#1296db",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/1-1.png",
"iconPath": "images/1.png",
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"selectedIconPath": "images/1-1.png",
"iconPath": "images/1.png",
"pagePath": "pages/logs/logs",
"text": "日誌"
},
{
"selectedIconPath": "images/1-1.png",
"iconPath": "images/1.png",
"pagePath": "pages/test/test",
"text": "測試"
}
]
}selectedIconPath為選中時底下圖示，iconPath為未選中底下圖示，pagePath為點選時切換頁面路徑，text為頂部文字內容，color為底部文字顏色，selectedColor文字選中顏色，注意：底部導航切換按鈕不能超過五個
執行截圖：
這裡要注意一點，當你的頁面路徑已經弄成底部導航切換時，其他頁面要進入此頁面路徑切換程式碼就不能用普通的切換了，正確程式碼如下：
在js中：
wx.switchTab({
url: 'pages/test/test',
})或者在wxml中：
<navigator url="/pages/index/index" open-type="switchTab">跳轉按鈕</navigator>以上兩個是等價的
- ##5.表單提交和清空##
在wxml中：
<!-- 表單 -->
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="group">
<view class="title">使用者名稱：</view>
<view class="cont">
<input type="text" name="username" placeholder="請輸入使用者名稱"/>
</view>
<view class="clear"></view>
</view>
<view class="group">
<view class="title">性別：</view>
<view class="cont">
<radio-group name="gender">
<label><radio value="1"/>男</label>
<label><radio value="0"/>女</label>
</radio-group>
</view>
<view class="clear"></view>
</view>
<view class="group">
<view class="title">food：</view>
<view class="cont">
<checkbox-group name="hobby">
<label><checkbox value="0"/>蛋糕</label>
<label><checkbox value="1"/>牛排</label>
<label><checkbox value="1"/>排骨頭</label>
</checkbox-group>
</view>
<view class="clear"></view>
</view>
<view class="group">
<view class="title">同意：</view>
<view class="cont">
<switch name="isagree"/>
</view>
<view class="clear"></view>
</view>
<view class="group">
<button form-type="submit">提交表單</button>
<button form-type="reset">清空表單</button>
</view>
</form>
在wxss中：
.clear{
clear: both;
}
.title{
float: left;
width: 100px;
text-align: right;
}
.cont{
float: left;
}
input{
border:1px solid gainsboro;
}
.group{
margin-top:20px;
}在js中：
// 提交表單函式
formSubmit:function(e){
console.log(e);
console.log("表單已經提交!");
console.log("使用者名稱："+e.detail.value.username);
console.log("性別：" + (e.detail.value.gender==1?"男":"女"));
},
// 清空表單函式
formReset:function(e){
console.log("表單已經清空！");
},效果如下：
注意：formSubmit為表單提交後執行的函式，e.detail.value中是表單提交上來的資料，這裡要注意，存放資料的標籤一定要有name屬性值才能獲取資料
- ##6.彈窗##
1.模態框
在wxml中：
<view class="modalBox">
<button bindtap="modalFunc">modal模態框</button>
<button bindtap="createModal">動態建立模態框</button>
</view>
<!-- 提示框 -->
<modal title="提示" confirm-text="確認" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirmFunc" bindcancel="cancelFunc">
是否確認提交？
</modal> 在js中：
data: {
//false顯示，true為隱藏
modalHidden:true
},
// 模態框出現
modalFunc:function(){
// 顯示提示框
this.setData({
modalHidden: false
});
},
// 動態建立模態框
createModal:function(){
wx.showModal({
title: '動態建立模態框',
content: '本框測試用的哈',
success: function (res) {
if (res.confirm) {
console.log('使用者點選確定')
} else if (res.cancel) {
console.log('使用者點選取消')
}
}
})
},
// 確認函式
confirmFunc:function(){
console.log("點選了確認！");
// 關閉提示框
this.setData({
modalHidden: true
});
},
// 取消函式
cancelFunc:function(){
console.log("點選了取消！");
// 關閉提示框
this.setData({
modalHidden: true
});
},執行結果如下：
2.提示框
在wxml中：
<view class="modalBox">
<button bindtap="toastFunc">toast提示框</button>
<button bindtap="createToast">動態建立toast提示框</button>
</view>
<!-- 提示框 -->
<toast hidden="{{toastHidden}}">提交成功</toast> 在js中：
data: {
//false顯示，true為隱藏
toastHidden:true
},
// 提示框出現
toastFunc:function(){
// 顯示提示框
this.setData({
toastHidden: false
});
// 兩秒後提示框消失
var that = this;
setTimeout(function(){
that.setData({
toastHidden: true
});
},2000);
},
// 動態建立提示框
createToast:function(){
wx.showToast({
title: '設定成功',
})
},截圖效果如下：
以上這些都是微信小程式裡面比較基礎的內容，以後如果有新的發現會再次更新本篇文章。