一担钮、 準備工作
1橱赠、 注冊一個微信小程序
2、 微信小程序的開發(fā)工具下載地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3箫津、小程序APi文檔地址
https://developers.weixin.qq.com/miniprogram/dev/framework/
準備一個微信號
二狭姨、小程序正式開始
2.1、創(chuàng)建一個小程序項目
在微信小程序管理后臺拿到對應appid苏遥、創(chuàng)建項目
2.2饼拍、項目代碼結構
1、app.js是小程序的腳本代碼暖眼。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)惕耕、聲明全局變量纺裁。調用框架提供的豐富的 API诫肠，如本例的同步存儲及同步讀取本地數(shù)據(jù)。
2欺缘、app.json 是對整個小程序的全局配置栋豫。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色谚殊，配置導航條樣式丧鸯，配置默認標題。注意該文件不可添加任何注釋嫩絮。
3丛肢、app.wxss 是整個小程序的公共樣式表淑趾。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則奇瘦。
我在實例程序的代碼中還有2個文件夾，一個是pages,一個是utils,其中utils是放通用工具類方法的一個文件夾喂饥，pages是存放所有頁面的文件夾置尔。我們著重講一下這個pages. 在這個示例中杠步，我們有兩個頁面，index 頁面和 logs 頁面榜轿，即歡迎頁和小程序啟動日志的展示頁幽歼，他們都在 pages 目錄下。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中谬盐，且 pages 中的第一個頁面是小程序的首頁甸私。
每一個小程序頁面是由同路徑下同名的四個不同后綴文件組成的，如：index.js飞傀、index.wxml皇型、index.wxss泣刹、index.json。.js后綴的文件是腳本文件犀被，.json后綴的文件是配置文件椅您，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結構文件寡键。
2.3掀泳、JS 基本頁面配置
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
wx.stopPullDownRefresh()//停止當前頁面下拉刷新
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
},
})
2.3、認識基本json頁面配置+上拉刷新西轩、下拉加載
{
"navigationBarBackgroundColor": "#f00",//修改頂部導航欄顏色
"navigationBarTitleText": "demo頁面",//修改頂部導航欄文字
"backgroundTextStyle":"dark",//下拉 loading 的樣式员舵，僅支持 dark / light
"enablePullDownRefresh": true,//是否開啟當前頁面下拉刷新。
"onReachBottomDistance": 50,//頁面上拉觸底事件觸發(fā)時距頁面底部距離藕畔，單位為px马僻。
"usingComponents": {}//頁面自定義組件配置
}
2.4、認識wxml
<!-- blcok 它僅僅是一個包裝元素注服，不會在頁面中做任何渲染韭邓，只接受控制屬性。 -->
<block wx:if="isBlock">
<view>{{isBlock}}</view>
</block>
<block wx:else>
<view>{{isBlock}}</view>
</block>
<view></view>//塊元素
<text></text>//行內元素
<image src="圖片路徑"></image>//有默認樣式
<rich-text nodes="{{nodes}}"></rich-text>//富文本使用div span 等
Page({
data:{
isBlock:true,
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
},
children: [{
type: 'text',
text: 'Hello VIPKID的小伙伴!'
}]
}]
}
})
2.6溶弟、如何使用webView
承載網(wǎng)頁的容器女淑。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用
<web-view src="webview 指向網(wǎng)頁的鏈接辜御⊙寄悖可打開關聯(lián)的公眾號的文章，其它網(wǎng)頁需登錄小程序管理后臺配置業(yè)務域名"></web-view>
2.7擒权、小程序運行機制 （冷啟動袱巨、熱啟動、銷毀時機）
冷啟動：如果用戶首次打開碳抄，或小程序銷毀后被用戶再次打開愉老，此時小程序需要重新加載啟動，即冷啟動纳鼎。
熱啟動：如果用戶已經(jīng)打開過某小程序俺夕，然后在一定時間內再次打開該小程序，此時小程序并未被銷毀贱鄙，只是從后臺狀態(tài)進入前臺狀態(tài)劝贸，這個過程就是熱啟動。
小程序銷毀
需要注意的是：只有當小程序進入后臺一定時間逗宁，或者系統(tǒng)資源占用過高映九，才會被真正的銷毀。
當小程序進入后臺瞎颗，客戶端會維持一段時間的運行狀態(tài)件甥，超過一定時間后（目前是5分鐘）小程序會被微信主動銷毀捌议。
當小程序占用系統(tǒng)資源過高，可能會被系統(tǒng)銷毀或被微信客戶端主動回收引有。
前臺/后臺狀態(tài)
當用戶點擊右上角膠囊按鈕關閉小程序瓣颅，或者按了設備Home鍵離開微信時，小程序并沒有直接銷毀譬正，而是進入了后臺狀態(tài)宫补；當用戶再次進入微信或再次打開小程序，小程序又會從后臺進入前臺曾我。
2.8粉怕、小程序路由
wx.navigateTo
保留當前頁面，跳轉到應用內的某個頁面抒巢。但是不能跳到 tabbar 頁面贫贝。使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層蛉谜。
wx.redirectTo
關閉當前頁面稚晚，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面悦陋。
wx.reLaunch
關閉所有頁面蜈彼，打開到應用內的某個頁面筑辨。
wx.switchTab
跳轉到 tabBar 頁面俺驶，并關閉其他所有非 tabBar 頁面
wx.navigateBack
關閉當前頁面，返回上一頁面或多級頁面棍辕∧合郑可通過 getCurrentPages 獲取當前的頁面棧，決定需要返回幾層楚昭。
使用方法
//wxml里標簽跳轉
<navigator url="/pages/webView/webView?xxx=1" open-type="navigate">navigate</navigator>
<navigator url="/pages/webView/webView?xxx=1" open-type="redirect">redirect</navigator>
<navigator url="/pages/webView/webView?xxx=1" open-type="switchTab">switchTab</navigator>
<navigator url="/pages/webView/webView?xxx=1" open-type="reLaunch">reLaunch</navigator>
<navigator url="/pages/webView/webView?xxx=1" open-type="navigateBack">navigateBack</navigator>
//js 跳轉
wx.redirectTo,wx.reLaunch,wx.switchTab,wx.navigateTo({
url:'/pages/webView/webView?xxx=1'//需要跳轉的應用內非 tabBar 的頁面的路徑 (代碼包路徑), 路徑后可以帶參數(shù)栖袋。參數(shù)與路徑之間使用 ? 分隔，參數(shù)鍵與參數(shù)值用 = 相連抚太，不同參數(shù)用 & 分隔塘幅；如 'path?key=value&key2=value2'(需要跳轉的 tabBar 頁面的路徑 (代碼包路徑)（需在 app.json 的 tabBar 字段定義的頁面），路徑后不能帶參數(shù)尿贫。)
},
success: function(res) {
},
fail: function(res) {
},
complete:function(res) {
},
})
wx.navigateBack({
delta: 1// 返回的頁面數(shù)电媳，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁
})
2.9庆亡、如何發(fā)布小程序（查看開發(fā)版匾乓、體驗版本）小程序更新機制
微信查找小程序開發(fā)助手、里面會有關聯(lián)你所有小程序
找到對應的小程序查看開發(fā)版本又谋、體驗版本拼缝、線上版本娱局。有不同的入口
找到小程序公眾平臺后臺管理、版本管理進行修改開發(fā)版本咧七、體驗版衰齐、審核版本、發(fā)布版本
小程序冷啟動時继阻，如果發(fā)現(xiàn)有新版本娇斩，將會異步下載新版本的代碼包，并同時用客戶端本地的包進行啟動穴翩，即新版本的小程序需要等下一次冷啟動才會應用上犬第。
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 請求完新版本信息的回調
console.log(res.hasUpdate)
})
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已經(jīng)準備好，是否重啟應用芒帕？',
success(res) {
if (res.confirm) {
// 新的版本已經(jīng)下載好歉嗓，調用 applyUpdate 應用新版本并重啟
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新版本下載失敗
})
三、彩蛋（福利 用vue背蟆、react開發(fā)小程序）
vue也能開發(fā) 多端開發(fā)使用小程序（微信鉴分、支付寶、頭條带膀、抖音志珍、h5）框架
kbone: https://github.com/Tencent/kbone
mpvue: http://mpvue.com/#_2
uniapp: https://uniapp.dcloud.io/
taro: https://taro.aotu.io/
