uniapp初体验

766 阅读5分钟

9月中旬接到通知要完成一个9月30之前帮助1000多家商户进行线上固定资产投保的功能,由于涉及公众号和mobile端,pc端,时间紧任务重,权衡之下选择了uniapp进行快速开发并打包成H5。这也是第一次接触uniapp。开发文档来都不及细看,没有ui设计,只有一个大概的原型。当用hbuilderx中的uniapp模版运行起来一个hello uniapp时还是很惊喜的,也瞬间有了信心。 整个项目涉及的功能点主要有以下几个部分:

1.路由模式选择--history模式

uniapp默认的路由模式为hash模式,也可以自由切换为history模式。关于两种模式的优缺点相信大家依然明了。

  • hash模式有#,不美观,兼容性强,不请求服务器也无需后端人员进行配合,只是通过切换#之后的path,即可映射到对应的组件,使用起来更简单。
  • history模式是H5新增的api,更像一个正常的url,每次在地址栏输入并加载url相当于去服务器发起一次请求,如果服务器没有进行相应配置,就无法找到对应资源,会报404。 这主要源于二者实现路由切换的原理不同, 本来为了方便也采用了hash模式,但是后续做到微信支付的时候发现微信会把#自动切割掉,以防url传参取参产生错误,最后又将路由模式切换成了history模式,做了公共的404页面。同时要告诉后端同学对nginx服务器做一些配置,尤其要注意try_files后面的路径一定要仔细检查。 44b917a83ab0a10e628abc05f064f26.png 前端记得新建vue.config.js文件,并设置启动服务器的historyApiFallback中index属性为'/index.html'

2.http请求的封装及接口模块化

在根目录新建utils文件夹,创建request.js,在request内对原有的uni.request进行promise封装,还可自定义请求拦截,响应拦截以及获取登陆时存储在localstorage中的token将其添加到公共的请求头,判断当token失效时自动跳转登录页面。

3.登录注册存储token

注册成功之后自动跳转登录页面,登录成功获取后端返回的token,并将其存储到localstorage中备用,uniapp中存储localstorage有同步和异步存储两种方式即#### uni.setStorageSync(key,data)和#### uni.setStorage({ key:key, data:data, success:function(){console.log(success)}}) 一定要注意,如果在request.js中获取token,请记得使用同步方式存储,因为使用异步存储再获取的话,不一定能在发送ajax请求之前拿到token,所以这里最好使用同步的方式存取。

4.如何在网页内预览在线的pdf文档

要想在uniapp开发的项目中实现打开在线的pdf文档,需要借助pdf.js这个插件,直接在其官方网站mozilla.github.io/pdf.js/gett… 下载并解压,将其中的build和web文件夹拷贝到新建在根目录下的hybird目录下的html文件夹,然后创建一个pdfPreview.vue组件,利用uniapp的web-view标签来承载在线的pdf文件,记住一定要在pdf的地址前面加上/hybrid/html/web/viewer.html?file=要预览的pdf的url,将这个地址赋给web-view的src即可

5.computed应用

由于投保信息填写页面,涉及到保额改变的时候同时保费根据一定规则要计算出来,保险止期要根据用户选择的保险起期来计算出来(一般保障期限为1年的话,止期就是起期加一年减一天),因为要监听的变量较少,而且处理的逻辑也很简单,这里就考虑使用computed性能更好,一定要记住computed中的属性是data中没有被声明过的,并且依赖于data中其他属性的变化的才适用噢。

image.png

6.浏览器缓存问题处理

因为浏览器的自动缓存机制,在前端发布新版本的时候有时候会出现渲染的还是老版本的样式和数据,为了解决这个问题,在vue.config.js文件配置了webpack打包时编译的输出文件自动添加参数为v,参数值为时间戳的作为版本号的设置

image.png

7.支付方式--H5支付和JSAPI支付

因为微信浏览器不支持H5支付(不知道为啥,也是够坑的),所以我们又添加了JSAPI这种支付方式,JSAPI就是专门支持微信环境的一种支付方式,H5支付基本都是后端同学实现的,这里就不再说明了,主要说下JSAPI这种支付。首先第一步是安装npm install jweixin-module,然后在main.js导入并挂载到Vue原型上,这样全局就可以访问微信的jssdk中的api了。 点击投保按钮的时候区分下现在的运行环境是否在微信浏览器,如果是就调用后端同学专门针对jsapi写的下单接口,获取一些配置参数eg:prepay_id和paySign等,拿到这些配置参数之后,前端利用WeixinJSBridge.invoke唤起微信的支付,在invoke的回调里根据支付结果eg:res.err_msg == "get_brand_wcpay_request:ok"去处理一些业务逻辑即可。

image.png

ok,大概就这些啦。