一、創(chuàng)建項目
1、首先創(chuàng)建項目需要準備的工作
微信公眾平臺注冊開發(fā)者賬號：https://mp.weixin.qq.com/
下載小程序開發(fā)工具：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
注意：（填寫注冊郵箱信息，注意一個郵箱只能注冊一次，該郵箱不能注冊其他騰訊平臺）
2、認識項目目錄
全局配置文件app.json (對于一個小程序項目而言，最重要的文件是app.json，它也是開發(fā)工具識別一個文件夾是否為小程序項目的標識。如果文件夾中沒有app.json文件，則提示無法創(chuàng)建項目。)
pages目錄：用于存放所有的頁面。
utils目錄：用于存放工具類文件。
app.js：是入口文件，程序在運行時，首先要執(zhí)行該文件。
app.json：是全局配置文件，用于配置小程序的信息（它里面配置的是全局信息）。
app.wxss：是全局樣式文件。全局樣式文件里面定義的選擇器，在所有的頁面中生效。
project.config.json：是項目配置文件。
sitemap.json：是SEO配置文件，方便用戶搜索到該小程序。
總結：
頁面的.json、.js、.wxss文件必須與.wxml文件同名，否則不生效
每個頁面都必須在pages下注冊，沒有注冊的頁面，如果不訪問，編譯能通過，一旦試圖訪問該頁面則會報錯
可以通過在pages下添加一個選項快速新建一個頁面，開發(fā)工具會自動生成對應的文件
3、頁面組成
每一個頁面由四個文件組成：xxx.wxml文件、xxx.wxss文件、 xxx.js文件和xxx.json文件。?
（1）xxx.wxml文件
xxx.wxml文件，就相當于一個html文件。在wxml文件中，不能寫傳統(tǒng)的html標簽，只能寫微信提供的組件。
① view組件
相當于div標簽。
② text組件
相當于span標簽。
③ swiper
swiper是滑塊視圖容器，它里面只能放swiper-item組件。
swiper組件的常用屬性：
circular是銜接滑動
autoplay是自動切換
interval是自動切換時間間隔
indicator-dots是否顯示面板指示點
indicator-color指示點顏色
indicator-active-color當前選中的指示點顏色
如圖一：
④ image
image是圖片組件，最好全部采用網絡圖片，因為小程序的總體積不允許超過2MB。
（2）xxx.wxss文件
xxx.wxss文件，就相當于一個css文件。在wxss文件中，最好不要寫標簽選擇器和id選擇器，統(tǒng)一寫類選擇器。
為了讓小程序里面的內容在各種設備上能夠自適應顯示，微信推出了響應式單位：rpx。在iphone6中，2rpx=1px。
width:?60rpx;?????/*?相當于width:?30px;?*/
（3）xxx.js文件
xxx.js文件，是交互文件（核心文件）。
Page()函數，返回頁面對象，該函數需要傳一個配置參數，這個配置參數是一個對象。在這個配置對象中，定義當前頁面的所有內容。
① data
定義頁面的數據。
Page({
? ? ?data:?{
? ? ? ? ?name:?"熱門歌曲",
?????????songs:?[{id:?1001},?{id:?1002}]
??}
})
② 自定義函數
開發(fā)者可以添加任意的函數或數據到Object 參數中，在頁面的函數中用this可以訪問。
Page({
????//?定義函數
????delSong()?{
????????this.data.songs.splice(0,?1)
????????this.setData({
????????????songs:?this.data.songs
????????})
????}
})
（4）xxx.json文件
xxx.json文件，是頁面的配置文件（它里面配置的是當前頁面信息）。
5、插值表達式 {{}}
WXML 中的動態(tài)數據均來自對應 Page 的 data。
（1）獲取data中數據
通過插值表達式{{}}，可以顯示js里面定義的data里面的數據。
<text>歌曲分類：{{name}}</text>
（2）組件屬性(需要在雙引號之內)
??<view?id="item-{{id}}">?</view>
（3）運算
可以在{{}} 內進行簡單的運算。
① 三元運算
<view?class="item?{{index%2===0???'bg'?:?''}}">?</view>
② 邏輯判斷
??<view?wx:if="{{length?>?5}}">?</view>
6、bindtap
bindtap是觸屏事件，其實就是相當于網頁中的點擊事件。
<view?class="btn"?bindtap="delSong">刪除</view>
7、data-xxx 自定義屬性
小程序中bindtap綁定方法時不能傳參數。所以組件通過data-xxx傳遞數據。
<view?class="btn"?data-index="{{index}}"?bindtap="del1">刪除</view>
注意：自定義屬性的命名用駝峰或者大寫命名，小程序內部會自動轉成小寫。
del(e){
????//解構出自定義的index屬性
????let?{currentTarget:{dataset:{index}}}?=?e
?}
8、setData()方法
setData()方法，更新頁面中數據。頁面數據更新后，調用setData()方法重新渲染到頁面。
???this.setData({
??????????typeId:typeid,
??????????name:typename
????})
二、列表渲染
1、wx:for
wx:for指令用于循環(huán)數組數據，生成組件。
循環(huán)出來的每一項通過item返回，每一項對應的索引，通過index返回。
2、wx:key
wx:key=""，設置每一項唯一的標識。循環(huán)列表時，添加wx:key的好處是，將來列表發(fā)生變化時重新渲染列表的損耗為更低。
如下圖2
三、條件渲染
條件渲染可以使用wx:if或hidden。
一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。
1、wx:if
wx:if用于條件渲染：條件為真生成里面的內容，條件為假不會生成里面的內容。（每次重新生成內容）
也可以用wx:elif 和 wx:else 來添加一個 else 塊。
<view?wx:if="{{typeID?==?1}}">?1?</view>
??<view?wx:elif="{{typeID?==?2}}">?2?</view>
??<view?wx:else>?3?</view>
2、hidden
hidden用于條件渲染：條件為真隱藏里面的內容，條件為假顯示里面的內容。（每次切換樣式）
??<view?hidden="{{typeID!=?2}}">?1?</view>
四、tabBar&頁面跳轉
這個配置項是用來配置頁面底部的tab欄的,開發(fā)者可以根據自己的需求來進行配置.
注意:tabBar是一個數組,只能配置最少2個,最多5個,而且tab欄的順序是按照數組的排序來的.
tabBar官方給出了五個屬性(color(HexColor), selectedColor(HexColor), backgroundColor(HexColor), borderStyle(String), list(Array)?).
接下來說說我對這五個屬性的理解:
# color設置tab上的文字默認顏色（黑色）
# selectedColor設置tab上的文字選中的顏色（#369深藍色）
# backgroundColor設置tab的背景顏色（white）
# borderStyle設置邊框的顏色,現在僅支持(black和white)
上面這四個屬性就是按照官方給出的API來設置就可以,下面說一下list屬性.list屬性接受的是一個數組(Array),在list下面配置的每一項都是一個對象,他們都有以下這四個屬性(pagePath(String), text(String), iconPath( String), selectedIconPath(String)).?
* pagePath?這個定義的是頁面的路徑,但是這個屬性定義的路徑必須是在pages上定義過的.?
* text?設置的是按鈕上的文字?
* iconPath?是定義icon圖片的路徑,這個屬性定義的圖片大小不超過40kb?
* selectedIconPath?定義的是當選中按鈕之后顯示的圖片,同樣圖片的大小不能超過40kb.
比如：這是底部導航欄效果圖
解析：藍色小屋就是選中的圖片（selectedIconPath）
? ? ? ? ? ? 灰色購物車就是圖片（iconPath?）
????????????首頁藍色的就是選中的顏色（selectedColor）
? ? ? ? ? ? 列表黑色的就是color
五、確認框和消息框
1、wx.showModal() 確認框
????title：提示的標題
????content：提示的內容
????success：接口調用成功的回調函數。回調函數中的confirm屬性返回true，表示點擊的是確定 按鈕，否則是取消按鈕。
wx.showModal({
??????content:'是否確定刪除',
??????success:({confirm})=>{
????????//confirm返回true，表示點擊的是確定按鈕，否則是取消按鈕
????????if(confirm){
}}
?})?
2、wx.showToast() 顯示消息提示框
title：提示的內容
icon：圖標
duration：消息提示框的顯示時間
mask：是否顯示透明蒙層，防止觸摸穿透
wx.showToast({? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?title:?'刪除成功',????????icon:"success",????????duration:1500,????????mask:true???})
六，封裝方法
模塊化語法有兩種：① commonjs規(guī)范，② es6規(guī)范。
nodejs環(huán)境采用的就是commonjs規(guī)范。采用exports 或 module.exports 導出成員，采用require() 導入成員。
微信小程序支持commonjs規(guī)范，同時還支持官方的ES6規(guī)范。ES6規(guī)范采用export 導出成員，采用import 導入成員。
1，封裝方法并導出
將封裝的方法放到util目錄下的js文件中?？梢孕陆╦s文件，也可以寫在直接util.js文件中。
（1）確認框方法
//?定義確認框方法，并導出
export?let?$confirm?=?(content)=>{
??return?new?Promise((resolve)=>{
????wx.showModal({
??????content,
??????success:({confirm})=>{
????????if(confirm){
??????????resolve()
????????}
??????}
????})
??})
}
（2）消息框方法
//?定義消息框方法，并導出
export?let?$msg?=?(title,icon='success',duration=1500)=>{
??wx.showToast({
????title,
????icon,
????duration,
????mask:true
??})
}
（3）獲取事件參數的方法
export?let?$key?=?(e)=>{
??return?e.currentTarget.dataset
}
2，導入方法
import是ES6的導入語句。
//?導入msg模塊中的指定成員
import?{$msg,$confirm}?from?'../../utils/msg'
3.將方法注冊給全局對象wx
wx對象是微信小程序的全局對象，在任何地方都可以使用
（1）注冊語句
wx.$msg?=?$msg
wx.$confirm?=?$confirm
（2）在app.js入口文件中導入
注意：注冊給wx對象的方法，需要在app.js文件中導入，才可使用。
//?導入初始化文件
import?'./utils/index'
（3）調用方法
wx.方法名(參數)
wx.$msg('刪除成功')
