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,防止再选择相同文件时,无法选择的问题。

 

好了,大概就这么多了。

 

posted @ 2021-09-16 16:24  剑气风尘  阅读(2398)  评论(0编辑  收藏  举报