首頁小程序開發正文

微信小程序開發文檔介紹（微信小程序開發文檔介紹怎麽寫）

小程序開發 2023-02-10T14:42:09 2466

本篇文章(zhāng)給大家談談微信小程序開發文檔介紹，以及微信小程序開發文檔介紹怎麽寫對應的(de)知識點，希望對各位有(yǒu)所幫助，不要忘了收藏本站喔。本文目錄一(yī)覽： 1、微信小程序怎麽開發微信小程序開發教程分享

本篇文章(zhāng)給大家談談微信小程序開發文檔介紹，以及微信小程序開發文檔介紹怎麽寫對應的(de)知識點，希望對各位有(yǒu)所幫助，不要忘了收藏本站喔。

本文目錄一(yī)覽：

1、微信小程序怎麽開發微信小程序開發教程分享
2、微信小程序開發入門pdf
3、微信小程序怎麽開發
4、如(rú)何快速開發個微信小程序
5、微信小程序如(rú)何開發
6、微信小程序開發文檔，微信小程序怎麽開發

微信小程序怎麽開發微信小程序開發教程分享

微信應用号（小程序，「應用号」的(de)新稱呼）終于來了！

目前還處于內(nèi)測階段，微信隻邀請了部分企業參與封測。想必大家都關心應用号的(de)最終形态到底是什麽樣子(zǐ)？怎樣将一(yī)個「服務号」改造成為(wèi)「小程序」？

我(wǒ)們(men)暫時以一(yī)款簡單的(de)第三方工具的(de)實例，來演示一(yī)下開發過程吧(ba)。

序言

開始開發應用号之前，先看看官方公布的(de)「小程序」教程吧(ba)！（以下內(nèi)容來自(zì)微信官方公布的(de)「小程序」開發指南）

本文檔将帶你一(yī)步步創建完成一(yī)個微信小程序，并可(kě)以在手機(jī)上體驗該小程序的(de)實際效果。這個小程序的(de)首頁将會顯示歡迎語以及當前用戶的(de)微信頭像，點擊頭像，可(kě)以在新開的(de)頁面中查看當前小程序的(de)啓動日志。

1. 獲取微信小程序的(de) AppID

首先，我(wǒ)們(men)需要擁有(yǒu)一(yī)個帳号，如(rú)果你能看到該文檔，我(wǒ)們(men)應當已經邀請并為(wèi)你創建好一(yī)個帳号。注意不可(kě)直接使用服務号或訂閱号的(de) AppID。利用提供的(de)帳号，登錄，就可(kě)以在網站的(de)「設置」-「開發者設置」中，查看到微信小程序的(de) AppID 了。

注意：如(rú)果我(wǒ)們(men)不是用注冊時綁定的(de)管理(lǐ)員微信号，在手機(jī)上體驗該小程序。那麽我(wǒ)們(men)還需要操作「綁定開發者」。即在「用戶身份-開發者」模塊，綁定上需要體驗該小程序的(de)微信号。本教程默認注冊帳号、體驗都是使用管理(lǐ)員微信号。

2. 創建項目

我(wǒ)們(men)需要通過開發者工具，來完成小程序創建和(hé)代碼編輯。

開發者工具安裝完成後，打開并使用微信掃碼登錄。選擇創建「項目」，填入上文獲取到的(de) AppID，設置一(yī)個本地(dì)項目的(de)名稱（非小程序名稱），比如(rú)「我(wǒ)的(de)第一(yī)個項目」，并選擇一(yī)個本地(dì)的(de)文件夾作為(wèi)代碼存儲的(de)目錄，點擊「新建項目」就可(kě)以了。

為(wèi)方便初學(xué)者了解微信小程序的(de)基本代碼結構，在創建過程中，如(rú)果選擇的(de)本地(dì)文件夾是個空文件夾，開發者工具會提示，是否需要創建一(yī)個 quick start 項目。選擇「是」，開發者工具會幫助我(wǒ)們(men)在開發目錄裏生成一(yī)個簡單的(de) demo。

項目創建成功後，我(wǒ)們(men)就可(kě)以點擊該項目，進入并看到完整的(de)開發者工具界面，點擊左側導航，在「編輯」裏可(kě)以查看和(hé)編輯我(wǒ)們(men)的(de)代碼，在「調試」裏可(kě)以測試代碼并模拟小程序在微信客戶端效果，在「項目」裏可(kě)以發送到手機(jī)裏預覽實際效果。

3. 編寫代碼

點擊開發者工具左側導航的(de)「編輯」，我(wǒ)們(men)可(kě)以看到這個項目，已經初始化并包含了一(yī)些簡單的(de)代碼文件。最關鍵也是必不可(kě)少的(de)，是 app.js、app.json、app.wxss 這三個。其中，.js 後綴的(de)是腳本文件，.json 後綴的(de)文件是配置文件，.wxss 後綴的(de)是樣式表文件。微信小程序會讀取這些文件，并生成小程序實例。

下面我(wǒ)們(men)簡單了解這三個文件的(de)功能，方便修改以及從頭開發自(zì)己的(de)微信小程序。

