2.微信开发相关
<p>主要内容：
当前开发都是什么样的项目，都应用到了哪些微信开发需要的技术；</p>
<p>[TOC]</p>
<h2>1.微信开发概述</h2>
<p><strong>微信开发的特点</strong></p>
<ul>
<li>前端：通过JSSDK为网页提供系统级权限（如调起摄像机）和相关集成功能组件（如支付）；</li>
<li>后端：建立应用与用户之间关联（无需用户注册，天然的拥有用户信息和用户所有关系链）；
从我们使用软件程序的流程来看，使用一个程序之前的注册登录模块被省略了，节省的获取用户的成本。</li>
</ul>
<h2>2.微信开发前端相关</h2>
<p>目前涉及到微信项目开发，前端主要集中在微信网页开发上。主要是利用微信平台JSSDK赋予网页的“特殊”能力，来实现一些相关功能。</p>
<h4>JSSDK常用接口</h4>
<ul>
<li>分享接口</li>
<li>图像接口</li>
<li>界面操作</li>
<li>微信支付
<a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115" title="其他更多接口及详细用法">其他更多接口及详细用法</a></li>
</ul>
<h4>调用JSSDK步骤</h4>
<ol>
<li>步骤一：绑定域名</li>
<li>步骤二：引入JS文件</li>
<li>步骤三：通过config接口注入权限验证配置</li>
<li>步骤四：通过ready接口处理成功验证</li>
<li>步骤五：通过error接口处理失败验证</li>
</ol>
<p><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115" title="查看详细">查看详细</a></p>
<h4>常见项目类型</h4>
<h5>1. 微信宣传营销页</h5>
<ul>
<li>要求：需求一般比较简单，主要用于宣传或者营销，比较强调视觉动画效果；</li>
<li>接口：自定义分享</li>
<li>示例：新年牌</li>
</ul>
<h5>2.微信活动（需获取用户信息）</h5>
<ul>
<li>要求：需要标记用户，需要获取微信用户信息，</li>
<li>接口：通过网页授权取得微信用户信息，然后跳转到真实的活动页面地址上，微信用户信息通过参数的信息传递过去。</li>
<li>示例：红包分享</li>
<li>注意：用户已经关注了请求授权的公号，该公号会自动获取用户的授权，无需再次询问；若未关注，则会弹出请求授权的弹窗，如下图所示，只用用户点击同意了授权，才会前往授权的地址。</li>
</ul>
<p><img src="http://doc.uc108.org:8002/Public/Uploads/2018-07-17/5b4de3a9dab10.jpg" alt="" /></p>
<p>同时，用户即使同意了授权，并不意味着用户已经关注了该公号，关注和授权是两个概念。</p>
<h5>3.微信支付类</h5>
<ul>
<li>要求：在公众号页面内直接实现微信支付；</li>
<li>
<p>接口：微信支付接口。微信对支付做好相关的功能上的封装，前端只用传递对应的订单数据，就可以十分方便的调用微信提供的支付功能。
<img src="http://doc.uc108.org:8002/Public/Uploads/2018-07-17/5b4de6792ce5d.jpg" alt="" />
<img src="http://doc.uc108.org:8002/Public/Uploads/2018-07-17/5b4de68c798e6.jpg" alt="" /></p>
</li>
<li>示例：如银子充值，见【同城游公众号--菜单--充值--银子充值】</li>
<li>注意：支付界面的调起比一般的JSSDK多了一层认证上的要求，即当前发起请求的页面必须要在微信后台配置的授权目录之下，否则会调起失败。</li>
</ul>
<h5>4.微信账号与同城游账号互通类</h5>
<ul>
<li>要求：通过微信账号获取同城游账号信息；</li>
<li>接口：网页授权接口。
基于系统的同城游账号和微信账号绑定功能，二者数据产生了关联。在用户绑定了账号的前提下，通过获取用户的微信信息可以获得用户的同城游账号，进而实现同城游的相关功能。</li>
<li>示例：微信公众号内充值购买银子和元宝。</li>
</ul>
<h2>3.微信开发后端相关</h2>
<h4>1.微信JSSDK注册接口</h4>
<p>前端调用JSSDK进行网页的开发的前提是对当前的页面地址进行注册认证，只有认证成功后，页面才会具备JSSDK赋予的各种接口能力。</p>
<p>`</p>
<pre><code>wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。-------前端填写
appId: '', // 必填，公众号的唯一标识-------需要后端返回
timestamp: , // 必填，生成签名的时间戳-------需要后端返回
nonceStr: '', // 必填，生成签名的随机串-------需要后端返回
signature: '',// 必填，签名-------需要后端返回
jsApiList: [] // 必填，需要使用的JS接口列表-------前端填写
});`</code></pre>
<p>注：后端返回的几项参数，都是需要以公众号的AppId和AppSecret为基础计算获得的，如果放在前端就会暴露出去。</p>
<h4>2.获取微信用户信息</h4>
<p>页面直接访问或者自动跳转到公众号的网页授权地址，服务端会获取当前的用户的微信信息（前提是用户同意授权或者已经关注该公号）。
获取的微信信息包括：</p>
<ul>
<li>微信昵称（需要注意微信昵称为表情的情况）</li>
<li>微信头像</li>
<li>微信相对该公号的唯一的openid
注：每个用户相对其关注或者授权的公号都会生成一个唯一的openid；</li>
</ul>
<h4>3.获取同城游账号信息</h4>
<p>因为同城游账号有一个和微信账号绑定的功能，是基于同城游公众号完成的，所以目前的项目在通过同城游公号网页授权之后，可以凭借获取到openid去获取同城游账号信息。
微信账号与同城游账号绑定情况</p>
<ul>
<li>同城游账号id（前提是已经绑定）</li>
<li>同城游账号昵称（前提是已经绑定）</li>
<li>同城游账号头像（前提是已经绑定）</li>
<li>同城游账号其他信息（前提是已经绑定）</li>
</ul>
<h4>4.返回支付接口数据</h4>
<p>前端调用微信支付接口所需数据</p>
<pre><code class="language-javascript">wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});</code></pre>
<h2>4.微信设计相关规范</h2>
<p>设计风格和规范参照WeUI</p>
<p><strong>WeUI</strong>
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
<a href="https://weui.io/">https://weui.io/</a></p>
<p><strong>weui.js</strong>
WeUI 的轻量级 js 封装。
<a href="https://weui.io/weui.js/">https://weui.io/weui.js/</a>
安装方法
<a href="https://www.npmjs.com/package/weui.js">https://www.npmjs.com/package/weui.js</a></p>
<ul>
<li>设计素材下载
<a href="https://developers.weixin.qq.com/miniprogram/design/index.html?t=2018724">https://developers.weixin.qq.com/miniprogram/design/index.html?t=2018724</a></li>
</ul>
<h2>5.微信开发测试</h2>
<p><strong>微信web开发者工具</strong>
<a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140">https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140</a></p>
<p><strong><em>注意：以真机微信测试结果为最终标准，模拟测试有时不完全反应真机的情况；</em></strong></p>
<p><strong>Chrome浏览器模拟微信访问的方法</strong>
<a href="https://blog.csdn.net/gysea123321/article/details/78674923">https://blog.csdn.net/gysea123321/article/details/78674923</a></p>
<h2>6.附录：相关开发文档附录</h2>
<p><strong>腾讯移动WEB开发平台</strong>（空间应用，手机QQ，QQ空间，企鹅FM）
<a href="http://open.mobile.qq.com/index">http://open.mobile.qq.com/index</a></p>
<p><strong>微信JSSDK开发文档</strong>
<a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115">https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115</a></p>
<p><strong>微信支付相关文档</strong>
<a href="https://pay.weixin.qq.com/wiki/doc/api/index.html">https://pay.weixin.qq.com/wiki/doc/api/index.html</a></p>
<p><strong>微信小程序开发文档</strong>
<a href="https://developers.weixin.qq.com/miniprogram/dev/">https://developers.weixin.qq.com/miniprogram/dev/</a></p>