最近團(tuán)隊(duì)H5開發(fā)資源緊張龄毡，客戶端開發(fā)同學(xué)資源略有閑置晤硕，所以決定讓客戶端同學(xué)也了解和熟悉小程序開發(fā)/快應(yīng)用/小程序開發(fā)个唧，以作后備。

這一系列的分享主要是引導(dǎo)有興趣的同學(xué)能夠快速入門小程序開發(fā)块仆，不會(huì)有太深入的技術(shù)研究，目的是讓客戶端同學(xué)可以快速的進(jìn)行小程序開發(fā)工作王暗。

1.概要

????1.1 開發(fā)文檔：

????????官方的開發(fā)文檔是最好的教程悔据，我們接下來的所有知識(shí)點(diǎn)都是基于官方的開發(fā)文檔的，所以實(shí)際開發(fā)過程中俗壹，隨時(shí)翻閱開發(fā)文檔很重要科汗，不管是技術(shù)方面，還是合規(guī)方面绷雏，以及小程序的特殊要求头滔，都可以在官方文檔中找到。

????????官方文檔地址：https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18111920

1.2 微信開發(fā)管理后臺(tái)

????1.2.1 地址

????????https://mp.weixin.qq.com

????1.2.2 賬號(hào)

????????綁定在公眾號(hào)下面的小程序賬號(hào)也需要注冊涎显，每個(gè)小程序賬號(hào)都必須要有一個(gè)管理員坤检，小程序后臺(tái)需要錄入管理員的身份證信息，每個(gè)身份證下面最多只能做5個(gè)小程序的管理員期吓。

????1.2.3 功能

????????這里只介紹開發(fā)管理功能和設(shè)置功能早歇，其他的功能暫時(shí)與技術(shù)開發(fā)無關(guān)。

????????開發(fā)管理：這里主要用來進(jìn)行上線版本的管理，包括已上線/未通過審核/審核中/已上傳的版本

????????設(shè)置：

? ? ? ? ?????a.基本設(shè)置：想要新建一個(gè)可上線的小程序工程箭跳，則必須要有AppID晨另，只有完善了小程序的基本信息，才能生成AppID

????????????b.開發(fā)設(shè)置：完成基本設(shè)置之后谱姓，就可以開到AppID了借尿。除此以外，小程序能訪問的服務(wù)器域名（Api調(diào)用域名）逝段、業(yè)務(wù)域名（H5的域名）需要在此進(jìn)行配置垛玻，否則，真機(jī)中的小程序都將報(bào)錯(cuò)奶躯。同時(shí)帚桩，這些域名的修改每月都有次數(shù)限制。

1.3 開發(fā)工具：

? ? ? ?這里只介紹微信官方提供的開發(fā)工具嘹黔，當(dāng)然市面上可以用來進(jìn)行微信小程序開發(fā)的工具有很多账嚎，這里就不介紹了，有興趣的同學(xué)可以自己百度（這里建議不要Google儡蔓，中國的東西找百度還是靠譜些）

? ? ? ?官方開發(fā)工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

? ? ? ?1.3.1 新建工程

????????????a.項(xiàng)目目錄：小程序本地所在的文件夾

????????????b.AppID:申請了小程序開發(fā)賬號(hào)之后郭蕉，在微信小程序開發(fā)管理后臺(tái)可以看到AppID

????????????c.項(xiàng)目名稱：盡量起名為上線時(shí)的名稱

????????1.3.2 模擬器

????????????微信小程序的模擬器應(yīng)該是最好用的，相較于快應(yīng)用必須要使用真機(jī)來搭建模擬器環(huán)境的方案喂江，小程序的模擬器甩了快應(yīng)用十八條街都不止召锈。iOS的模擬器還可以，但是編譯速度遠(yuǎn)比不上小程序的获询，Android的模擬器就更加不用提了涨岁，所以使用微信小程序的模擬器進(jìn)行初期開發(fā)，是一種很好的選擇吉嚣。

????????1.3.3 編輯器與調(diào)試器

????????????做過客戶端開發(fā)的同學(xué)應(yīng)該不會(huì)太習(xí)慣小程序的這套邏輯梢薪，代碼coding完成后，如果需要調(diào)試尝哆，是需要進(jìn)入到調(diào)試器中才能進(jìn)行調(diào)試秉撇，實(shí)際表現(xiàn)上，編譯器中的代碼是編譯之前的秋泄，調(diào)試器中的代碼是編譯之后的琐馆，所以會(huì)存在兩份幾乎一樣的代碼，初期不熟悉的時(shí)候容易把兩者弄混印衔，導(dǎo)致出錯(cuò)啡捶。

????????????調(diào)試器的下方是常見的打印區(qū)，熟悉H5開發(fā)的同學(xué)會(huì)覺得這個(gè)界面非常的親切奸焙。

????????1.3.4 編譯與預(yù)覽

????????????保存功能會(huì)默認(rèn)進(jìn)行編譯瞎暑，所以想要重新編譯新的代碼彤敛，使用保存功能即可，點(diǎn)擊編譯可了赌。

????????????預(yù)覽是指開發(fā)工具會(huì)生成一個(gè)小程序臨時(shí)二維碼墨榄，只有被加入到了開發(fā)者計(jì)劃中的微信用戶，才可通過掃描該二維碼打開開發(fā)中的小程序勿她，只要是在真機(jī)中運(yùn)行的小程序只支持https袄秩，模擬器中可以選擇是否支持http。

????????1.3.5 詳情

????????????最右邊的詳情按鈕是個(gè)很重要的按鈕逢并，當(dāng)前開發(fā)的小程序的基本信息都在里面了之剧。

????????????小程序包最大只能為2M，小游戲包最大只能為4M砍聊，開發(fā)時(shí)要時(shí)刻注意背稼，點(diǎn)擊詳情按鈕刻意隨時(shí)查看包的大小。