app.js 是小程序的(de)腳本代碼。我(wǒ)們(men)可(kě)以在這個文件中監聽并處理(lǐ)小程序的(de)生命周期函數、聲明全局變量。調用 MINA 提供的(de)豐富的(de) API，如(rú)本例的(de)同步存儲及同步讀取本地(dì)數據。

//app.js App({

onLaunch: function () { //調用API從本地(dì)緩存中獲取數據 var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == "function" cb(this.globalData.userInfo)

}else{ //調用登錄接口 wx.login({

success: function () {

wx.getUserInfo({

success: function (res) {

that.globalData.userInfo = res.userInfo; typeof cb == "function" cb(that.globalData.userInfo)

}

})

}

});

}

globalData:{

userInfo:null }

})

app.json 是對整個小程序的(de)全局配置。我(wǒ)們(men)可(kě)以在這個文件中配置小程序是由哪些頁面組成，配置小程序的(de)窗口背景色，配置導航條樣式，配置默認标題。注意該文件不可(kě)添加任何注釋。

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }

}

app.wxss 是整個小程序的(de)公共樣式表。我(wǒ)們(men)可(kě)以在頁面組件的(de)class屬性上直接使用app.wxss中聲明的(de)樣式規則。

/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;

}

3. 創建頁面

在這個教程裏，我(wǒ)們(men)有(yǒu)兩個頁面，index 頁面和(hé) logs 頁面，即歡迎頁和(hé)小程序啓動日志的(de)展示頁，他們(men)都在 pages 目錄下。微信小程序中的(de)每一(yī)個頁面的(de)【路徑+頁面名】都需要寫在 app.json 的(de) pages 中，且 pages 中的(de)第一(yī)個頁面是小程序的(de)首頁。

每一(yī)個小程序頁面是由同路徑下同名的(de)四個不同後綴文件的(de)組成，如(rú)：index.js、index.wxml、index.wxss、index.json。.js 後綴的(de)文件是腳本文件，.json 後綴的(de)文件是配置文件，.wxss 後綴的(de)是樣式表文件，.wxml 後綴的(de)文件是頁面結構文件。

index.wxml是頁面的(de)結構文件：

view class="54cc5873b851f226 container" view bindtap="bindViewTap" class="5873b851f2265407 userinfo" image class="b851f2265407e733 userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover" image text class="79645a69130ec9ba userinfo-nickname"{{userInfo.nickName}} text view view class="5a69130ec9bad4bd usermotto" text class="130ec9bad4bd89e1 user-motto"{{motto}} text view view

本例中使用了、、來搭建頁面結構，綁定數據和(hé)交互處理(lǐ)函數。

index.js 是頁面的(de)腳本文件，在這個文件中我(wǒ)們(men)可(kě)以監聽并處理(lǐ)頁面的(de)生命周期函數、獲取小程序實例，聲明并處理(lǐ)數據，響應頁面交互事件等。

//index.js //獲取應用實例 var app = getApp()

Page({

data: {

motto: 'Hello World',

userInfo: {}

}, //事件處理(lǐ)函數 bindViewTap: function() {

wx.navigateTo({

url: '../logs/logs' })

onLoad: function () { console.log('onLoad') var that = this //調用應用實例的(de)方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({

userInfo:userInfo

})

}

})

index.wxss是頁面的(de)樣式表：

/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center;

} .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;

} .userinfo-nickname { color: #aaa;

} .usermotto { margin-top: 200px;

}

頁面的(de)樣式表是非必要的(de)。當有(yǒu)頁面樣式表時，頁面的(de)樣式表中的(de)樣式規則會層疊覆蓋 app.wxss 中的(de)樣式規則。如(rú)果不指定頁面的(de)樣式表，也可(kě)以在頁面的(de)結構文件中直接使用 app.wxss 中指定的(de)樣式規則。

index.json是頁面的(de)配置文件：

頁面的(de)配置文件是非必要的(de)。當有(yǒu)頁面的(de)配置文件時，配置項在該頁面會覆蓋 app.json 的(de) window 中相同的(de)配置項。如(rú)果沒有(yǒu)指定的(de)頁面配置文件，則在該頁面直接使用 app.json 中的(de)默認配置。

logs的(de)頁面結構

view class="c9bad4bd89e16568 container log-list" block wx:for-items="{{logs}}" wx:for-item="log" text class="d4bd89e1656800d9 log-item"{{index + 1}}. {{log}} text block view

logs 頁面使用控制标簽來組織代碼，在上使用 wx:for-items 綁定 logs 數據，并将 logs 數據循環展開節點

//logs.js var util = require('../../utils/util.js')

Page({

data: {

logs: []

onLoad: function () { this.setData({

logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log))

})

}

})

運行(xíng)結果如(rú)下：

4. 手機(jī)預覽

開發者工具左側菜單欄選擇「項目」，點擊「預覽」，掃碼後即可(kě)在微信客戶端中體驗。

目前，預覽和(hé)上傳功能尚無法實現，需要等待微信官方的(de)下一(yī)步更新。

如(rú)你所見，微信官方給出的(de)開發指南還非常簡單，很多細節、代碼和(hé)功能都沒有(yǒu)明确的(de)展示，所以接下來就到展示實力的(de)時候啦！開發教程正式開始！

