微信开发二三事

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/