基于微信小程序的系统开发准备工作

腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多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核心接口上的事情,这个方面可以在另外一个主题上进行介绍。

本文转自博客园伍华聪的博客,原文链接:基于微信小程序的系统开发准备工作,如需转载请自行联系原博主。

时间: 2024-09-27 17:47:53

基于微信小程序的系统开发准备工作的相关文章

微信小程序应用号开发教程!博卡君通宵吐血赶稿

微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧 对了,昨天晚间微信小程序开发文档官方版发布了 微信公众平台小程序目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧.(公司的项目保密还不能分享代码和截图.博卡君是边加班边偷偷给大家写教程.感谢「名片盒」团

微信小程序应用号开发教程详解_其它综合

微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧 微信公众平台小程序目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧.(公司的项目保密还不能分享代码和截图.博卡君是边加班边偷偷给大家写教程.感谢「名片盒」团队提供他们的服务号来动这个手术,所以博卡君的教

开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及后期处理过程,包括证书的IIS端口绑定,以及解决""小程序要求的 TLS 版本必须大于等于 1" 的问题. 1.证书申请及成功的后续处理 小程序的配置要求我们必须在网站提供443端口服务,需要加入HTTPS证书,这种证书可以从云服务商上购买,如腾讯云.阿里云上的云服务器后台都提供

整合微信小程序的Web API接口层的架构设计

在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介绍了相关模块的划分,在<基于微信小程序的系统开发准备工作>介绍了Web API的架构设计思路.本篇随笔对之前介绍的架构内容进行统一的调整更新,以便更加方便实际项目的应用开发,以期达到统一.重用.清晰的目的. 1.公众号.企业号.小程序模块的划分 我们知道,目前微信企业应用,分为公众号.企业号(企业

微信小程序购物商城系统开发系列-目录结构介绍_javascript技巧

上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的小demo. 这一篇文章我们主要的是介绍一下小程序的一些目录结构,以及一些语法,为我们后面的微信小程序商城系统做铺垫. 首先我们来了解下小程序的目录结构 Pages 我们新建的一些页面将保存在这个文件夹下面,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js.index.

移动开发之微信小程序——资料集合

本文转载自:知乎 有需要下载的客官可可以点击知乎去下载相关资料 一:官方地址集合:1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index

《微信小程序开发入门精要》——第1章,第1.1节什么是微信小程序

第1章 微信小程序入门微信小程序开发入门精要微信小程序是腾讯在2016年9月推出的一种新型的微信扩展.尽管目前还没有正式开发,但依然受到了非常多的关注.这主要是由于腾讯的影响力,以及微信在国内拥有的庞大的用户群体.在2017年1月9日,腾讯已经正式上线了小程序,这意味着任何人都可以在手机微信中使用小程序.由于目前小程序的数量还不多,所以现在进入小程序开发领域,可能会赶上小程序的第一拨红利.OK,废话少说,从本章开始,让我们深入了解微信小程序的原理以及详细的开发过程. 本章要点什么是微信小程序注册

微信小程序开发教程第七章:微信小程序编辑名片页面开发

前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开发,第六章:「我」的页面开发) 编辑名片有两条路径,分为新增名片流程与修改名片流程. 用户手填新增名片流程: 首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId,wx.navigateTo 带值跳转.Manual 为 true 设置用户走的是新增路线. 新增名片页面 1 基本

微信小程序开发教程第五章:微信小程序名片夹详情页开发

前面我们发布了博卡君的微信小程序开发教程前四章,现在接着更新第五章:微信小程序名片夹详情页开发.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发)   今天加了新干货!除了开发日志本身,还回答了一些朋友的问题. 闲话不多说,先看下「名片盒」详情页的效果图:   备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息.点击微信栏.点击存入手机,地址栏需要地图展示,名片分享也是模态框指引. 首先是轮播图,autoplay 自动播放,interval 轮播