1. 微众小程序的初步介绍
目前作为主流的即时沟通以及支付的APP微信Wechat,在人们的日常生活中已经成功了必不可少的工具。依附于微信环境的小程序是一种不用下载就能使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
微信小程序极大便捷了用户的操作,即点即用。目前受用最频繁的就是北京健康宝或者国家政府服务平台小程序。享受了这些服务而不需要单独去下载相应的第三方APP,从而减少了手机内存的占用。
2. 微众小程序的使用
2.1 小程序的接入流程
一般的接入流程是:1注册,2小程序信息完善,3 开发小程序,4 提交审核和发布。
2.2 注册
登陆 https://mp.weixin.qq.com/ 微信公众平台,选择立即注册,在注册页面上选择【小程序】的注册账号类型
使用邮箱进行注册,在注册过程中选择主体类型为个人。完成注册后即可登陆微信小程序的管理页面。(在每次登陆的时候都会使用自己微信进行登陆授权,同时手机微信会接收到【公众平台安全助手】的登陆提醒)
在页面上就可以完善自己小程序的信息。在左边菜单中有【开发】的选项,选择既可以进入开发的管理页面
2.3 小程序的开发
2.3.1 开发工具的下载
在小程序注册完之后,微信公众平台就会分配一个小程序ID也就是AppID。这个很重要,相当于一个小程序的身份证。在后面的开发中会根据这个AppID创建项目。微信客户端根据这个ID识别项目。
在页面上方右侧选择文档即可进入微信官方文档。在官方文档里会介绍小程序开发的结构目录,还有各种组件,插件等等。选择工具
点击 微信开发者工具 的连接下载开发工具
2.3.2 小程序的开发
打开微信开发工具的界面如下图所示
开发工具和安卓开发有些类似。左端是模拟器,中间是项目结构,右端是代码编辑器,右侧下方是调试器。
新建项目,其中的AppID就是上面所说的ID。后端服务选择不使用云服务。
项目结构里和大多数的开发框架类似,都会存在一个全局的配置同时也会存在自己的个性化配置。其中有四种类型的文件:
- .json 后缀的 JSON 配置文件
- .wxml 后缀的 WXML 模板文件(对应了HTML文件)
- .wxss 后缀的 WXSS 样式文件,(对应了CSS文件)
- .js 后缀的 JS 脚本逻辑文件
小程序运行在宿主环境,分成两层,一个是渲染层,一个是逻辑层。WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。这点和前端的VUE相似,采用双向数据绑定。
<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
varhelloData
={
name
:'WeChat'
}
// Register a Page.
Page({
data
:helloData
,
changeName:
function(e)
{
// sent data change to view
this.setData({
name
:'MINA'
})
}
})
结构中的project.config.json是项目级别的配置文件,例如界面颜色、编译配置等等。app.json用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。其中配置了页面列表,列表中第一项则首页。
"pages":[
"pages/index/index",
"pages/logs/logs"
],
微信为了减少配置代码,增加了响应的约束,就是页面相关的四种类型文件必须使用同一个文件名。
2.3.3 小程序的组件之一:客服会话
在大致了解了项目框架之后,再来了解下其中的一个组件【客服会话】。它是一个按钮button。在官方文档中找到button的组件,可以详细看到它所拥有属性的信息和使用方法。在这些属性里有一个 open-type,它属于微信开放能力的一种。
在首页中 index.wxml中增加一个标签将组件嵌入到页面中。如
<button open-type="contact" > 打开客服会话2 </button>
open-type是contact,一般的插件或者组件都可以在开发工具模拟器上运行而客服会话目前只能在手机上模拟运行。在开发工具上方工具栏中选择真机调试,即可将本地项目编译打包,然后生成二维码。
用自己的手机微信扫描此二维码进入到小程序中。在微众宿主环境渲染的页面中会展示出咱们自己添加的button按钮,点击按钮就可以进入客服消息对话框中了。
上面的客户会话其实是不完整的,在模拟的时候自己把消息发送出去了,但是咱们该怎么样在后台服务接收消息呢?
在小程序平台中的开发设置里下拉会有消息推送的配置栏目,这个一般是默认关闭的。如图:
点击启用后由手机微信确认即可进入到消息推送的配置页面
URL填入自己的服务地址,输入Token,以及消息加密采用的密码,消息加密方式选择兼容方式,数据格式可以选择JSON和XML。
在配置完提交后微信服务器会以get请求访问刚填入的url地址进行验证,通过后就会用post方式将客服消推送到后台服务中,微信服务器推送消息的过程中如果失败的话会尝试推送三次。这样的手机微众上在客服对话框中输出的消息就能实时的推送到自己的后台服务中了,当然消息推送会存在一些时间差。
消息推送提交通过后可以修改配置,但是限制了一个月内只能修改三次。
2.3.4 小程序的发布
在结束调试工作后通过工具上方右侧的上传按钮,就可以将本地代码上传到微信服务器中进行版本管理,作为一个体验版本。在微信公众平台上管理菜单中就可以看到开发版本了。
选中成了体验版本就可以分享二维码给其他人员进行体验使用。但是并不是所有人都可以有权限能够体验使用的,在成员管理中可以添加删除体验成员,当然是根据具体人的微信号来操作。目前微众控制体验人员在15人以内。
在体验版本稳定之后可以根据自身需要是否提交审核,在审核通过后就能成为线上版本。
2.4 使用的总结
上面几节大致可以了解微信小程序的接入以及简单的开发。微信官方提供了相当全面详细的文档,可以辅助开发人员进行需求的开发。从开发的角度上看,熟悉了VUE的开发人员上手小程序的开发是十分容易的。
3 惯例彩蛋
在上述客服消息推送自己后台服务中,自己起的本地服务是局域网中的IP和端口。但是微众服务器肯定连接不上本地的局域网,这个时候怎么办?
网上有第三方可以将内网服务映射到外网,我使用的是 Sunny-Ngrok,官网:https://www.ngrok.cc/,在其网站隧道管理选择一个免费的服务器,开通一个隧道。配置中填入自己的局域网地址,输入自己想好的外网域名。这样微信服务就可以通过这个隧道访问到自己的本机服务了。