1.auth.js
初衷:集微信、微博、 QQ 等第三方的统一auth授权组件。
由于业务比较急,只保留了微信的授权绑定功能。
2.WeUI
WeUI 为微信 Web 服务量身设计,
概述:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
https://weui.io
https://weui.io/example
官方wiki:https://github.com/weui/weui/wiki
3.微信 Web开发者工具
http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
4.微信 JSSDK
说明文档
http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN
所有基于微信的交互操作,前提是认识微信公众平台。
服务号,订阅号,企业号
服务号,
1.旨在为用户提供服务。如:招商银行、中国南方航空。2.1(4)/30day
3.可申请自定义菜单。
订阅号,
1.为用户提供信息和资讯。如:骑行西藏、央视新闻。
2.1/1 day
3.订阅号不支持申请自定义菜单。
企业号
1.面向人群:面向企业,政府、事业单位和非政府组织,实现生产管理、协作运营的移动化。
2.200次/1 min
3.仅通讯录成员可关注。
开发环境准备
微信准备
1、需要注册微信公众平台账号
2、认证微信平工作账号
3、申请开发者ID(微信接口交互使用)
4、开通微信高级接口,企业号认证即可
开发环境准备
1、公网独立IP服务器(微信接口交互回调,做授权验证)
2、80端口未占用,企业号的支持443端口
3、公网域名(对微信开发站点进行域名绑定,微信授权回调,又域名可以无需IP)
微信授权原理
1,查看是否有使用这东西的权限
2,修改:写上域名,一定要注意上面准备写的内容。
微信浏览器授权的前提:
拥有微信公众号,即有APPID,APPSecret,并设置了授权回调域
1.获得code
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=URL&response_type=code
&scope=snsapi_userinfo&state=123#wechat_redirect
如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。
2.第二步:通过code换取网页授权access_token : https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
3.拉取用户信息
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
授权原理:
微信授权的流程是通过前端在需要授权的时候,跳转微信服务器(携带参数以及回调域),会弹出授权提醒,用户同意后,通过访问授权链接,微信帮你跳转回调域URL即redirect_uri并带上code参数,之后你就可以进行后续操作了(用户接触到是授权,也就是获得code这步)。
JSSDK使用步骤
步骤一:绑定域名:公众号; 开发--基本配置
步骤二:引入JS文件
http://res.wx.qq.com/open/js/jweixin-1.0.0.js
步骤三:通过config接口注入权限验证配置
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: this.appid, // 必填,公众号的唯一标识
timestamp: jssdk.timestamp, // 必填,生成签名的时间戳
nonceStr: jssdk.noncestr, // 必填,生成签名的随机串
signature: jssdk.signature,// 必填,签名
jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表
});
步骤四:通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法。
});
步骤五:通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数
});
所有接口通过wx对象(也可使用jWeixin对象)来调用
1.success:接口调用成功时执行的回调函数。
2.fail:接口调用失败时执行的回调函数。
3.complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
4.cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
5.trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。
微信开发-自定义菜单
方法:通过POST一个特定结构体,实现在微信客户端创建自定义菜单。
请求地址:https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
文档
demo:
{
"button":[
{"type":"click","name":"测颜值","sub_button":[
{"type":"view","name":"测测测","url":"http://XXXXXXXXXXXXXXXXX"}]
},
{"type":"click","name":"业务流程","key":"BUTTON_3"},
{"name":"时报实话","sub_button":[
{"type":"click","name":"懒真专栏","key":"BUTTON_ZAN"}]
},
{"type":"click","name":"业务流程","key":"BUTTON_3"},
{"name":"潮数码","sub_button":[
{"type":"click","name":"有问题","key":"BUTTON_ZAN"},
.........
]
}
]
}
菜单结构及说明:
{
"button":[ //button定义该结构为一个菜单
{
"name":"分支主菜单名",
"sub_button":[ //sub_button定义子菜单
{
"type":"click", //按钮类型
"name":"分支子菜单名1", //菜单名称
"key":"loveSuzhou" //菜单key值
},
{
"type":"view",
"name":"分支子菜单名2",
"key":"http://xxxxxxxxxx"
}]
}, //菜单之间用 , 分隔
{
"type":"click",
"name":"独立菜单",
"key":"lianxiUs"
}]
}
1、click:点击推事件
用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event 的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互;
2、view:跳转URL
3、scancode_push:扫码推事件
4、scancode_waitmsg:扫码推事件且弹出“消息接收中”提示框
5、pic_sysphoto:弹出系统拍照发图
6、pic_photo_or_album:弹出拍照或者相册发图
7、pic_weixin:弹出微信相册发图器
8、location_select:弹出地理位置选择器
9、media_id:下发消息(除文本消息)
10、view_limited:跳转图文消息URL
微信自定义菜单生成器
http://menu.fangbei.org/