第一(yī)章(zhāng)：準備工作

做(zuò)好準備工作很重要。開發一(yī)個微信應用号，你需要提前到微信的(de)官方網站（weixin.qq.com）下載開發者工具。

1. 下載最新微信開發者工具，打開後你會看到該界面：

2. 點擊「新建 web+」項目，随後出現如(rú)下畫面：

3. 該頁面內(nèi)的(de)各項內(nèi)容需要注意——

AppID：依照官方解釋來填。

Appname: 項目最外層文件夾名稱，如(rú)你将其命名為(wèi)「ABC」，則之後的(de)全部項目內(nèi)容均将保存在「/ABC/…」目錄下。

本地(dì)開發目錄：項目存放在本地(dì)的(de)目錄。

注：再次強調，如(rú)果你和(hé)團隊成員共同開發該項目，則建議你們(men)使用同樣的(de)目錄名稱及本地(dì)目錄，以确保協同開發的(de)統一(yī)性。如(rú)果你之前已有(yǒu)項目，則導入過程與以上內(nèi)容近似，不再贅述。

4. 準備工作全部完成後，點擊「新建項目」按鈕，彈出框點「确定」。

5. 如(rú)上圖所示，此刻，微信開發者工具已經為(wèi)你自(zì)動構建了一(yī)個初始的(de) demo 項目，該項目內(nèi)包含了一(yī)個微信應用項目所需具備的(de)基本內(nèi)容和(hé)框架結構。點擊項目名稱（圖中即「cards」）進入該項目，就能看到整個項目的(de)基本架構了：

第二章(zhāng)：項目構架

微信目前用戶群體非常龐大，微信推出公衆号以後，火爆程度大家都看得到，也同樣推動着 Html 5 的(de)高(gāo)速發展，随着公衆号業務的(de)需求越來越複雜，應用号現在的(de)到來也是恰到好處。

我(wǒ)們(men)發現，微信提供給開發者的(de)方式也在發生全面的(de)改變：從操作 DOM 轉為(wèi)操作數據，基于微信提供的(de)一(yī)個過橋工具實現很多 Html 5 在公衆号很難實現的(de)功能，有(yǒu)點類似于 hybrid 開發，不同于 hybrid 開發的(de)方式是：微信開放的(de)接口更為(wèi)嚴謹，結構必須采用他提供給的(de)組件，外部的(de)框架和(hé)插件都不能在這裏使用上，讓開發者完全脫離(lí)操作 DOM，開發思想轉變很大。

工欲善其事，必先利其器。理(lǐ)解它的(de)核心功能非常重要，先了解它的(de)整個運作流程。

生命周期：

在index.js裏面：

開發者工具上 Console 可(kě)以看到：

在首頁 console 可(kě)以看出順序是 App Launch--App Show--onLoad--onShow--onReady。

首先是整個 app 的(de)啓動與顯示，app 的(de)啓動在 app.js 裏面可(kě)以配置，其次再進入到各個頁面的(de)加載顯示等等。

可(kě)以想象到這裏可(kě)以處理(lǐ)很多東西了，如(rú)加載框之類的(de)都可(kě)以實現等等。

路由：

路由在項目開發中一(yī)直是個核心點，在這裏其實微信對路由的(de)介紹很少，可(kě)見微信在路由方面經過很好的(de)封裝，也提供三個跳轉方法。

wx.navigateTo(OBJECT)：保留當前頁面，跳轉到應用內(nèi)的(de)某個頁面，使用wx.navigateBack可(kě)以返回到原頁面。

wx.redirectTo(OBJECT)：關閉當前頁面，跳轉到應用內(nèi)的(de)某個頁面。

wx.navigateBack()：關閉當前頁面，回退前一(yī)頁面。

這三個基本上使用足夠，在路由方面微信封裝的(de)很好，開發者根本不用去(qù)配置路由，往往很多框架在路由方面配置很繁瑣。

組件：

此次微信在組件提供方面也是非常全面，基本上滿足項目需求，故而開發速度非常快，開發前可(kě)以認真浏覽幾次，開發效率會很好。

其它：

任何外部框架以及插件基本上無法使用，就算原生的(de) js 插件也很難使用，因為(wèi)以前的(de) js 插件也基本上全部是一(yī)操作 dom 的(de)形式存在，而微信應用号此次的(de)架構是不允許操作任何 dom，就連以前開發者們(men)習慣使用的(de)動态設置的(de)rem.js也是不支持的(de)。

此次微信還提供了 WebSocket，就可(kě)以直接利用它做(zuò)聊天，可(kě)以開發的(de)空間非常大。

跟公衆号對比發現，開發應用号組件化，結構化，多樣化。新大陸總是充滿着驚喜，更多的(de)彩蛋等着大家來發現。

接下來開始搞一(yī)些簡單的(de)代碼了！

1. 找到項目文件夾，導入你的(de)編輯器裏面。在這裏，我(wǒ)們(men)使用了 Sublime Text 編輯器。你可(kě)以根據自(zì)己的(de)開發習慣選擇自(zì)己喜歡的(de)編輯器。

