C#开发微信小程序（一）

ゞ浴缸里的玫瑰 2023-06-03 15:56 15阅读 0赞

因为博客园改版，导致这个系列的第一篇博客无法正常显示，所以另外copy了一篇

导航： [C\#开发微信小程序系列][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/][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对象。

![Image 1][]

再修改一下代码：把得到的字符串，通过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"\}

![Image 1][]

空闲时间写的微信小程序demo运行效果，其中用到的图标可以在阿里图标库中下载：[https://www.iconfont.cn/][https_www.iconfont.cn]

源代码：2019-08-21更新

批注：这只是一个demo，我并没有完整的实现所有的功能，仅供参考。

[https://dev.tencent.com/u/dwBurning/p/ReallyWantToApi/git][https_dev.tencent.com_u_dwBurning_p_ReallyWantToApi_git]

[https://git.dev.tencent.com/dwBurning/LazyOrders.git][https_git.dev.tencent.com_dwBurning_LazyOrders.git]

![635258-20190922131822845-1033110751.gif][]

![Image 1][]

转载于:https://www.cnblogs.com/dwBurning/p/wechatminiprogramwithwebapi.html

[C]: https://www.cnblogs.com/dwBurning/category/1538115.html
[https_developers.weixin.qq.com_miniprogram_dev]: https://developers.weixin.qq.com/miniprogram/dev/
[Image 1]: 
[https_www.iconfont.cn]: https://www.iconfont.cn/
[https_dev.tencent.com_u_dwBurning_p_ReallyWantToApi_git]: https://dev.tencent.com/u/dwBurning/p/ReallyWantToApi/git
[https_git.dev.tencent.com_dwBurning_LazyOrders.git]: https://git.dev.tencent.com/dwBurning/LazyOrders.git
[635258-20190922131822845-1033110751.gif]: /images/20230601/c60e5d2b708f47ff834a4d22e643f1f2.png