开始编写一个新应用
登录微信企业号,https://qy.weixin.qq.com/
手机微信扫码,进入你自己的微信测试号。
下面我们以 “工单管理应用”(workorder)为例,介绍配置流程:
如下篇幅已废止,暂保留
在wx-anhui/server/main.js 文件中,有如下对应设置位置:
//挂载微信事件通知到/event
man.app.use('/event/sysconfig',man.wx.apps.sysconfig.router);//这是原来就有的
man.app.use('/event/businesshandling',man.wx.apps.businesshandling.router); //这是我们这次新加的
1,添加微信事件处理
在 server/wxevent目录下,新建本应用的事件处理程序:workorder.js;
可以拷贝其它的文件,比如:sysconfigs.js;在它的基础上修改即可;
2, 在微信端新增应用
1,“应用中心”-》"新建应用";需要菜单模式的,选择“消息型应用”;
2,设置一下应用的图标、名称、简介和部门(标签)授权.
3,保存,回到“应用中心”,就能看到新的应用图标了。
3,配置微信应用
1,在应用中心里,点击应用图标进入设置界面:
2,配置: 可信域名 ----wx.magicmind.cn:7602,
3, 配置:回调模式
4,“回调URL及密钥”的设置中,
URL:http://wx.magicmind.cn:7602/wxevent/workorder
Token (新加的应用,随机生成)
EncodingAESKey (随机生成)
5, 将以上url及密钥信息,写入 /server/wangyu.wx.js 中的参数设置,举例如下:
anhui.qy.initApp(
{
sysconfig: { // 这是之前已有的
agentid:14,
entToken: "krYJtaJdNhYIcTzXuPura9GqwAC",
encodingAESKey: '7VMII7EzLaS43oeGkavCW4IpgsXnU5KkOR5oqfZM5e6',
},
workorder: { // 这是我们本次新加的
agentid:9,
entToken: "krYJtaJdNhYIcTzXuPura9GqwAC", //按照微信号里生成的写
encodingAESKey: '7VMII7EzLaS43oeGkavCW4IpgsXnU5KkOR5oqfZM5e6',
},
});
如果在保存时,报url验证失败,请检查:
- 云上的服务起没起,
- 应用id、URL及2个密码都设置一致没有!
4,创建菜单项
我们约定,每个应用,在html目录中建立一个对应的子目录,下面的菜单项建立对应的html文件;所以我们新建:html/workorder目录,在里面新建一个wo_newuser.html文件,此文件为用户报装的新建工单菜单项;
在创建菜单项后,里面有跳转至页面的设置,如下设置:
http://wx.magicmind.cn:7602/workorder/wo_newuser.html
设置好菜单项后,记得一定要点界面下面的“保存”和“发布”!!!
这样才能在微信中出现啊!
下面,你就可以编辑自己的页面了
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="stylesheet" href="/sitedoc.css">
<link rel="stylesheet" href="/zcontrols/zcontrols.css">
<link rel="stylesheet" href="http://wxstatic.magicmind.cn/css/font-awesome.min.css">
<title>我的信息</title>
<link rel="icon" href="/favicon.ico">
<script src="http://wxstatic.magicmind.cn/js/jquery.min.js"></script>
........
<script src="/zcontrols/zcontrols.js"></script>
<script src="/rest_wx_api.js"></script>
<style>
</style>
</head>
<body ng-app="operatorinfoApp" ng-controller="operatorinfoCtrl" ng-cloak="true">
<div ng-include="'../header.html'"></div>
<div class="content">
<div ng-include="'../footer.html'"></div>
</div>
</body>
<script>
var operatorinfoApp = angular.module('operatorinfoApp', ['sprintf','zControls','ngMessages','restWxApi']);
operatorinfoApp.controller('operatorinfoCtrl', function (wxapi,$scope)
{
$scope.user = {};
wxapi.apiLogin.onReady(function()
{
$scope.$apply(function()
{
$scope.user = wxapi.wxUser; console.log('LOGIN READY',$scope.user);
});
});
$scope.deptTree=[]; });
</script>
</html>
一般的页面就是这么一个结构。
微信 web开发者工具
下载安装最新版的微信 web开发者工具;
在右上方的url输入框中,输入你要调试的页面路径:http://wx.magicmind.cn:7602/sysconfig/operatorinfo.html