2. 接下來，你需要根據自(zì)己的(de)項目內(nèi)容調整項目結構。在範例項目中，「card_course」目錄下面主要包含了「tabBar」頁面以及該應用的(de)一(yī)些配置文件。

3. 示例項目的(de)「tabBar」是五個菜單按鈕：

4. 找到「app.json」文件，用來配置這個五個菜單。在代碼行(xíng)中找到「tabBar」：

你可(kě)以根據實際項目需求更改，其中：

「Color」是底部字體顔色，「selectedColor」是切換到該頁面高(gāo)亮(liàng)顔色，「borderStyle」是切換菜單上面的(de)一(yī)條線的(de)顔色，「backgroundColor」是底部菜單欄背景顔色。文字描述較為(wèi)抽象，建議你一(yī)一(yī)調試并查看其效果，加深印象。

「list」下的(de)代碼順序必須依次放置，不能随便更改。

「pagePath」之後的(de)文件名內(nèi)，「.wxml」後綴被隐藏起來了，這是微信開發代碼中人性化的(de)一(yī)點——幫你節約寫代碼的(de)時間，無須頻繁聲明文件後綴。

「iconPath」為(wèi)未獲得顯示頁面的(de)圖标路徑，這兩個路徑可(kě)以直接是網絡圖标。

「selectedIconPath」為(wèi)當前顯示頁面高(gāo)亮(liàng)圖标路徑，可(kě)以去(qù)掉，去(qù)掉之後會默認顯示為(wèi)「iconPath」的(de)圖标。

「Text」為(wèi)頁面标題，也可(kě)以去(qù)掉，去(qù)掉之後純顯示圖标，如(rú)隻去(qù)掉其中一(yī)個，該位置會被占用。

注意：微信的(de)底部菜單最多支持五欄（五個 icons），所以在你設計微信應用的(de) UI 和(hé)基本架構時就要預先考慮好菜單欄的(de)排布。

5. 根據以上代碼規則，我(wǒ)們(men)做(zuò)好了示例項目的(de)基本架構，供你參考：

6. 「Json」文件配置好後，「card_course」的(de)基本結構入上圖所示，不需要的(de)子(zǐ)集都可(kě)以暫時删除，缺少的(de)子(zǐ)集則需要你主動新建。删除子(zǐ)集時記得順帶檢查一(yī)下「app.json」裏的(de)相關內(nèi)容是否已經一(yī)并删除。

注意：個人建議你新建一(yī)個「wxml」文件的(de)同時，把對應的(de)「js」和(hé)「wxss」文件一(yī)起新建好，因為(wèi)微信應用号的(de)配置特點就是解析到一(yī)個「wxml」文件時，會同時在同級目錄下找到同文件名的(de)「js」和(hé)「wxss」文件，所以「js」文件需及時在「app.json」裏預先配置好。

編寫「wxml」時，根據微信應用号提供的(de)接口編碼即可(kě)，大部分就是以前的(de)「div」，而現在就用「view」即可(kě)。需要用其它子(zǐ)集時，可(kě)以根據微信提供的(de)接口酌情選擇。

使用「class」名來設置樣式，「id」名在這裏基本沒有(yǒu)什麽用處。主要操作數據，不操作「dom」。

7. 以上是示例項目首頁的(de)「wxml」編碼。從圖中就可(kě)以看出，實現一(yī)個頁面代碼量非常少。

8. 「Wxss」文件是引入的(de)樣式文件，你也可(kě)以直接在裏面寫樣式，示例中采用的(de)是引入方式：

9. 修改代碼後刷新一(yī)次，可(kě)以看到未設背景的(de)「view」标簽直接變成了粉色。

注意：修改「wxml」和(hé)「wxss」下的(de)內(nèi)容後，直接 F5 刷新就能直接看到效果，修改「js」則需點擊重啓按鈕才能看到效果。

10. 另外，公共樣式可(kě)以在「app.wxss」裏直接引用。

11. 「Js」文件需要在「app.json」文件的(de)「page」裏預先配置好。為(wèi)了項目結構清晰化，在示例項目中的(de)「index」首頁同級目錄新建其它四個頁面文件，具體如(rú)下：

經過以上步驟，案例中的(de)五個底部菜單就全部配置完畢了。

如(rú)果你要入門的(de)話，首先要掌握 js、html、css 知識。

然後可(kě)以通過查看微信公衆平台中的(de)微信小程序開發教程來大概了解微信小程序的(de)開發方式和(hé)調試方式，官方的(de)介紹還是比較簡單易懂的(de)。

另外可(kě)以通過入門級的(de)帖子(zǐ) 來了解具體開發流程。

以上~~

希望能給你一(yī)些幫助，希望采納·

微信小程序開發入門pdf

1. 微信小程序入門知識(零基礎學(xué)習微信小程序開發,之前需要學(xué)習哪些知識,謝謝)

微信小程序入門知識(零基礎學(xué)習微信小程序開發,之前需要學(xué)習哪些知識,謝謝) 1.零基礎學(xué)習微信小程序開發,之前需要學(xué)習哪些知識,謝謝

非計算機(jī)基礎不建議學(xué)習，因為(wèi)等你學(xué)會了，兩年(nián)時間也過去(qù)了。

