前言
針對做過RN開發(fā)署咽，但沒有接觸過微信小程序的同學近顷，你可以通過本文了解微信小程序開發(fā)的整體流程，在之后的小程序開發(fā)中可以快速定位問題宁否，找到解決方案窒升。
注冊賬號
任何平臺的開發(fā)都不能跳過這一步 申請賬號 。
個人/公司都可以注冊微信小程序慕匠，一個賬號只能對應一個小程序/公眾號饱须，個人注冊相對簡單寫，公司注冊則需要上傳公司的營業(yè)執(zhí)照等信息台谊。
需要注意的是：公司在注冊過程中需要認證主體蓉媳，這個步驟騰訊要求公司使用對公賬號向微信打款幾分錢譬挚，在騰訊收到錢后，會將款項退回酪呻，才能通過主體審核减宣。這需要1-3天左右的時間，對于一些大公司來說玩荠，對外打款需要經(jīng)過oa審核蚪腋，這可能對部分公司來說會相對耗時。只有主體審核通過了姨蟋，才算是注冊成功屉凯，注冊一定要走在前面，否則會影響開發(fā)后提供測試版本/審核眼溶，阻斷項目進度悠砚。
tip：對于部分小公司/個人，還需要注意小程序上線必須支持https堂飞，也就是說必須要有一個合法域名灌旧，否則同樣會影響審核。
開發(fā)工具的使用（IDE）
建議：動手創(chuàng)建一個Demo工程绰筛，實際走一遍操作印象更深刻枢泰。
打開小程序IDE，新建項目铝噩。
點擊“測試號”會生成一個臨時的AppID衡蚂。
從上圖可以看出，IDE除了能用于小程序開發(fā)骏庸，同樣還支持小游戲毛甲、公眾號網(wǎng)頁開發(fā)。
開發(fā)工具主要包括 模擬器具被、編輯器玻募、調(diào)試器。
模擬器
模擬器提供了 iPhoneX一姿、iPhone5七咧、iPhone6、Plus叮叹、Nexus 5 等不同尺寸艾栋、不同平臺的模擬器供開發(fā)者使用，還可以選擇當前的網(wǎng)絡環(huán)境為WIFI衬横、2G裹粤、3G终蒂，動手將這些功能都點開看看蜂林，在腦海中有個印象遥诉。
編輯器
編輯器會根據(jù)開發(fā)者輸入的內(nèi)容智能補足代碼，實際開發(fā)中也會有一些開發(fā)者會選擇使用 Visual Studio Code 進行開發(fā)噪叙。筆者建議矮锈，如果是原生小程序開發(fā)（未使用框架如Taro），用微信的IDE會更好睁蕾，針對微信小程序開發(fā)苞笨，微信開發(fā)團隊對IDE一直都在做優(yōu)化，IDE的一些小功能能讓開發(fā)者提高不少效率子眶，比如創(chuàng)建Page時候自動創(chuàng)建基礎文件瀑凝，并且填充了一些基礎代碼。
調(diào)試器
筆者認為臭杰，調(diào)試器非常棒粤咪，有很多使用的功能，比如“Network”渴杆，記錄了模擬器的所有請求寥枝，從此告別青花瓷（Charles）。
- Console：打印業(yè)務里的console.log()磁奖、組件誤用的警告 囊拜、報錯 等，告別rn開發(fā)中console.warn()比搭。
- Sources：這個跟rn里邊使用谷歌瀏覽器調(diào)試一樣冠跷。
- Network：記錄模擬器發(fā)送的請求，可以很清楚看到每個請求的header身诺、params蔽莱、response。
- AppData：當前頁面的成員變量的當前值戚长，也可以在這手動修改盗冷。
- Storage：當前本地緩存，key-value同廉，也手動修改仪糖。
開發(fā)過程中這幾個功能都非常實用，用過的都說好迫肖。
代碼構(gòu)成
我們將目光移到項目的目錄：
直接暴露在根目錄下的文件都是全局配置文件：
- app.js：小程序入口锅劝，小程序啟動后會執(zhí)行App實例的onLaunch()回調(diào)。
- app.json：全局配置文件蟆湖，打開后默認有pages故爵、window。pages可以理解為rn的路由隅津，默認第一個頁面是小程序的首頁诬垂；window則配置全局的導航欄樣式劲室、標題顏色等。
- app.wxss：全局樣式文件结窘。
- project.config.json： 項目配置文件很洋，記錄項目的基礎配置，如：是否關閉域名校驗隧枫。
我們來動手創(chuàng)建一個頁面喉磁，在pages目錄下右鍵創(chuàng)建目錄Home适掰，在Home目錄下右鍵創(chuàng)建Page葫盼，命名為Home颇玷。
我們看到IDE在創(chuàng)建Page的時候為我們生成了4個文件瞳脓，并且每個文件都有自己的基礎代碼睬澡，比如Home.js治宣，整個頁面生命周期的回調(diào)方法都已經(jīng)寫好退个。
我們可以把Home文件夾當成是一個代碼構(gòu)造器同眯，我們將頁面分成兩個部分：視圖層湾趾、邏輯層芭商。
視圖層：由 .wxml .wxss 構(gòu)成頁面的結(jié)構(gòu)。
邏輯層：.js 負責業(yè)務邏輯搀缠，通過改變data里的成員铛楣，改變頁面展示。
關于JS交互邏輯：
在小程序里邊艺普，我們就通過編寫 JS 腳本文件來處理用戶的操作簸州。
<view>{{ msg }}</view>
<button bindtap="clickMe">點擊我</button>
// 點擊 button 按鈕的時候，
// 把界面上 msg 顯示成 "Hello World"歧譬，
// 于是我們在 button 上聲明一個屬性: bindtap 岸浑，
// 在 JS 文件里邊聲明了 clickMe 方法來響應這次點擊操作：
Page({
clickMe() {
this.setData({msg: 'Hello World'})
}
})
小程序除了提供基礎組件、還有一些定制的組件如<map>瑰步，還有豐富的接口矢洲，建議同學們將 API、組件 都簡單瀏覽一遍缩焦，無論是在需求評審读虏，或者是在實際開發(fā)中，都會有一些幫助袁滥，你可以知道小程序是否支持某個需求盖桥，或者這個需求是否需要額外申請資質(zhì)，又或者是在開發(fā)中题翻，需要用到某些接口揩徊，可以快速定位到文檔內(nèi)容。
組件：https://developers.weixin.qq.com/miniprogram/dev/component/
API：https://developers.weixin.qq.com/miniprogram/dev/api/
可以說小程序的開發(fā)就是在pages目錄下添加業(yè)務page，在完成提供體驗版本塑荒，微信公眾平臺生成體驗二維碼熄赡，擁有體驗權限的微信可以掃碼測試，測試版本右上角可以選擇不去校驗合法域名袜炕，所以體驗版也可以使用http進行測試。切記小程序上架必須是https初家！
上線
需要注意：一些資質(zhì)需要額外申請偎窘，比如你的小程序是有聲閱讀類應用，后臺會要求你提交相關資質(zhì)文件溜在。這些需要留意陌知，提前確認，避免進度阻斷掖肋。
最后
從RN轉(zhuǎn)去做小程序仆葡，除了樣式的寫法稍微有些不同之外，其他的業(yè)務可以完全“依瓢畫葫蘆”志笼，遇到問題再去看文檔沿盅，如果是接口的問題，建議上小程序開發(fā)者社區(qū)纫溃。
