2023年2月

在实际的系统开发中,我们往往需要一些简单的的案例代码,基于此目的我把Winform开发框架中各种闪光点和不错的功能,有些是我们对功能模块的简单封装,而有些则是引入了一些应用广泛的开源组件进行集成使用,因此把它们做了一个Demo进行展示,以方便我们随时了解和参考,并能够快速应用相应的场景到具体的项目中。

1、闪屏展示界面及主体界面

在很多系统里面,提供一个设计不错的图片作为程序界面展示的效果是挺不错的,这个小程序也不例外,基本上整合了一些WInform界面常用的各种功能。

而整个案例的界面的界面以方便展示各种小功能为目的,因此设计如下所示,通过树形列表快速进入各种小功能的展示。

2、数据列表展示(GridControl及分页控件)

在很多数据展示的场合,基于DevExpress的WInform界面一般使用GridControl进行展示,这里同时展示了原生GridControl和我的WInform分页控件的几种不同展示方式,以实际的案例效果来介绍这些数据展示的功能差异。

在这个综合案例里面,同时展示基于这几种情况的数据直接录入操作功能,这个在之前的随笔中也有详细的介绍过《
在DevExpress程序中使用Winform分页控件直接录入数据并保存
》、《
在DevExpress程序中使用GridView直接录入数据的时候,增加列表选择的功能
》。

一般的数据展示,采用代码生成工具自动生成的界面,界面整合了Winfrom分页控件的特点,方便快捷。

下面案例为在列表中选择数据

以及基于TreeList树形列表及搜索,右侧为GridControl直接数据录入的案例。

或者基于主从列表直接录入数据的案例展示。

3、项目开发的杂项管理

在项目开发过程中,我们为了更好、更快的开发具体的项目功能,会对一些常用的功能模块进行封装,或者使用一些使用较为广泛的开源组件进行功能集成,例如各种报表(XtraReport、RDLC报表、FastReport等)、文档管理、配置管理、FTP处理、二维码(条形码)、摄像头、扫码枪、声音等设备,这个模块把这些常用的功能整合在一起,具体在项目中使用到的时候,参考使用即可,非常方便和实用。

例如FastReport的中文化和各种报表处理、设计等功能。

以及XtraReport不同报表的设计、预览展示效果。

或者是基于RDLC报表的设计和展示。

当然除了报表,还有其他很多模块的处理。

或者展示Apose.Cell和Aspose.Word的文档操作。

其他的功能就不再一一展示了,具体可以下载Demo进行功能了解。

综合案例的程序下载地址如下所示:
http://www.iqidi.com/download/SmallExampleDemo.rar

在很多文档管理的功能模块里面,我们往往需要对WORD稳定进行展示、编辑等处理,而如果使用微软word控件进行处理,需要安装WORD组件,而且接口使用也不见得简单易用,因此如果有第三方且不用安装Office的能够展示WORD及进行编辑,那是比较不错的选择,TX Text Control就是这样的控件,本文就是基于这个控件的使用,实现在文档管理项目中的应用。

1、TX Text Control的介绍及使用

TX Text Control是一款功能类似于 MS Word 的文字处理控件,包括文档创建、编辑、打印、邮件合并、格式转换、拆分合并、导入导出、批量生成等功能。广泛应用于企业文档管理,网站内容发布,电子病历中病案模板创建、病历书写、修改历史、连续打印、病案归档等功能的实现。这个控件主要的功能就是可以作为Word以及其他文档的编辑器使用,整体展示的效果非常贴近原生WORD的展示,是一款非常不错的控件套件。

在我较早的一篇随笔《
文字处理控件TX Text Control的使用
》里面,大概简单的介绍了这个控件的使用,而且我把这个版本的英文资源全部汉化并进行了编译使用,基本上所有的功能都是展示正常的中文了,这样更适合我们实际项目的使用了。

我们在VS工具栏里面加入对应的控件,可以看到有以下相关的控件对象可供使用,一般情况下我们使用TextControl,然后在其基础上创建其他RulerBar、ButtonBar、StatusBar即可,而如果我们需要合并数据(很常用)就需要加入MailMerge控件对象。

添加控件后,我们可以对控件的相关基础的复制、粘贴、剪切等操作可以直接利用控件的API即可实现。

