一 基本介紹
微信專門為小程序開發了一個ide叫做微信開發者工具
最新一版的微信開發者工具，把微信公眾號的調試開發工作也集成了進去，可以更換開發模式。
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
選擇無appid，即可在沒有appid情況下進行開發，但是無法預覽；
二 基本架構和配置文件
1.小程序架構
小程序主要由兩個部分構成，主體部分 （app）和各個頁面（page）。
類似於許多框架，主體部分主要用於核心的配置，各個頁面主要用於不同業務場景。
app，就是小程序的框架。支撐pages，邏輯層的調用，對數據，wxss，wxml的解析；
page，主要是業務層，用於實現界面化操作功能，是程序員使用頻率最高的部分。
1.1，主體部分主要由3個文件構成
三個app文件分別是app.js,app.json,app.wxss。
app.js文件是腳本文件處理一些公共的或者全局的邏輯。比如在這里定義全局變量處理登錄邏輯指定首頁等。
app.json文件是小程序的整體配置文件。我們必須要在這個文件中配置小程序是由哪些頁面組成的，我們還可以在這個文件中配置整個小程序的統一的窗口 背景色，導航條 樣式，默認標題。但是必須注意該文件不可添加任何注釋。
app.wxss文件是整個小程序的公共樣式表。我們可以在小程序子頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。也就是說在這個文件里定義的樣式在其他任何的子頁面中都可以使用。這個也是為了代碼的簡潔和整體風格的統一。
1.2，頁面由4個文件構成
小程序的所有顯示的頁面都必須以子文件夾的形式存放在pages文件夾里面，包括首頁。項目展示多少個頁面，在pages文件夾下就要新建多少個子文件夾。每個頁面的子文件夾，必須包括這四個文件：*.js , *.wxml , *.wxss 和 *.json（* 表示文件名）。這四個文件的文件名必須和子文件夾的名字一樣。
*.js文件是當前頁面腳本文件，也是業務邏輯的處理文件，當前頁面的所有和后端服務器接口的交互，請求數據的邏輯都在這個文件完成，是核心文件，必須創建。
*.wxml文件是搭建當前頁面元素的文件。負責搭建當前頁面的結構和布局，相當於網頁開發中的*.html文件，這個文件中存放一些類似於div span form input sectiond等布局代碼，必須創建。
*.wxss文件是當前頁面的樣式文件。負責調整當前頁面的樣式，元素之間的間距，字體的大小，字體顏色，背景圖等，相當於網頁開發中的css文件，需要時創建。
*.json文件是當前頁面的配置文件。配置當前頁面的窗口背景色，導航條樣式，默認標題等。
1）app.js：小程序邏輯，初始化APP
2）app.json ：小程序配置，比如導航、窗口、頁面http請求跳轉等
3）app.wxss：公共樣式配置
主體配置完成之后，就是對應的業務開發了，也就是開發者最常操作的頁面。小程序頁面設計基本上也是遵循 MVC 結構進行構建。
1）js：頁面邏輯，相當於控制層（C）；也包括部分的數據（M）
2）wxml：頁面結構展示，相當於視圖層（V）
3）wxss：頁面樣式表，純前端，用於輔助wxml展示
4）json：頁面配置，配置一些頁面展示的數據，充當部分的模型（M）
App.js
用來注冊一個小程序。在小程序啟動的時候調用，並創建小程序，直到銷毀。在整個小程序的生命周期過程中，它都是存在的。很顯然它是單例的，全局的。所以，
1）只能在app.js中注冊一次。
2）在代碼的任何地方都可以通過 getApp() 獲取這個唯一的小程序單例，
比如 var app = getApp();
App()的參數是 object 類型 {} ，指定了小程序的生命周期函數。
onLaunch 函數
監聽小程序初始化。
當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）。
onShow 函數
監聽小程序顯示。
當小程序啟動，或從后台進入前台顯示，會觸發。
onHide 函數
監聽小程序隱藏。
當小程序從前台進入后台，會觸發。
所謂前后台的定義，類似於手機上的app，比如當不在使用微信時，就進入了后台。
App.json
接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成
"pages":[
"pages/index/index",
"pages/result/result",
"pages/history/history"
],
window
用於設置小程序的狀態欄、導航條、標題、窗口背景色。
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#d13f49",
"navigationBarTitleText": "姓名測算",
"navigationBarTextStyle":"#7f8389"
},
tabBar
通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。
tabBar 配置數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。
"tabBar": {
"color": "#7f8389",
"selectedColor": "#d13d3d",
"borderStyle": "white",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"text": "姓名測算",
"iconPath": "image/ico1.png",
"selectedIconPath": "image/h_ico1.png"
},
{
"pagePath": "pages/history/history",
"text": "測算歷史",
"iconPath": "image/ico2.png",
"selectedIconPath": "image/h_ico2.png"
}
]
},
networkTimeout
可以設置各種網絡請求的超時時間。
"networkTimeout": {
"request": 180000
}
}
三 視圖預渲染
組件，小程序開發者文檔
https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="height:300px;flex-direction:column;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
Button
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
四 數據綁定
2.1 數據的綁定
<view> {{ message }} </view>
data:{
message：'Hello,world!'
}
2.2 事件（小程序是不可以操作dom的）
<button type=“primary”bindtap=“btnClick”>{{btntext}}</button>
BtnClick:function(){
console.log(“按鈕被點擊了~”)
}
2.3動態修改內容（對於data的修改，只能使用 setData()
<button type=“primary”bindtap=“btnClick”>{{btntext}}</button>
<text>{{text}}</text>
data:{
text:“這里是文本”
}
BtnClick:function(){
console.log(“按鈕被點擊了~”)
this.setData({text:“這是新的內容~”})
}
<view wx:if="{{condition}}"> </view>
2.4 渲染標簽
<view wx:if=“{{false}}”>{{text}}</view>
或者
<button type=“primary”bindtap=“btnClick”>{{btntext}}</button>
<view wx:if=“{{show}}”>{{text}}</view>
data:{
show:false
}
動態改變這個值
btnClick：function(){
var isShow = this.data.show;
console.log( “isShow:”+isShow)
this.setData({text:“這是改變后的內容…”，show:!isShow})
}
<view wx:if=“{{show }}”>{{text}}1</view>
<view wx:else >{{text}}2</view>
2.4 循環
<view wx:for=“{{news}}”>{{index}}-{{item}}</view>
data:{
news: [‘aaa’,‘bbb’,‘ccc’]
}
自己定義
<view wx:for=“{{news}}”wx:for-item=“items”wx:for-index=“ix”>{{ix}}-{{items}}</view>
動態修改數組的值
data:{
news: [‘aaa’,‘bbb’,‘ccc’]
}
btnClick：function(){
var newsdata = this.data.news;
newsdata.shift()
this.setData({news:newsdata})
}
模板template
1.例如頭部
header.html
<text>這里是頭部</text>
引入
<include src=”../template/header”/>相當於把全部內容復制過來
2.例如foot
foot.html
<template name=“foot1”>
這里是底部1
</template>
<template name=“foot2”>
這里是底部2
</template>
引入
<import src="../template/footer"/>
<template is="foot1"/>
is就相當於引入部分模塊內容
五 生命周期
用戶首次打開小程序，觸發 onLaunch（全局只觸發一次）。
小程序初始化完成后，觸發onShow方法，監聽小程序顯示。
小程序從前台進入后台，觸發 onHide方法。
小程序從后台進入前台顯示，觸發 onShow方法。
小程序后台運行一定時間，或系統資源占用過高，會被銷毀。
示例代碼：
App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do something when hide. }, onError: function(msg) { console.log(msg) }, globalData: 'I am global data'}) 
小程序提供了全局的 getApp()函數，可以獲取到小程序實例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
總結：
onLoad: 頁面加載。
1)一個頁面只會調用一次。
2)參數可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow: 頁面顯示
1)每次打開頁面都會調用一次。
onReady: 頁面初次渲染完成
1)一個頁面只會調用一次，代表頁面已經准備妥當，可以和視圖層進行交互。
2)對界面的設置如wx.setNavigationBarTitle請在onReady之后設置。
onHide: 頁面隱藏
1)當navigateTo或底部tab切換時調用。
onUnload: 頁面卸載
1)當redirectTo或navigateBack的時候調用。
六 微信小程序頁面跳轉三種方式
為了不讓用戶在使用小程序時造成困擾，微信小程序規定頁面路徑只能是五層，請盡量避免多層級的交互方式。
頁面跳轉的話就涉及到了多個頁面層級
<navigator url="../index/index" pen-type="navigate" >跳轉到新頁面</navigator>
pen-type="navigate"等價於API的 wx.navigateTo 而wx.navigateTo的url是需要跳轉的應用內非 tabBar 的頁面的路徑
保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
<navigator url="../index/index" open-type="redirect">在當前頁打開</navigator>
open-type="redirect"等價於API的 wx.redirectTo 而wx.redirectTo的url是需要跳轉的應用內非 tabBar 的頁面的路徑
<navigator url="../index/index" open-type="switchTab">切換到首頁Tab</navigator>
open-type="switchTab"等價於API的 wx.switchTab而wx.switchTab的url是需要跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
七 微信小程序傳遞數據
1.使用本地緩存的方法保存全局變量,本地緩存是有存儲限制的，所以建議手動刪除不再需要的緩存數據。
假如在A頁面保存需要的信息,如下圖就可以直接保存鍵名為cargo的數據。
var cargo={
id:'12345', count:2, name:'xx書籍', price:85, picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'};wx.setStorage({ key:"cargo", data:cargo})在B頁面直接可以使用小程序的wx.getStorage並傳入要獲取到的鍵值名就可以獲取本地緩存的數據。
wx.getStorage({
key: 'cargo', success: function(res) { console.log(res.data) } })2.通過在跳轉、重定向等轉變頁面時候，可以直接通過url來傳送數據。
在A頁面傳遞數據到B頁面中使用的時候可以直接使用以下數據。
//page A
wx.navigateTo({ url: 'test?id=1'})//or page A
wx.redirectTo({ url: 'test?id=1&title=“標題”' })//page B
Page({ onLoad: function(options){ console.log(options.id) console.log(options.title)
}})八 微信小程序分享
在頁面的js文件中定義了 onShareAppMessage 函數時，頁面可以表示改頁面可以轉發。可以在函數中設置頁面轉發的信息。
- 只有定義了該函數，小程序右上角的菜單中才會有轉發按鈕
- 用戶點擊轉發按鈕的時候會調用該函數
- 該函數內需要 return 一個 Object，Object中包含轉發的信息（可自定義轉發的內容）
onShareAppMessage: function( options ){
var that = this;
// 設置菜單中的轉發按鈕觸發轉發事件時的轉發內容
var shareObj = {
title: "轉發的標題", // 默認是小程序的名稱(可以寫slogan等)
path: '/pages/share/share', // 默認是當前頁面，必須是以‘/’開頭的完整路徑
imgUrl: '', //自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑，支持PNG及JPG，不傳入 imageUrl 則使用默認截圖。顯示圖片長寬比是 5:4
success: function(res){
// 轉發成功之后的回調
if(res.errMsg == 'shareAppMessage:ok'){
}
},
fail: function(){
// 轉發失敗之后的回調
if(res.errMsg == 'shareAppMessage:fail cancel'){
// 用戶取消轉發
}else if(res.errMsg == 'shareAppMessage:fail'){
// 轉發失敗，其中 detail message 為詳細失敗信息
}
},
complete: fucntion(){
// 轉發結束之后的回調（轉發成不成功都會執行）
}
};
// 來自頁面內的按鈕的轉發
if( options.from == 'button' ){
var eData = options.target.dataset;
console.log( eData.name ); // shareBtn
}
通過給 button 組件設置屬性 open-type="share"，可以在用戶點擊按鈕后觸發 Page.onShareAppMessage() 事件，如果當前頁面沒有定義此事件，則點擊后無效果。兼容性寫法：Page({
data: {
canIUse: wx.canIUse('button.open-type.share')
}
})
<button wx:if="{{canIUse}}" open-type="share"> 分享給好友</button>
<share-button wx:else></share-button>
data:{
canIUse: wx.canIUse('button.open-type.share'),
}
客服
<contact-button type="default-light" size="20" session-from="weapp"></contact-button>
<button wx:if="{{canIUse}}" open-type="contact">客服消息</button>
<contact -button wx:else></ contact-button>
data:{
canIUse: wx.canIUse('button.open-type. contact '),
}
2.推薦網站：小程序社區 http://www.wxapp-union.com/