uniapp开发微信公众号页面

背景介绍：第一次使用uni-app开发项目，所以选择了平台推荐的编辑工具HBuilder X来开发。前端UI框架选择的uview。

PS;这篇文章依然是作为项目开发的总结文章。都是在项目的实际开发中遇到的问题及自己的解决思路方法，都很实用的。

1、框架搭建：

打开HBuilder X 文件 -> 新建 ->项目，选择uview模板，之后工具就会为我们引入uView的相关组件及配置文件。

2、代理设置

现在都是前后端分离，那就避免不了跨域的问题，前端流行的解决也是我常用的就是在开发阶段设置代理，这个需要后台同学帮助的。我这里只介绍前端相关配置了。

 打开mainfest.json，点击源码视图，找到H5配置，在devServe中填写proxy配置，具体看下图，大部分项目都不会放在服务器根目录的，所以都需要设置服务根部门，我们的是放在mnblm文件夹下，所以在proxy中就要设置/mnblm/api(由于开发和测试环境有关，所以需要加上api，可根据实际项目配置)。target就是代理地址了，问后台要就可以。

参考链接：https://www.jianshu.com/p/8cb6efb9f628

之后就是api的设置了，也来个图片吧，更直观些。这样配置之后，如果没有特殊需要基本上就不需要配置baseurl了。

 3、请求拦截

只要在common->http.interceptor.js中作相应的设置就可以，添加token，userId等等。还是如下图??

3.1基本配置

 3.2请求时的动态配置，也就是token，userId之类的，这里在多一嘴，要想持久存贮得放在cookie中，localStorage是不行的，用户退出会被清除的。

3.3 请求响应，自己根据需要设置即可

3.4 每个接口的特殊设置，在http.api.js中单独设置，??：

 4、路由守卫

设置了请求拦截，还得有页面的鉴权处理，页面跳转时也要判断用户是否登录，需要在项目根目录新建router.js。这里需要安装一个插件, npm install -S uni-simple-router，然后在router.js中import进来RouterMount和createRouter，具体配置看??图。正常跳转别忘记调用next()方法，拦截跳转到登录页也要调用next()跳转，此时next（）接受一个对象url是跳转路径，还可以添加参数query，query也是对象类型，里面是你要传递的参数。可以保证授权成功后再跳转回来时保留原参数。

参考：https://www.cnblogs.com/XHappyness/p/13808413.html

常规配置完成，基本可以开发了。接下来的都是业务开发中遇到的一些问题了。

 5、微信授权

这一部分也是很多微信开发的新人苦恼的地方，不知道该是前端做，还是后台处理，我的建议是最好服务端处理，因为前端只能拿到code，无法获取openid，这个安全级别较高，微信服务器是不会返回给前端的，只能服务端获取发送给前端。微信开放文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html。

说下我的做法，前端发起授权，向微信服务器请求code，之后发送服务端，由服务端去向微信服务器请求openid及access_token等信息，再返回前端。

首先要获取当前url，设置为redirect_uri，设置公众号appId，response_type设为code，scope设为snsapi_base（静默授权，只能拿到openid），state是回调时的参数，可以随便设置。记住这个要使用页面跳转的方式请求code，请求成功后，微信服务器会返回到你指定的redirect_uri的地址，将code及state参数拼接到url后面，??

 在onload中获取返回的code，大概地址是这样的，https://域名/mnblm/pages/account/account?code=你需要的Code值&state=123，从url中截取你需要的code就可以了，再发给后端就可以了。剩下的工作就交给后端吧。

5、引用外部api，如百度地图api

前端使用会有跨域的问题，这里使用是jsonP的方式，使用了一个插件，npm install -S vue-jsonp，然后在main.js中引入下就行了

PS：报如下??错误的，就需要后台服务做响应安全设置，前端是解决不了的，不要瞎浪费时间琢磨了（其他外部Api通用）。

 6、文件上传如果超过1M也是要在服务端修改默认设置，修改上传文件大小设置。如果自己使用input框 实现图片上传，在上传成功后要记得清空input的value，防止再选择相同文件时，无法选择的问题。

好了，大概就这么多了。