我们这里主要目的是在WInform项目中集成该控件的使用,就不像上篇那样介绍使用它编写一个完整独立的Word处理那样了。

如下面就是把相关的控件拖动到自定义控件上的效果。

类代码如下所示:

    /// <summary>
    ///基于TxTextControl控件的自定义控件封装/// </summary>
    public partial class TextWordControl : XtraUserControl

另外功能按钮可以自定义,增加或者减少部分按钮功能,如下列表所示。

2、TX Text Control自定义控件的代码实现和使用

为了实现这个WORD编辑控件的一些按键操作,如全部选择(Ctrl+A)、查找(Ctrl+F)、替换(Ctrl+H)等基础操作,我们需要在控件代码中实现相关的按键事件处理,这样我们使用这些按键就可以直接调用控件的内置处理窗体了,具体代码如下所示。

    /// <summary>
    ///基于TxTextControl控件的自定义控件封装/// </summary>
    public partial classTextWordControl : XtraUserControl
{
publicTextWordControl()
{
InitializeComponent();


InitEvent();
}
/// <summary> ///处理控件的事件/// </summary> private voidInitEvent()
{
Thread.CurrentThread.CurrentUICulture
= new System.Globalization.CultureInfo("zh-CN");
Thread.CurrentThread.CurrentCulture
= new System.Globalization.CultureInfo("zh-CN");this.textControl1.KeyDown +=textControl1_KeyDown;
}
void textControl1_KeyDown(objectsender, KeyEventArgs e)
{
HandleKeyDownEvent(e);
}
private voidHandleKeyDownEvent(KeyEventArgs e)
{
switch(e.KeyCode)
{
caseKeys.Insert:if (e.Control || e.Alt || e.Shift) break;//插入按键操作 textControl1.InsertionMode= textControl1.InsertionMode ==TXTextControl.InsertionMode.Insert?TXTextControl.InsertionMode.Overwrite
: TXTextControl.InsertionMode.Insert;
break;caseKeys.A:if (!e.Control || e.Alt || e.Shift) break;//Ctrl-A: 全选操作 textControl1.SelectAll();break;caseKeys.F:if (!e.Control || e.Alt || e.Shift) break;//Ctrl-F: 查找操作 textControl1.Find();break;caseKeys.H:if (!e.Control || e.Alt || e.Shift) break;//Ctrl-H: 替换操作 textControl1.Replace();break;
}
}

如查找和替换的内置对话框界面如下所示。

由于WORD文档数据,我们存储在数据库里面一般使用的是二进制存储,因此还需要设置一个自定义控件的属性用来设置获取获取文档控件的数据的,具体代码如下所示。

        /// <summary>
        ///文档数据/// </summary>
        [Browsable(false)]public byte[] DocData
{
get{byte[] docData = null;
textControl1.Save(
outdocData, TXTextControl.BinaryStreamType.MSWord);returndocData;
}
set{if (value != null)
{
try{
textControl1.Load(value, TXTextControl.BinaryStreamType.MSWord);
}
catch(Exception ex)
{
LogHelper.Error(ex);
MessageDxUtil.ShowError(ex.Message);
}
}
}
}

然后再提供的接口函数,用来加载本地WORD文档的数据,具体代码如下所示。

        public void LoadData(stringfile)
{
if (!string.IsNullOrEmpty(file))
{
try{this.textControl1.Load(file, TXTextControl.StreamType.MSWord);
}
catch(Exception ex)
{
LogHelper.Error(ex);
MessageDxUtil.ShowError(ex.Message);
}
}
}

然后在文档管理的功能模块里面,对文档的内容进行加载和保存即可,如下是文档展示的项目实际效果。

编辑WORD文档的界面效果如下所示,我们可以看到,这个控件里面展示的Word格式及内容都和WORD软件展示的并无异样,非常不错,而且速度也很快,比DevExpress的RichTextEdit控件的效果和速度要好很很多。

以上就是应用TX Text Control进行WORD文档的编辑显示处理的实际总结,希望能够给你提供灵感和帮助。

在开发项目的时候,我们有一些场景需要编辑一些HTML文档,作为内容发布系统的一部分,有时候也需要对一些文档如WORD文档进行编辑管理,这样需要我们对这些内容及文档进行合适的管理。本文主要介绍在WInform项目中利用ZetaHtmlEditControl进行HTML内容管理,以及利用TX TextControl控件进行WORD文档管理,这两方面都是我们一般进行内容和文档管理所必须的。

1、内容及文档管理模块功能介绍

整个模块,支持WInform框架和混合式开发框架两种模式,都是基于WInform的界面管理,利用ZetaHtmlEditControl进行HTML内容管理,以及利用TX TextControl控件进行WORD文档管理,整体的项目功能介绍如下所示。

WORD文档的内容主要是以二进制的方式进行存储,因此保存和加载都不会导致WORD文档格式的丢失,利用TX TextControl控件更是可以不用安装Office系统,就可以完美的展示WORD文档了,而且速度都很好。

利用ZetaHtmlEditControl可以管理HTML内容的同时,可以从粘贴图片或者本地图片里面选取,然后统一上传到文件服务器里面,如我上篇随笔介绍的《
在附件管理模块中增加对FTP 上传和预览的支持
》的,这样编辑HTML内容,里面的图片可以马上上传到指定的服务器,非常方便。

通过上面的图示,我们了解ZetaHtmlEditControl用到了WInform开发框架里面的《附件管理模块》的内容,这样我们就可以进一步重用了附件管理的内容了。

TX Text Control是一款功能类似于 MS Word 的文字处理控件,包括文档创建、编辑、打印、邮件合并、格式转换、拆分合并、导入导出、批量生成等功能。广泛应用于企业文档管理,网站内容发布,电子病历中病案模板创建、病历书写、修改历史、连续打印、病案归档等功能的实现。这个控件主要的功能就是可以作为Word以及其他文档的编辑器使用,整体展示的效果非常贴近原生WORD的展示,是一款非常不错的控件套件。

利用利用TX TextControl控件,在随笔《
在项目中利用TX Text Control进行WORD文档的编辑显示处理
》中有介绍,我们主要用它来快速加载、完美展示WORD或者PDF内容的组件,如下界面所示。

2、内容及文档管理模块的数据设计及界面

该模块主要利用一个表来存储两种不同的数据,包括HTML内容和WORD文档,以及跟踪记录每条记录被那些用户阅读过,数据库设计如下所示。

而附件的存储则重用了附件管理模块的内容,它的表设计也是只有一个表,我们可以方便进行附件的管理维护,表设计如下所示。

有了这些内容,我们就可以HTML内容和WORD文档进行管理了。

HTML文档管理

WORD文档管理

在基于Metronic的Bootstrap开发框架中,一直都希望整合较新、较好的前端技术,结合MVC的后端技术进行项目的开发,随着时间的推移,目前Metronic也更新到了4.75版本,因此着手对这个版本的内容进行一次更新调整,以期达到与时俱进的目的。从最近这几个版本来看,Metronic本身的目录结构以及功能没有太多的变化,但增加了一些较为方便的功能,本篇随笔对比它们进行介绍。

1、Metronic版本更新

首先我们来对空白页面进行不同版本的对比,文件的对比首选Beyond Compare,两个版本文件一对比,差异一目了然。

从对比差异内容中可以看到,新版本的JS、CSS目录结构没有变化,不过增加了几个功能页面,如下所示。

ui_metronic_grid.html、ui_sweetalert.html、components_bootstrap_multiselect_dropdown.html、components_clipboard.html、form_repeater.html、page_general_pricing_2.html,这几个页面的内容如下所示。

其中ui_metronic_grid.html主要是介绍Bootstrap栅格的各种使用方法。

ui_sweetalert.html页面这是整合了一个非常美观的弹出对话框控件,如下所示。

components_bootstrap_multiselect_dropdown.html则是介绍下拉列表多选的一个新组件实现。

components_clipboard.html则是介绍使用粘贴复制的基本操作,方便在页面中使用对控件、选定内容进行剪切板的处理。

另外增加了一个快速导航菜单的东西,页面代码增加如下部分,

页面右侧增加的导航菜单

展开后效果如下所示。

2、框架插件的更新调整

随着这个Metronic的模板的调整,同时也使用了各个新版本的插件,因此也同时需要对这些插件的使用进行一个调整。

1)Select2插件的调整