1、微信官方為(wèi)小程序提供了大量的(de)接口api，開發小程序需要有(yǒu)基本的(de)Javascript,HTML,CSS的(de)基礎。

2、小程序開發，常見使用“MINA”框架

Apache Mina Server 是一(yī)個網絡通信應用框架，也就是說，它主要是對基于TCP/IP、UDP/IP協議棧的(de)通信框架（當然，也可(kě)以提供JAVA 對象的(de)序列化服務、虛拟機(jī)管道(dào)通信服務等），Mina 可(kě)以幫助我(wǒ)們(men)快速開發高(gāo)性能、高(gāo)擴展性的(de)網絡通信應用，Mina 提供了事件驅動、異步（Mina 的(de)異步IO 默認使用的(de)是JAVA NIO 作為(wèi)底層支持）操作的(de)編程模型。

這個框架為(wèi)微信小程序的(de)運行(xíng)提供了豐富的(de)組件和(hé)API。要學(xué)會和(hé)掌握小程序的(de)框架結構、數據綁定機(jī)制、模闆、數據緩存、常用組件和(hé)API等相關知識。

2.小程序應該如(rú)何入門,初學(xué)者應該掌握哪些基本知識

一(yī)、創建第一(yī)個小程序，快速啓動模闆創建小程序前，先花點時間了解小程序開發官方教程 1、我(wǒ)們(men)要注冊一(yī)個小程序開發賬号，獲取小程序開發appID; 2、需要下載開發工具； 3、創建一(yī)個空白小程序，假設項目名稱為(wèi)demo1：“快速啓動模闆”，裏面包含微信頭像獲取，日志等； 4、了解小程序的(de)項目結構，各文件構成； 5、也是最關鍵的(de)，徹底搞明白demo1的(de)wxml,wxss和(hé)js代碼，了解頁面如(rú)何跳轉，事件如(rú)何觸發，WXML如(rú)何編寫，api如(rú)何調用等。

二、體驗小程序1、先體驗官方的(de)小程序示例，可(kě)以微信掃描二維碼，或者發現--小程序--搜小程序示例，獲取體驗小程序。該示例包括了常用組件功能演示。

2、多多體驗三方小程序三、嘗試編寫自(zì)己的(de)第一(yī)個小程序一(yī)個原則，功能盡量簡單，但是盡可(kě)能多用組件，如(rú)：input,text,map,picker等。四、查漏補缺。

3.如(rú)何入門微信小程序開發,有(yǒu)哪些學(xué)習資料

您好，

微信小程序”開發之前必須要完成和(hé)注冊認證。如(rú)果是個人或者小公司想開發微信小程序，也可(kě)以找微信認證第三方開發商(shāng)，比如(rú)赢在移動、正品科(kē)技等。

1、微信小程序注冊

在微信公衆平台官網首頁，按照提示點擊右上角的(de)“立即注冊”按鈕，裏面總過有(yǒu)12步，按照要求提交就可(kě)以了。

2、小程序申請微信認證

*** 、媒體、其他組織類型帳号，必須通過微信認證驗證主體身份。企業類型帳号，可(kě)以根據需要确定是否申請微信認證。已認證帳号可(kě)使用微信支付、微信卡券等高(gāo)級權限。

認證入口：登錄小程序—設置—基本設置—微信認證—詳情

3、小程序申請微信支付

已認證的(de)小程序可(kě)申請微信支付。

4、小程序綁定微信開放平台帳号

小程序綁定微信開放平台帳号後，可(kě)與帳号下的(de)其他移動應用、網站應用及公衆号打通，通過UnionID機(jī)制滿足在多個應用和(hé)公衆号之間統一(yī)用戶帳号的(de)需求。

UnionID機(jī)制說明：如(rú)果開發者擁有(yǒu)多個移動應用、網站應用、和(hé)公衆帳号（包括小程序），可(kě)通過UnionID來區分用戶的(de)唯一(yī)性，因為(wèi)隻要是同一(yī)個微信開放平台帳号下的(de)移動應用、網站應用和(hé)公衆帳号（包括小程序），用戶的(de)unionid是唯一(yī)的(de)。換句話說，同一(yī)用戶，對同一(yī)個微信開放平台下的(de)不同應用，UnionID是相同的(de)。用戶的(de)UnionID可(kě)通過調用“獲取用戶信息”接口獲取。

5、了解“獲取用戶信息”接口請查看開發文檔—API—開放接口—用戶信息。

綁定小程序流程說明：登錄微信開放平台、—管理(lǐ)中心—公衆帳号—綁定公衆帳号

注意：微信開放平台帳号必須完成開發者資質認證才可(kě)以綁定小程序。

微信小程序開發文檔介紹（微信小程序開發文檔介紹怎麽寫）

微信小程序怎麽開發

微信版本升級後，打開微信，點擊底部的(de)“發現”這個菜單項，就會發現升級後的(de)“發現”菜單裏，增加了“小程序”這樣一(yī)個功能。

2.點擊打開小程序後，可(kě)以看到有(yǒu)附近的(de)小程序和(hé)我(wǒ)的(de)小程序，附近的(de)小程序是所在定位周邊的(de)小程序。

