uniapp开发微信公众号页面

何必在乎我是谁 發表於 2021-9-16 16:24:00

背景介绍：第一次使用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
<img src="https://img2020.cnblogs.com/blog/1234365/202109/1234365-20210916151502085-1542897906.png">
之后就是api的设置了，也来个图片吧，更直观些。这样配置之后，如果没有特殊需要基本上就不需要配置baseurl了。
<img src="https://img2020.cnblogs.com/blog/1234365/202109/1234365-20210916152204877-1715455458.png">
 
 
 3、请求拦截
只要在common->http.interceptor.js中作相应的设置就可以，添加token，userId等等。还是如下图👇
3.1基本配置
<img src="https://img2020.cnblogs.com/blog/1234365/202109/1234365-20210916152926003-127422660.png">
 
 
 3.2请求时的动态配置，也就是token，userId之类的，这里在多一嘴，要想持久存贮得放在cookie中，localStorage是不行的，用户退出会被清除的。
<img src="https://img2020.cnblogs.com/blog/1234365/202109/1234365-20210916153008207-2147247532.png">
 
 
3.3 请求响应，自己根据需要设置即可
<img src="https://img2020.cnblogs.com/blog/1234365/202109/1234365-20210916153232404-1641758062.png">
3.4 每个接口的特殊设置，在http.api.js中单独设置，👇：
<img src="https://img2020.cnblogs.com/blog/1234365/202109/1234365-20210916154730550-1385431398.png">
 
 
 
 
 
 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
<img src="https://img2020.cnblogs.com/blog/1234365/202109/1234365-20210916153653430-1014294644.png">
 
 
常规配置完成，基本可以开发了。接下来的都是业务开发中遇到的一些问题了。
 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后面，👇
<img src="https://img2020.cnblogs.com/blog/1234365/202109/1234365-20210916160024038-1044788657.png">
 
 
 在onload中获取返回的code，大概地址是这样的，https://域名/mnblm/pages/account/account?code=你需要的Code值&state=123，从url中截取你需要的code就可以了，再发给后端就可以了。剩下的工作就交给后端吧。
5、引用外部api，如百度地图api
前端使用会有跨域的问题，这里使用是jsonP的方式，使用了一个插件，npm install -S vue-jsonp，然后在main.js中引入下就行了
<img src="https://img2020.cnblogs.com/blog/1234365/202109/1234365-20210916162028151-88341663.png">
 
 
PS：报如下👇错误的，就需要后台服务做响应安全设置，前端是解决不了的，不要瞎浪费时间琢磨了（其他外部Api通用）。
 
 <img src="https://img2020.cnblogs.com/blog/1234365/202109/1234365-20210916161408528-581562976.jpg">
 
 6、文件上传如果超过1M也是要在服务端修改默认设置，修改上传文件大小设置。如果自己使用input框实现图片上传，在上传成功后要记得清空input的value，防止再选择相同文件时，无法选择的问题。
 
好了，大概就这么多了。
  
来源：https://www.cnblogs.com/brand-code/p/15294074.html

頁: [1]

琼殿技术论坛's Archiver

uniapp开发微信公众号页面