这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:
https://select2.github.io/
,具体的使用案例,可以参考地址:
https://select2.github.io/examples.html

以Select2插件的更新为例,原来我在随笔《
基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
》中对它进行了介绍,如下所示,很多下拉列表都使用这个Select2的插件进行展示,比较方便美观。

其中赋值部分原来为:

 $("#CustomerType").select2("val", info.CustomerType);

新版本统一了赋值的操作,和常规的控件赋值代码保持一致,变更如下。

$("#CustomerType").val(info.CustomerType).trigger('change');

如果涉及下拉列表联动的话,代码还是不变:

$("#City").trigger('change');//联动

初始化Select2的代码也需要进行一定的微调,如下所示。

    var control = $('#' +ctrlName);//设置Select2的处理
control.select2({
placeholder:
"选择" + dictTypeName, //设置显示占位符 allowClear: true,
escapeMarkup: function (markup) {
returnmarkup; },
templateResult: formatResult,
templateSelection: formatSelection,
width:
'100% !important', //设置自动适应的宽度 });

2)SweetAlert对话框

这个在Metronic的早一点版本是没有的,我在随笔《
基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化
》介绍单独采用这个插件来做删除确认的操作的,目前这个版本已经整合在Metronic里面了,那么我们就直接引用它的即可了。

插件的地址是:
http://lipis.github.io/bootstrap-sweetalert/

调整CSS和JS的引用地址,使用代码完全一样,就完成了这个SweetAlert对话框的更新处理了。

//删除操作的确认
function showDelete(delFunction, tips) {var newtips = arguments[1] || "您确认删除选定的记录吗?"
    var result = false;
swal({
title:
"操作提示",
text: newtips,
type:
"warning", showCancelButton: true,//confirmButtonColor: "#DD6B55", confirmButtonClass: "btn-danger",
cancelButtonText:
"取消",
confirmButtonText:
"是的,执行删除!",
closeOnConfirm:
true}, function () {
delFunction();
});
returnresult;
}

相关主题文章如下所示:

从开发框架提高开发效率说起

基于Metronic的Bootstrap开发框架经验总结(14)--条码和二维码的生成及打印处理

基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2

基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现

基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式

基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理

在MVC控制器里面使用dynamic和ExpandoObject,实现数据转义的输出

基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍

基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理

基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理

腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多APP应用被简化为小程序的功能迅速推出,同时也根据小程序的特性推出各种独具匠心的应用,相对传统的APP来说,微信小程序确实能够大大降低开发成本和难度,但也意味着需要掌握整个微信小程序的各种接口功能、应用场景等相关技术点,本篇随笔先从大的方面来介绍微信小程序开发的一些知识,如架构设计、技术路线 、工具准备等方面做一些浅薄的介绍,希望大家也有所收益,有所借鉴,则善莫大焉。

1、小程序的统一架构设计

在我们开发各种应用的时候,总是希望能够先从大的方向上探索整个业务场景,尽可能的不用造成后期的返工或者推倒重来,这种代价是非常高昂的,因此前期花些时间来做一下整体的规划,然后在具体化各个业务模块的开发才是比较合理的做法。

业务数据的集中化,是很多企业的在数据化浪潮中赖以生存的核心,各行各业都有自己的业务数据,有些企业掌握着重要的行业数据,一旦数据成了规模,就可以对外提供接口,实现数据业务的营收,也是一项非常不错的收入,同时也是企业的核心竞争力。

不管数据是部署在阿里云、腾讯云等云产品上,还是部署在自家的服务器上,都是数据集中化的表现之一,围绕着数据集中化,那么各种应用就有一个统一的API接口的需求,这种统一API可以称为统一平台,也可以称为统一接口,都有不同的称呼。

随着基于JSON格式的Web API的广泛应用,越来越多的企业采用Web API接口服务层,作为统一接口的核心所在,也成为Web API核心层。基于JSON格式的接口,可以广泛地、跨平台的应用于IOS、安卓等移动端,也可以应用在常规的Web业务系统,Winform业务系统、微信应用、微信小程序等方方面面,因此企业内部形成自己是的一套Web API标准和详细的文档非常重要,一旦完善了,就可以供各个业务场景使用,这些业务可以外包给其他软件公司或者团队,各自分离开发,而自己内部则只需要花费精力来统一维护Web API核心层和提高整个核心层的功能接口稳定、缓存处理等方面事情即可。其他业务团队开发的系统只需要遵循整个大接口平台的统一规划,完成各自的功能需求即可,不会造成数据库的不一致,更不会让某家公司掌握核心的技术资源,尾大不掉的尴尬情形。

基于上面的分析,我们企业最终围绕着Web API核心层做了不同的业务应用,如下图所示。

基于Web API核心层的性能考虑,我们一般它们分开处理,一般后端有一个数据库应用服务器,一个Web API服务器,甚至可能还有一个专门处理FTP文件的文件服务器(可选),如果还需要建立Web后台应用,可能还需要一个或者多个Web 应用服务器,从而分散服务器的IO压力和计算压力,如果还需要考虑更加周全一些,还需要一个MQ服务器处理重要订单数据、缓存服务器存储缓存数据、负载均衡服务器等等。

最简化的要求,至少有一个云端数据库服务器和一个Web API服务器,这些服务器群构成一个Web API一体化应用的场景,如下所示。

考虑到Web API的分层,我们可以通过下图来了解具体的分层结构,从而为我们实际的开发做一些铺垫。

2、小程序的开发环境准备

微信小程序的开发准备,我们首先需要在官网上注册账号,然后绑定自己的认证的账号即可,这些我可以参考
https://mp.weixin.qq.com/debug/wxadoc/dev/
进行了解即可 ,不在赘述。

同时里面的文档包括了小程序开发的UI规范、架构说明、组件及API的接口说明等内容,建议详细阅读。

我们开发小程序,很多情况下需要利用微信开发者工具(
开发者工具
),工具集成了开发调试、代码编辑及程序发布等功能。启动工具时,开发者需要使用已在后台绑定成功的微信号扫描二维码登录,后续所有的操作都会基于这个微信帐号。

不过,为了更好提高开发工具,我们建议代码编辑还是利用比较专业化的前端开发工具较好,结合上面微信开发者工具进行编译出来即可,推荐的前端开发工具还是老牌的Sublime Text较好,界面效果如下所示。

这个工具可以在百度搜索获取对应最新的版本下载即可。

默认来说,这个工具并不能识别小程序自定义的后缀名,因此我们需要打开对应的wxml,wxss这些文件,我们关联下即可,毕竟这两个文件分别是HTML、CSS3格式的文件。

具体设置操作如下,先打开wxml,wxss这些文件,然后从右下角单击PlainText位置,从弹出列表里面选择正确的格式。

从弹出列表里面首先选择
Open all with current extensioin as ***
这个菜单,然后选择对应的HTML,或者CSS3格式即可完成后缀名的设置,下次打开会自动关联正确格式的后缀名了。

上面的操作只是设置了文件的格式,对于微信小程序自定义的标签,以及一些特有的JS操作,还是需要费一些工作,好在已经有好心人为我们专门做了小程序的Sublime Text插件。

微信小程序的snippets(sublime通过 “Sublime-snippet” 实现快速补全代码),插件下载的链接:
https://github.com/Abbotton/weapp-snippet-for-sublime-text-2-3

下载上方链接提供的snippet

将红色文件夹直接放入sublime的安装目录 PackagesUser 下,重启sublime即可。

同时,JS的模块也是一样的处理,可以快速录入代码段。

输入apirequest即可获得快速录入的代码段,如下所示。

整个snippet的列表包含下面几个部分,分别使用w开始或者api开始,避免冲突。

snippet 列表

为了防止和其他 snippet 冲突,本 snippet 中的所有WXML 标签触发命令都以'w'开头,所有 API相关命令都以'api'开头.


WXML snippet

命令 对应组件或命令
wapp 注册小程序
wblockif block wx:if
wbutton button
wcheckbox checkbox
wcheckboxgroup checkbox-group
wactionsheet action-sheet
wcanvas canvas
wimage image
wtext text
wview view
wviewbind view 事件
wmap map
wmodal modal
wnavigator navigator
wexport 模块化
wfor for
wform form
wradio radio
wradiogroup radio-group
wslider slider
wicon icon
winput input
wtextarea textarea
winfutautofocus input
wtoast toast
wvideo video
winputfocus input
wlabel label
wloading loading
wpage Page()
wprogress progress
wscrollview scroll-view
wswitch switch
wtemplate template
wswiper swiper
wviewelif view
wviewelse view
wviewif view


小程序API snippet

命令 对应组件或命令
apirequest 网络请求
apiuploadfile 上传文件
apidownloadfile 下载文件
apiconnskt 创建 WebSocket 链接
apionsktopen 监听WebSocket连接打开
apionskterr 监听WebSocket错误
apisendsktmsg 使用 WebSocket发送数据
apionsktmsg 接受消息推送
apicloseskt 关闭WebSocket连接
apionsktclose 监听WebSocket关闭
apichooseimg 选额图片
apipreviewimg 预览图片
apigetimginfo 获取图片信息
apistartrecord 开始录音
apistoprecord 结束录音
apiplayvoice 播放语音
apipausevoice 暂停播放语音
apistopvoice 结束播放语音
apigetbgaudioplayerstate 获取音乐播放状态
apiplaybgaudio 播放音乐
apipausebgaudio 播放暂停音乐
apiseekbgaudio 控制音乐播放进度
apistopbgaudio 停止播放音乐
apionbgaudioplay 监听音乐播放
apionbgaudiopause 监听音乐暂停
apionbgaudiostop 监听音乐停止
apisavefile 保存文件
apigetsavedfilelist 查看保存文件列表
apigetsavedfileinfo 查看保存文件信息
apirmfile 删除缓存文件
apiopendoc 新开页面打开文档
apichoosevideo 视频
apisetstorage 覆盖本地内容
apisetstoragesync 同步覆盖本地内容
apigetstorage 获取指定 key 对应的内容
apigetstoragesync 同步获取指定 key 对应的内容
apiclearstorage 清理本地数据
apiclearstoragesync 同步清理本地数据
apirmstorage 删除本地数据
apirmstoragesync 同步删除本地数据
apigetstorageinfo 获取本地数据信息
apigetstorageinfosync 同步获取本地数据信息
apigetlocation 获取位置
apiopenlocation 查看位置
apichooselocation 打开地图选择位置
apigetnetworktype 网络状态
apigetsysinfo 系统消息
apiaccelerometerchange 重力感应
apicompasschange 罗盘
apisetnavbartitle 动态设置导航条文字
apishownavbarloading 显示导航条加载动画
apihidenavbarloading 隐藏导航条加载动画
apihidekeyboard 收起键盘
apinavigateto 保留当前页面并跳转
apiredirectto 关闭当前页面并跳转
apinavigateback 返回上一个页面
apilogin 登录
apichecksession 检测session
apigetuserinfo 用户信息
apipayment 微信支付
apishowtoast 交互反馈
apihidetoast 交互反馈
apishowmodal 交互反馈
apihidemodal 交互反馈
apishowactionsheet 交互反馈
getSystemInfoSync 同步获取系统信息
apiphonecall 拨打电话

3、小程序的Https协议的SSL证书

我们知道小程序为了提高安全性,做了很多方面的限制,其中有一条就是要求使用HTTPS这种安全性协议来获取数据,如下所示。

因此要求我们的Web API接口必须统一使用HTTPS(其实这也是常规的做法),这就要求我们必须在网站提供443端口服务,需要加入HTTPS证书,这种证书可以从云服务商上购买,如腾讯云、阿里云上的云服务器后台都提供了购买证书服务的通道,当然HTTPS证书年费可不算便宜,但我们也可以使用简单的免费证书先用着。

以阿里云为例,使用阿里云账号登陆后,在【控制台】【安全云盾】【证书服务】里面进行申请。

然后选择购买证书,在购买证书界面上,选择免费的证书,录入相关的资料后提交即可。

购买后,会在订单列表里面有一个待审核的订单,如下所示,等待审核通过即可使用。

有了这些准备,我们就可以在服务器上绑定对应的端口,提供HTTPS协议的接口访问了。

剩下的事情就是关注我们Web API核心接口上的事情,这个方面可以在另外一个主题上进行介绍。