下面的(de)小程序列表可(kě)以看到的(de)是我(wǒ)們(men)之前打開過的(de)一(yī)些小程序，如(rú)果有(yǒu)自(zì)己覺得很好用的(de)小程序就可(kě)以點擊左上角，添加到我(wǒ)的(de)小程序裏面。

3.微信小程序還有(yǒu)具有(yǒu)搜索功能，打開搜索頁面可(kě)以輸入想要找的(de)小程序。

如(rú)何快速開發個微信小程序

無論是前端開發，還是後端開發，時間長(cháng)了，你總會能總結出它的(de)一(yī)些規律的(de)，對于前端開發主要就兩條，頁面展現，邏輯處理(lǐ)。如(rú)果是全流程開發的(de)話，那就是，如(rú)何創建項目，頁面如(rú)何實現，數據獲取和(hé)邏輯處理(lǐ)如(rú)何實現，如(rú)何打包上線。移動端或者前端，基本開發流程就這個四個步驟。所以在在前端方面去(qù)學(xué)習新一(yī)門開發技術，隻要你解決了這四個問題，那一(yī)切就OK了，下面我(wǒ)就講一(yī)下，我(wǒ)在學(xué)習微信小程序開發，如(rú)何用這四步法快速上手開發的(de)

學(xué)習一(yī)門新技術先看下它的(de)開發文檔小程序介紹

然後呢(ne)就是開始一(yī)些準備的(de)步驟，微信公衆平台提供我(wǒ)們(men)開發管理(lǐ)的(de)功能微信工作平台

賬号注冊

小程序信息配置

請看小程序開發步驟

小程序項目的(de)創建

到此第一(yī)個問題我(wǒ)們(men)就算完成了，接下來解決小程序界面如(rú)何搭建。

然後最重要的(de)，微信提供自(zì)己的(de)開發者工具，不需要用chrome什麽調試，微信開發者工具提供wxapi的(de)調用測試能力，這些在chrome裏面是測試不了的(de)

框架的(de)視(shì)圖層由 WXML 與 WXSS 編寫，由組件來進行(xíng)展示。

将邏輯層的(de)數據反應成視(shì)圖，同時将視(shì)圖層的(de)事件發送給邏輯層。

WXML(WeiXin Markup language) 用于描述頁面的(de)結構。

WXS(WeiXin Script) 是小程序的(de)一(yī)套腳本語言，結合 WXML，可(kě)以構建出頁面的(de)結構。

WXSS(WeiXin Style Sheet) 用于描述頁面的(de)樣式。

小程序的(de)頁面是由wxml 和(hé)wxss這兩個文件來實現的(de)，wxml結構如(rú)何寫請參考微信小程序組件

wxss是負責樣式控制的(de)，基本類似于css,支持flex布局，所以要想上手構建微信小程序的(de)界面，最好要熟悉html ,css.

還有(yǒu)最重要的(de)就是生命周期了

//index.js

