C#开发微信小程序（一）[历史原因，存在一篇相同的副本]

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Node.js›Node.js教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

微信小程序相比于微信公众号的开发，区别在于微信小程序只请求第三方的数据，整个界面的交互（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://github.com/dwBurning/WeChatMiniProgram.git