????????????此處可以設(shè)置模擬器中是否支持http方式玻蝌，是否校驗(yàn)服務(wù)器域名和業(yè)務(wù)域名蟹肘。

2.開發(fā)基本知識(shí)

????????????這一節(jié)主要介紹開發(fā)所需的基礎(chǔ)知識(shí)。

? ? ? ?2.1 項(xiàng)目工程結(jié)構(gòu)

????????????pages：主要用來存放頁面文件的文件夾俯树。

????????????utils：主要用來存放一些工具類的文件夾帘腹，這里面一般只有js文件。

????????????app.js:這是小程序的入口许饿，iOS可以類比為AppDelegate（UIApplication)的對象阳欲，Android可以類比為Application

????????????app.json:這是小程序的頁面相關(guān)的配置文件，比如頁面路徑陋率，導(dǎo)航的顏色等胸完。

????????????app.wxss：這是一個(gè)總的樣式文件，可以理解為樣式的基類翘贮。

????????????project.config.json:這是小程序的配置文件，類似于iOS的info.plist,Android的build.gradle

????????????assets：這個(gè)文件夾本身是不存在的爆惧，不過頁面文件的圖片需要存放狸页，所以我這里新建了這個(gè)圖片文件的文件夾，專門用來存放圖片扯再，這里按照iOS的風(fēng)格起名為assets芍耘。

????2.2 四件套

????????????小程序開發(fā)和H5開發(fā)很相似，包括實(shí)際開發(fā)中用的語言和技術(shù)熄阻，大部分和H5開發(fā)是重疊的斋竞，還有一部分是微信團(tuán)隊(duì)在H5開發(fā)的基礎(chǔ)上進(jìn)行了二次封裝。所以小程序開發(fā)的基礎(chǔ)是H5的三件套：js,css,xml秃殉。微信進(jìn)行了二次封裝之后坝初，變成了js浸剩，wxss，wxml鳄袍，同時(shí)绢要，微信在此基礎(chǔ)上，添加了一個(gè)json文件拗小，接下來會(huì)詳細(xì)介紹這四個(gè)文件的作用重罪。

????????js：這里主要是頁面的邏輯，類似于Android的activity文件哀九，iOS的VC文件

????????json：這個(gè)文件的主要作用是當(dāng)前頁面的配置剿配，主要是針對導(dǎo)航的，比如導(dǎo)航的標(biāo)題阅束，顏色等

????????wxml：這個(gè)文件主要是頁面的結(jié)構(gòu)呼胚，Android：fragment；iOS:IB文件

????????wxss：這個(gè)文件主要是頁面元素的樣式的描述围俘，同樣的砸讳，Android：fragment；iOS:IB文件

????2.3 常見的基礎(chǔ)知識(shí)

????????2.3.1 數(shù)據(jù)類型

????????????微信小程序開發(fā)中有三種數(shù)據(jù)類型界牡，分別是：

????????????const：全局變量簿寂，不開修改，一般用于聲明工具類

????????????var：全局變量宿亡，可修改

????????????let：局部變量常遂，可修改

????????2.3.2 文件的引用

????????????a.在相同文件夾中引用：const file = require("file.js")

????????????b.在不同文件夾中引用：const file = require("../util/file.js"),這里的../ 表示當(dāng)前文件夾的上一級文件夾

????????2.3.3 方法的調(diào)用

????????????2.3.3.1 同一js文件中的方法調(diào)用：

????????????????a.單例類：functionName()

????????????????b.普通類：this.functionName()

????????2.3.3.2 不同js文件中的方法調(diào)用：

????????????????a.單例類：需要在單例類中添加如下代碼：

????????????????????module.exports = {

????????????????????????publicFunctionName1:privateFunctionName1,

????????????????????????publicFunctionName2:privateFunctionName2

????????????????????}

????????????????b.普通類：一般普通類的js方法不對外開放

????????2.3.4 this

????????????page類中的this可以理解為當(dāng)前js對象，類似于iOS中的self挽荠，或者Android中的this克胳。

????????????如果一個(gè)閉包要使用this，則必須在閉包外聲明：var that = this 圈匆，否則將報(bào)錯(cuò)漠另。

????????2.3.5 app.js

? ? ? ? ? ? 獲取當(dāng)前App對象var app = getApp() 在任何地方都可以通過該函數(shù)獲取到app.js對象。

????????2.3.6 數(shù)據(jù)的傳遞

????????????2.3.5.1 將數(shù)據(jù)傳給單例類

????????????????想要將page中的數(shù)據(jù)傳遞給單例類跃赚，比如page的js中調(diào)用網(wǎng)絡(luò)通信的工具類笆搓，一般直接通過工具類的方法進(jìn)行傳遞即可，和傳統(tǒng)的iOS/Android開發(fā)并無差別

????????????2.3.5.2 page1.js傳遞數(shù)據(jù)到page2.js

????????????????a.可以通過app.js中進(jìn)行傳遞

????????????????????在page1.js中：var app = getApp() 纬傲；app.data.tmpData = "測試數(shù)據(jù)"

????????????????????在page2.js中：var app = getApp() 满败；let tmpData = app.data.tmpData

????????????????b.可以通過路徑進(jìn)行傳遞，此處可以傳遞map對象或者一般的string對象都可以

????????????????????在page1.js中：

????????????????????????wx.navigateTo({

????????????????????????????url:"../home/home?tmpData=" + "測試數(shù)據(jù)"

????????????????????????})

????????????????????在page2.js中的onload函數(shù)中：

????????????????????????onload:function(options){

????????????????????????????let tmpData = options.tmpData

? ? ? ? ? ? ? ? ? ? ? ? }