C#開發微信小程序（一）

因為博客園改版，導致這個系列的第一篇博客無法正常顯示，所以另外copy了一篇

 

導航： C#開發微信小程序系列

 

微信小程序相比於微信公眾號的開發，區別在於微信小程序只請求第三方的數據，整個界面的交互（view）還是在微信小程序上實現，前后端完全分離，說白了，微信小程序開發與具體的后台語言無關，C#，Java，Python都行，只要前端UI開發完成，訪問對應的數據服務接口，就成了，上手還是蠻簡單的，而微信公眾號的開發，是直接請求第三方的web界面。所以說微信小程序更輕量級，用來做一些餐飲店在線點單，小小的網上商城什么的，還是很方便的，不過有一個比較坑的地方是 微信小程序 要求必須通過 HTTPS 完成與服務端通信，對於我這種只是來學習的人來說，還要購買SSL證書，然后搭建一個站點，也太麻煩了一點，那怎么辦呢？其實，只要新建小程序的時候，不使用AppID來登錄，就不會對https做校驗了，當然，如果你要最終發布，還是需要搭建https的站點的，騰訊雲or阿里雲都可以申請免費的SSL證書。

 

批注：如果要正式發布，首先需要租用一台服務器至少3個月，並擁有一個固定IP，其次就是要購買域名以及SSL證書，當然域名有便宜的1塊錢，SSL證書也有免費的可以使用，最后就是在網站發布后，要申請域名備案。一切准備妥當，小程序就可以上線了。

 

微信小程序官方文檔： https://developers.weixin.qq.com/miniprogram/dev/

 

我看了一下文檔之后，按照文檔申請了小程序的開發者賬號，並下載了開發工具，批注：沒有賬號是登錄不了工具的。

 

看了一下官方文檔，以及其他的一些資料之后，對微信小程序的開發有了一點膚淺的見解，那么：

 

首先，你需要熟悉html，css，js等一些web前端的開發語言，如果你還熟悉angularjs，那就更好了。

 

其次，你需要搭建一個http站點，用來作為服務端給微信小程序提供數據，我這里搭建的是一個web api的站點。

 

另外補充說明一下，現在MVVM前端框架很多angularjs，vue，后台MVVM框架WPF，數據驅動UI，WPF中的xaml與微信小程序中的wxml，數據綁定，WPF中的DataTemplate與微信小程序中的自定義組件等。

 

細節我就不多說了，比如如何新建一個web api程序，如果發布到iis，如何新建一個微信小程序，略過...

 

只記錄一下我遇到一些問題：

1.如果API返回的是String類型的字符串，那么，小程序前端收到后，必須轉成JSON對象，否則會異常，其次就是要注意區分大小寫。

public string GetJson(string json)
        {
            return "{\"name\":\"dengwei\"}";
        }

在微信小程序的生命周期函數中請求這個服務：

/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
wx.request({
url: 'http://localhost:8080/api/lazyorders/GetJSON?json=1',
success: function (res) {
console.log(res);
console.log(res.Name);
}
})
},

請求得到的數據如下：我們可以發現數據已經取到了，但是並不能直接取json數據中的name屬性，即它不是一個有效的json對象。

再修改一下代碼：把得到的字符串，通過js轉成有效的json對象，然后再輸出

/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
wx.request({
url: 'http://localhost:8080/api/lazyorders/GetJSON?json=1',
success: function (res) {
var data = res.data;
var json = JSON.parse(data);
console.log(json);
console.log(json.Name);
}
})
},

這下可以了，可以獲取到name屬性了，注意這里有一個細節的變化，打印出來的數據，是可以展開的了，key-value中的value值被標紅了{name: "dengwei"}

空閑時間寫的微信小程序demo運行效果，其中用到的圖標可以在阿里圖標庫中下載：https://www.iconfont.cn/

源代碼：2019-08-21更新

批注：這只是一個demo，我並沒有完整的實現所有的功能，僅供參考。

https://e.coding.net/dwBurning/ReallyWantToApi.git

https://e.coding.net/dwBurning/ReallyWantToApi.git
https://e.coding.net/dwBurning/LazyOrders.git

https://e.coding.net/dwBurning/ReallyWantToApi.git

https://e.coding.net/dwBurning/ReallyWantToApi.git