微信小程序開發的完整人性化版攻略

前言：

適者生存，雨露均沾，本次要講述的是我從零開發完整微信小程序的經驗分享，微信小程序的做品：請搜索小程序：半個大夫。也能夠關注微信服務號：半個醫生。小程序已經綁定到該服務號。
注：小程序語言是：js，和必定的css基礎，和些許的生命週期的概念，我的以爲有移動端開發經驗加前端開發經驗能夠很是順利開發，言歸正傳，Let's go（注意騰訊雖然已經有現成的教程了，我這裏是快速的歸納，開發注意事項）

正文：

建立流程

1.獲取微信小程序的AppID
登陸 https://mp.weixin.qq.com ，就能夠在網站的「設置」-「開發者設置」中，查看到微信小程序的 AppID 了
2.下載開發工具
自行下載 微信開發者工具
3.工程結構歸納

最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件。其餘文件件我也簡單的介紹一下，這裏講的是一個工程結構設計的一種推薦方案，
common文件夾是放一些公共的wxss，用於複用和統一管理。
components文件夾是放template模板，組件化。
config文件夾是放工程的一些配置，如服務端的地址，和圖片服務器的地址
pages文件夾是放小程序的模塊界面了
resources文件夾本該放小程序須要的一些資源，如圖片之類的，可是由於微信小程序不少圖片場景都不能直接使用本地的圖片，因此全部的圖片，都存放在服務端，一方面能夠減小打包的小程序的包大小，一方面也能夠方便管理。
service文件夾是放跟服務端的https接口交互的方法，能夠理解爲接口api
utils文件夾是放一些工具類js，和封裝的http類等
views文件夾裏面是空的，沒有刪掉，哈哈哈?

開發套路

小程序的js的導入是require所需的其餘js文件。
wxss的導入是@import所需的其餘wxss文件。
wxml的導入是import所需的其餘wxml文件。
有些須要全局共用的就放入app.js中和app.wxss中。
小程序有多少個界面和tabBar配置，配置在app.json裏面。
這裏對於之前開發移動端的人來講，要關心的wxss的書寫，以及wxml的佈局，和一些js的編寫（至於那些生命週期，看一眼就會了，就是在不一樣的狀況下，會觸發各不一樣的生命週期對應的方法，而後將本身須要處理的邏輯寫入到對應的生命週期方法中）。
對之前開發前端的人來講，佈局，樣式什麼的應該是毫無壓力。多花點時間去了解，生命週期的使用。
小程序是數據渲染界面的模式（數據綁定），因此只要控制到js中的data裏面的數據對象，就能夠動態渲染界面了

初步學習階段

在知道小程序是有多個界面拼在一塊兒組成的以後，那咱們能夠開始學習的第一步了，熟悉小程序能夠用的組件，或者叫標籤。這裏就不重複多餘介紹，直接有興趣看組件傳送門，這些都是小程序提供的基礎組件，咱們的wxml佈局可使用這些基礎組件來構建咱們的界面結構。瞭解的點就是那些組件的屬性，和事件。事件就是咱們能夠在這些組件上作什麼動做，作這些動做，咱們能夠觸發什麼方法。（這裏跟咱們開始學app開發很像，從組件開始）

學習進階階段

咱們能夠到這裏有幾個生命週期的方法，我不許備過多的介紹每一個方法對應的是何時，之間第一個onLoad方法，裏面有個參數options參數，這個參數是用來接收他上個界面傳遞過來的參數的，上個界面傳遞的方法如

wx.navigateTo({
      url:"/pages/symptom/symptomsChoose/symptomsChoose?symptomWord="+symptomName
    });

這樣就能夠在下個界面的options裏面拿到symptomWord這個參數，也是相似app的方式。
在這個js裏面咱們須要作的事情，就是設置好data來渲染wxml,配置好事件方法，來配合組件的事件來使用。

而後咱們要開始寫wxml佈局的時候，不可避免的就是if else，for循環等邏輯渲染的操做，這些小程序都有對應的寫法如wx:if, wx:for也是很是的簡單的

推薦方案一

若是遇到須要切換圖片環境的時候，修改引用的圖片，寫在wxss中是不合適的，推薦寫在style裏面種如：

<view style="background: url({{serviceImageUrl}}bg_weather_onloading.png) no-repeat;background-size: 100% 100%;"></view>

js動態修改serviceImageUrl這個data的數據對象便可。

推薦方案二

爲了更好的適配各類機型，在wxss儘可能都使用rpx來編寫單位，小程序會幫咱們處理好了各類適配

服務端

小程序只承認https請求，因此須要服務端須要配置ssl證書，來提供https的支持，能夠去百度騰訊ssl證書，找一找就能夠了

總結：

其實我的以爲小程序的開發門檻偏低，重點就是樣式會寫，而後基本的規則按照小程序規定的配置，而後在wxml畫出界面的結構，而後，在js中配置上他渲染的數據data和事件的觸發方法的實現，而後知道界面的若是跳轉，如何傳參數。基本上就算是能夠開發一個微信小程序了。會開發也算多會一門小技術吧，也是好事，祝各位學習快樂。這文章也是本身的一個小總結，後續會不間斷的發表關於Android，微信，iOS，Java相關技術的文章，有興趣的朋友們敬請關注！感謝你們閱讀。