mpvue开发小程序及h5转换方案项目结构|---build|---pages.js文件目录|---src|---component子组件|---pages|---业务页面|---store,vuex存储|---utils|---requestapi.js|---format格式化插件，vue不能用在小程序中内置格式化只能手动修改后台返回的时间戳、价格、订单状态等|---request封装fly用于请求响应拦截|---wx.js环境依赖less-loader，提供嵌套styles，谁知道flyio提供了requests，方便request模块快速转换为h5（flyio提供h5，小程序的request封装，参考mpvue中提供的例子写一个拦截器，用于后台处理返回到非登录状态跳转页面），小程序中的wx.request包也是如此，只是需要做一个axios来转换h5。腾讯地图qqMap提供的reverseGeocoder（wx.getLocation只提供经纬度定位，产品需要的是确认位置后获取城市，搜索同城产品）。oss域名前缀被屏蔽，无法在后台配置。解决办法是让后端使用域名作为服务端域名的代理。顺便提一下，最初使用七牛云时并没有出现这个问题。嫌麻烦可以用七牛！富文本处理，使用mpvue例子中提供的mpvue-wxparse，当然你也可以自己写小程序开发过程中遇到的问题使用mpvue是一个很爽的过程。vue的语法基本可以正常使用，但是有几个问题需要注意。页面传递参数类似于getrequests?key=value，下一页使用$mp。产品详情等页面类型有多个key切换，因为页面缓存key会保持不变，可能会根据业务情况不同。我采用的方案是在onUnload中清除key。虽然mpvue官方文档不推荐使用小程序的循环，但是需要多次切换按键的页面可以先这样处理。一开始只是打算做一个小程序。后来需要补充app。需要在小程序关联的开放平台后使用unionId，让三个终端的用户一致。产品定位没做好，需要重新设置表结构。获取方式是使用wx.login获取iv，sessionkey需要有session解析encryptedData图片验证码，所以不能直接发送带img标签的get请求，需要下载二进制文件通过filedownload请求地址然后传链接到imginput函数触发focus需要先设置focus：focus先为false再为true聚焦子组件，因为只会绑定一次，不会触发OnShow循环，以及关闭onshow循环后5分钟内父组件将无法获取this.$children页面清空部分仍需下拉刷新此功能。可以在main.js中开启enablePullDownRefresh:true，但是会和scroll-view中的下拉冲突。你只能选择两者之一。tabbar组件的制作我们可以使用swiper嵌套scroll-view，swiper组件的高度需要用js写，通过getSystemInfo获取高度。如果灵活布局是flex:1;可能会导致某些老版本ios的height打不开。嵌套太多，代码就不贴了。小程序的原始图标是白色的。如果背景颜色是白色，那么你可能无法找到加载图像一下子消失的原因。在window中配置backgroundTextStyle:'dark'小程序有很多保留字，需要注意不要重复。查看Q&A前几个投稿审核好像是机器审核，代码异常也能通过。watchglobalvuex会在非当前页面执行。如果在$mp中取参数，可能会全局报错。API，filter函数复用，导入的js每次导入都会直接复制整个js，60页重复60次，我们可以把这部分publicjs放到vendor.js里，只打包一次，包大小有变化较大，修改webpack，参考issuetoh5实践小程序，大约30%的页面需要替换成h5渲染容易，但是组件替换需要一定的时间。比较复杂的包括以下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')}},/*wxsimilate.js自己写的模拟wx*/importrouterfrom'../router'importVuefrom'vue'import{ConfirmPlugin,ToastPlugin}from'vux'Vue.use(ConfirmPlugin)Vue.use(ToastPlugin)constwx={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({//显示文本以外的组件属性：title})},//模态框显示showModal({title,content,success}){Vue.$vux.confirm.show({title,content,//除了显示以外的组件属性onConfirm(){success&&success({confirm:true,cancel:false})},onCancel(){success&&success({confirm:false,cancel:true})}})}}window.wx=wxexportdefaultwxmap（使用vue-amap），不多说了，对于api编程上下加载使用betterscroll封装了一个滚动组件Slot，slot文章参考点左侧的rpx在less+flexible中被@rpx替换，只需要将所有rpx替换为@rpx即可，不懂的朋友可以去看rem相关/*mpvue*/