Page({

data: {

text: "This is page data."

onLoad: function(options) {

// 頁面創建時執行(xíng)

onShow: function() {

// 頁面出現在前台時執行(xíng)

onReady: function() {

// 頁面首次渲染完畢時執行(xíng)

onHide: function() {

// 頁面從前台變為(wèi)後台時執行(xíng)

onUnload: function() {

// 頁面銷毀時執行(xíng)

onPullDownRefresh: function() {

// 觸發下拉刷新時執行(xíng)

onReachBottom: function() {

// 頁面觸底時執行(xíng)

onShareAppMessage: function () {

// 頁面被用戶分享時執行(xíng)

onPageScroll: function() {

// 頁面滾動時執行(xíng)

onResize: function() {

// 頁面尺寸變化時執行(xíng)

onTabItemTap(item) {

// tab 點擊時執行(xíng)

console.log(item.index)

console.log(item.pagePath)

console.log(item.text)

// 事件響應函數

viewTap: function() {

this.setData({

text: 'Set some data for updating view.'

}, function() {

// this is setData callback

})

// 自(zì)由數據

customData: {

hi: 'MINA'

}

})

微信提供的(de)界面組件很多，沒必要一(yī)下子(zǐ)全學(xué)會，會用一(yī)兩個就行(xíng)，其他的(de)遇到需要的(de)時候現查先做(zuò)，這樣又節約學(xué)習時間，又能夠加深理(lǐ)解。到此第二個問題我(wǒ)們(men)解決了，下面看第三個問題，數據邏輯如(rú)何處理(lǐ)。

數據定義

數據展現

邏輯處理(lǐ)是通過js文件來操作的(de)

一(yī)個服務僅僅隻有(yǒu)界面展示是不夠的(de)，還需要和(hé)用戶做(zuò)交互：響應用戶的(de)點擊、獲取用戶的(de)位置等等。在小程序裏邊，我(wǒ)們(men)就通過編寫 JS 腳本文件來處理(lǐ)用戶的(de)操作。

view{{ msg }}/view

button bindtap="clickMe"點擊我(wǒ)/button

點擊 button 按鈕的(de)時候，我(wǒ)們(men)希望把界面上 msg 顯示成 "Hello World"，于是我(wǒ)們(men)在 button 上聲明一(yī)個屬性: bindtap ，在 JS 文件裏邊聲明了 clickMe 方法來響應這次點擊操作：

Page({

clickMe: function() {

this.setData({ msg: "Hello World" })

}

})

響應用戶的(de)操作就是這麽簡單，更詳細的(de)事件可(kě)以參考文檔 WXML - 事件。

此外你還可(kě)以在 JS 中調用小程序提供的(de)豐富的(de) API，利用這些 API 可(kě)以很方便的(de)調起微信提供的(de)能力，例如(rú)獲取用戶信息、本地(dì)存儲、微信支付等。在前邊的(de) QuickStart 例子(zǐ)中，在 pages/index/index.js 就調用了 wx.getUserInfo 獲取微信用戶的(de)頭像和(hé)昵稱，最後通過 setData 把獲取到的(de)信息顯示到界面上。更多 API 可(kě)以參考文檔小程序的(de)API 。

現在幾乎每個應用都需要從後端獲取數據，那麽小程序如(rú)何獲取呢(ne)，當然是通過網路操作了。我(wǒ)們(men)封裝了小程序的(de)網絡操作

const app = getApp()

const request = (url, options) = {

return new Promise((resolve, reject) = {

wx.request({

url: `${app.globalData.host}${url}`,

method: options.method,

data: options.method === 'GET' ? options.data : JSON.stringify(options.data),

header: {

'Content-Type': 'application/json; charset=UTF-8'

// 'x-token': 'x-token' // 看自(zì)己是否需要

success(request) {

if (request.data.error_code === 0) {

resolve(request.data)

} else {

reject(request.data)

}

fail(error) {

reject(error.data)

}

})

}

const gets = (url, options = {}) = {

return request(url, { method: 'GET', data: options })

}

const post = (url, options) = {

return request(url, { method: 'POST', data: options })

}

const put = (url, options) = {

return request(url, { method: 'PUT', data: options })

}

// 不能聲明DELETE（關鍵字）

const remove = (url, options) = {

return request(url, { method: 'DELETE', data: options })

}

module.exports = {

gets,

post,

put,

remove

}

如(rú)何使用請看下圖

數據獲取

數據展現如(rú)下圖

數據展現

到此，第三個問題我(wǒ)們(men)就解決的(de)了下面看第四個問題。

小程序發布文檔說明

小程序發布步驟

到此四個問題都解決了。

總結：本文內(nèi)容是很簡單的(de)，借用了大部分官方文檔，其實本文目的(de)不是教你學(xué)小程序開發，而是分享一(yī)下在學(xué)習一(yī)項新事物我(wǒ)的(de)方法和(hé)思路，互聯網技術變化是很快的(de)，我(wǒ)覺得一(yī)個人的(de)能力，不僅僅是你技術有(yǒu)多好，你要明白技術是用來幹什麽的(de)，技術是用來解決現實生活中的(de)問題的(de)，一(yī)個好的(de)程序員，不是技術能力，而是解決問題的(de)能力，解決問題不可(kě)能隻用一(yī)種技術，這就要求你的(de)學(xué)習能力要強，針對不同的(de)問題，使用不同的(de)技術，哪怕使用的(de)技術你不熟悉，但它是解決問題最好的(de)方法，那就要求你有(yǒu)快速學(xué)習并解決問題的(de)能力。

學(xué)習一(yī)項新技術，我(wǒ)們(men)要先抓住主線，把流程搞通了，以後再在工作中慢慢的(de)熟悉和(hé)豐富對它細節的(de)一(yī)些認知，所以學(xué)一(yī)項東西前多問自(zì)己幾個問題，我(wǒ)學(xué)什麽，我(wǒ)為(wèi)什麽學(xué)，我(wǒ)怎麽學(xué)，等。先思考後學(xué)習，一(yī)定會讓你事半功倍。

對于怎麽學(xué)習微信小程序開發，我(wǒ)問了自(zì)己上面的(de)四個問題，每個問題，我(wǒ)隻需要了解大體內(nèi)容，四個問題都解決了，然後整個流程也就通了，以後也就是慢慢的(de)對每個問題內(nèi)容的(de)細節慢慢的(de)熟悉和(hé)了解了，其實花了不到一(yī)下午的(de)時間，我(wǒ)就搞出了一(yī)個簡單的(de)demo出來了，了解的(de)內(nèi)容基本已經覆蓋微信小程序日常開發80%的(de)內(nèi)容了。以上就是我(wǒ)的(de)一(yī)點學(xué)習心得。

最後小程序Demo

Demo截圖

首頁

我(wǒ)的(de)

點擊我(wǒ)的(de)任意條目，數據是從第三方聚合平台提供的(de)api獲取的(de)

最後目前有(yǒu)很多的(de)多端開發框架，背景大多是都是因為(wèi)小程序開發的(de)盛行(xíng)

其他還有(yǒu)很多例如(rú)

阿裏的(de)rax

我(wǒ)們(men)自(zì)己的(de)ditto

微信小程序如(rú)何開發

微信小程序的(de)優勢十分明顯，小程序是不需要下載安裝便可(kě)以使用的(de)應用，它實現了應用觸手可(kě)及的(de)夢想，用戶掃一(yī)掃或搜一(yī)下即可(kě)打開應用，也體現了用完即走的(de)理(lǐ)念，用戶不用關心是否安裝太多應用的(de)問題，應用将無處不在，随時可(kě)用，但又無需安裝卸載。

小程序觸及了PC網頁，公衆号，H5，APP無法觸及的(de)地(dì) 方，其無需安裝，用完即走的(de)理(lǐ)念能夠滿足用戶需求且節省手機(jī)內(nèi)存。站在小程序的(de)擁有(yǒu)者的(de)立場，其開發成本大大減小，同時可(kě)借助微信強大的(de)流量入口，因而也降低(dī)了推廣的(de)難度。總的(de)來說，微信小程序是一(yī)種全新的(de)方式，能夠更好地(dì)在用戶和(hé)服務中建立連接，并且可(kě)以在微信中便捷地(dì)獲取和(hé)傳播，具有(yǒu)不錯的(de)使用體驗。

小程序全面開放申請以後，作為(wèi)企業、政府、媒體、其他組織或者個人的(de)開發者，都可(kě)以申請并注冊小程序。小程序和(hé)微信的(de)訂閱号、服務号以及企業号是并行(xíng)的(de)體系，具有(yǒu)獨立的(de)注冊以及發布流程。

小程序的(de)接入主要有(yǒu)4個步驟：

(1) 小程序注冊：在微信公衆平台官網首頁注冊并提交注冊信息、完善主體信息和(hé)管理(lǐ) 員信息。

(2) 完善小程序信息：完善小程序的(de)基本信息如(rú)名稱、頭像及服務範圍等。開發前需綁定開發者并獲取APP ID，以保證程序可(kě)以通過手機(jī)進行(xíng)掃碼測試。

(3) 開發小程序：下載安裝微信開發者工具，微信官方提供了一(yī)套完整的(de)開發框架，開發者可(kě)以根據微信開發文檔進行(xíng)小程序的(de)開發與調試。

(4) 代碼審核及發布：小程序開發完成後，不能夠直接發布，需提交代碼與開發配置信息提交審核，完成後尚可(kě)發布。

微信Web開發者工具區别于H5的(de)開發工具+浏覽器 Device Mode預覽的(de)模式，而是基于自(zì)己的(de)開發者工具，可(kě)以實現同步本地(dì)文件+開發調試+編譯預覽+上傳+發布等一(yī)整套流程。同時小程序自(zì)己開發了一(yī)套WXML标簽語言和(hé) WXSS樣式語言，并非直接使用标準HTML5+CSS3。同時提供了很多原生APP的(de)組件，之前在HTML5中需要模拟才能實現的(de)功能，在小程序中可(kě)以直接調用組件來實現。

小程序開發框架的(de)核心是一(yī)個響應的(de)數據綁定系統。分為(wèi)視(shì)圖層和(hé)邏輯層，小程序開發工具提供了視(shì)圖層描述語言WXML和(hé)WXSS，以及基于 JavaScript的(de)邏輯層框架，并在視(shì)圖層與邏輯層間設置了數據傳輸和(hé)事件系統，使得開發者能夠很簡單地(dì)将重心放在數據與邏輯上。處理(lǐ)事務邏輯的(de)地(dì)方被稱為(wèi)邏輯層。在微信小程序中，所有(yǒu).js腳本文件的(de)集合構成邏輯層。邏輯層與視(shì)圖層相互配合，完成數據處理(lǐ)及接收事件反饋。框架的(de)視(shì)圖層由WXML與WXSS編寫，通過組件進行(xíng)展現。對于小程序本身，.wxml文件與.wxss文件的(de)集合構成了視(shì)圖層，邏輯層處理(lǐ)數據之後，會發送給視(shì)圖層用于與用戶的(de)交互，同時接收用戶對視(shì)圖層的(de)反饋。視(shì)圖層以給定的(de)樣式展現數據并反饋事件給邏輯層，數據展現是通過組件來進行(xíng)的(de)。視(shì)圖的(de)基本構成是組件。

項目開發完成後，管理(lǐ)員需手動打包上傳代碼，填寫相關配置類目并将代碼提交審核，若第一(yī)次審核未通過，再次提交審核将開放提供測試的(de)入口，該入口由開發者提供，用于微信審核人員審核微信小程序時登錄。審核後手動發布即可(kě)。

微信小程序站在月活躍用戶9億人次的(de)微信的(de)肩膀上，自(zì)帶流量趨勢，入口多，功能簡單便捷。小程序功能快速叠代，意味着圍繞小程序的(de)開發和(hé)生态工具建設将會是移動互聯網的(de)一(yī)個巨大機(jī)會。目前各行(xíng)業內(nèi)諸多企業單位紛紛加入了小程序開發，開通了小程序功能。但小程序進行(xíng)優化後，開放了很多入口，使得開發者和(hé)用戶關注度不斷提升。縱使一(yī)些高(gāo)頻和(hé)複雜應用暫時無法被小程序取代，但是一(yī)些低(dī)頻應用的(de)主要功能，隻要能在小程序上實現，APP就可(kě)以完全卸載了。總的(de)來說，微信小程序目前發展空間甚好，至于以後未來的(de)發展仍舊(jiù)不能夠準确預測。