范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-mpvue开发微信小程序h5转化方案

07-07 亚博APP
摘要:利用mpvue开辟微信小法式是一个很是爽的进程,vue的语法根基能正常利用但有几个需要留意的问题。

小法式开辟进程碰到的问题

利用mpvue是一个很是爽的进程,vue的语法根基能正常利用但有几个需要留意的问题

页面传递参亚博数近似get要求?key=value,下一个页面采取美金mp.query.key获得可是在同类型的页面如商品详情屡次key的切换因为页面缓存key会连结不变,按照营业分歧环境可能分歧,我采纳的方案是在onUnload中断根key,固然mpvue文档官方不保举用小法式的周期,但需要屡次切换key的页脸孔前可以或许实现先这么处置吧。

最最先仅筹算做小法式,后来需要弥补app,需要在开放平台联系关系小法式后利用unionId以使三端用户不异,没有做好产物定位,需要从头进行表布局设置。获得方式为操纵wx.login获得iv,sessionkey解析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\'

小法式有很多保存字需要留意不要反复。

前几回提交审核仿佛是机械审核,代码异常也能够经由过程。

watch全局vuex会在非当前页面履行,假如你拿了美金mp里面的参数可能会全局报错

项目布局

|---build

|---pages.js文件目次

|---src

|---component子组件

|---pages

|---营业页面

|---store,vuex贮存

|---utils |---要求api.js |---format格局化插件,小法式中不克不及利用vue自带的格局化只妙手动点窜后台返回的时候戳,价钱,定单状况等 |---request封装fly进行要求响应阻挡 |---wx.js

情况和依靠

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

flyio供给要求便在要求模块的快速转化h5(flyio供给了h5,小法式的要求封装,参考mpvue中供给的一个例子写阻挡器,用在处置后台返回未登录状况跳转页面),本身在小法式中wx.request封装也一样,只是转h5又需要做一个axios。

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

阿里云oss对象贮存处置文件上传,比力不测的是腾讯对阿里云的oss域名前缀进行了封禁后台不克不及设置装备摆设,解决方案是让后台将该域名进行办事器域名代办署理。提一嘴,最最先用七牛云没有呈现这个问题,嫌麻烦的可以用七牛

/

富文本处置,利用mpvue例子中供给的mpvue-wxparse,固然你也能够本身写

小法式与h5需要替代的大要30%页面衬着轻松,但组件替代需要花必然时候,比力复杂的包罗以下vue项目经常使用部门,假如有一两个vue项目相信早就操作过这些部门,替代这些组件也就改改营业逻辑,采取的ui框架是接近weui的vuxwx这个对象我们可以连系router和vux封装一下此中的navigateTo,redirectTo等路由和模态框和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编程

上下拉加载采取betterscroll封装一个scroll组件进行slot,slot文章参考点左侧

rpx采取less+flexible中@rpx取代,只需要把所有rpx换成@rpx便可,不懂的小火伴可以去看一下re

相干/*mpvue*/

#index {padding:100rpx 20rpx 110rpx;}

/*vue*/

@charset utf-8;

@rpx: 117.188rem;

#index {padding:100/@rpx 20/@rpx 110/@rpx;}

flyio从mpvue搬过来根基不变

适才mpvue中提到的阿里云oss上传需要点窜设置装备摆设文件中的uploadFile为h5中的FormData进行文件上传 二者的input聚焦函数营业分歧,h5中ios不答应函数吊起聚焦需要用户本身手点,安卓仍是可以的el.focus()进行。

保举浏览:微信小法式开辟教程微信小法式

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数