mpvue开发小程序所遇问题及h5转化方案，微信h5支付

来源：未知 浏览 190次 时间 2021-06-17 06:54

项目结构

mpvue开发小程序所遇问题及h5转化方案

环境及依赖

mpvue开发小程序所遇问题及h5转化方案

less-loader,提供嵌套样式谁用谁知道

flyio提供请求便于请求模块的快速转化h5(flyio提供了h5,小程序的请求封装参考mpvue中提供的一个例子写拦截器用于处理后台返回未登录状态跳转页面)自己在小程序中wx.request封装也一样只是转h5又需要做一个axios。

腾讯地图qqMap提供的reverseGeocoder(wx.getLocation只提供了经纬度定位而产品需要的是确认定位后获取城市进行同城商品检索)

阿里云oss对象储存处理文件上传比较意外的是腾讯对阿里云的oss域名前缀进行了封禁后台不能配置解决方案是让后台将该域名进行服务器域名代理。提一嘴最开始用七牛云没有出现这个问题嫌麻烦的可以用七牛

富文本处理使用mpvue例子中提供的mpvue-wxparse当然你也可以自己写

小程序开发过程遇到的问题

使用mpvue是一个非常爽的过程vue的语法基本能正常使用但有几个需要注意的问题

页面传递参数类似get请求?key=value下一个页面采用$mp.query.key获取但是在同类型的页面如商品详情多次key的切换由于页面缓存key会保持不变根据业务不同情况可能不同我采取的方案是在onUnload中清除key虽然mpvue文档官方不推荐用小程序的周期但需要多次切换key的页面目前能够实现先这么处理吧。

最开始仅打算做小程序后来需要补充app需要在开放平台关联小程序后使用unionId以使三端用户相同没有做好产品定位需要重新进行表结构设置。获取方法为利用wx.login获取ivsessionkey解析encryptedData

图片验证码需要带session因此不能直接用img标签发送get请求而是需要要通过filedownload请求地址下载二进制文件后转链接绑定给img

input函数触发聚焦需要先设置:focus先为false再为true进行聚焦

子组件因为只会绑定一次不会触发OnShow周期父组件在onshow周期获取获取不到this.$children

小程序在关闭5分钟内不会被清除部分页面还是需要下拉刷新这个功能可以在main.js开启enablePullDownRefresh: true但会与scroll-view中的下拉冲突只能二选一

我们可以通过swiper嵌套scroll-view进行tab栏组件制作swiper这个组件的高度需要用js写定高度高度通过getSystemInfo获取如果通过弹性布局flex:1;可能导致部分ios旧版本高度撑不开,嵌套比较多就不贴代码了

默认各种小程序原生自带图标是白色如果背景色是白色那么你可能一下子发现不了加载图消失的原因.window里配置backgroundTextStyle:'dark'

小程序有不少保留字需要注意不要重复查看Q&A

前几次提交审核似乎是机器审核代码异常也可以通过。

watch全局vuex会在非当前页面执行如果你拿了$mp里面的参数可能会全局报错

！！！分享需要注意分享出来的是单页没有返回到首页只能点击右上角三点如果还没有进行过操作建议应该先带页面参数到首页经过首页跳转到分享目的页面这样会自然一点目前我的项目基本完成为不影响整个流程我在几个关键页面中判断getCurrentPage().length>1?来判断是否为第一页如果是第一页就显示一个返回首页的按钮实属无奈

转h5实践

小程序与h5需要替换的大概30%页面渲染轻松但组件替换需要花一定时间比较复杂的包括以下vue项目常用部分如果有一两个vue项目相信早就操作过这些部分替换这些组件也就改改业务逻辑采用的ui框架是接近weui的vux

wx这个对象我们可以结合router和vux封装一下其中的navigateToredirectTo等路由及模态框和toast并在webpack.base.conf配置wx指向该文件,这样我们就能直接使用wx这个对象面的方法不用修改

/*webpack.base.conf*/ resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'wx': resolve('src/utils/wxSimulate.js') } }, /*模拟wx的自己写的wxsimilate.js*/ import router from '../router' import Vue from 'vue' import { ConfirmPlugin, ToastPlugin } from 'vux' Vue.use(ConfirmPlugin) Vue.use(ToastPlugin) const wx = { navigateTo ({ url }) { console.log(url) router.push({ path: url }) }, redirectTo ({url}) { router.replace({ path: url }) }, navigateBack () { router.go(-1) }, showToast ({title}) { Vue.$vux.toast.show({ // 组件除show外的属性 text: title }) }, // 模态框显示 showModal ({title, content, success}) { Vue.$vux.confirm.show({ title, content, // 组件除show外的属性 onConfirm () { success && success({confirm: true, cancel: false}) }, onCancel () { success && success({confirm: false, cancel: true}) } }) } } window.wx = wx export default wx

地图(采用vue-amap)不多说面向api编程

标签： 程序需要页面组件

上一篇: 求助实现个点击效果功能
下一篇: 力挺京东618，微信搜索商业化的第一枪打响，拼多多互点群

热门文章

最新文章

QQ咨询