两个月的微信小程序尝试
赶上小程序的热潮,公司项目肯定也要跟一波风。私以为小程序就应该一两个页面,简简单单,结果我们第一个版本就来了十几个页面,三十个接口。。。
因为习惯了用vue
,所以为了快速上手,决定采用mpvue
,直接按照官方文档很容易把框架搭好,就只介绍一下遇到的一些问题
1、mpvue-entry
原来的写法是,每个页面都有一个main.js
的配置文件,这样文件数量就很大,为了更接近vue
的写法,一个页面一个*.vue
文件,引入了mpvue-entry
mpvue-entry
:集中式页面配置,自动生成各页面的入口文件,优化目录结构
// webpack.base.conf.js
...
var MpvueEntry = require('mpvue-entry')
module.exports = {entry: MpvueEntry.getEntry('c/pages.js'),...
}
// pages.js
module.exports = [{path: 'pages/home'
}, {path: 'pages/post'
}]
2、自定义导航栏
- 无法部分配置,要么全部用原生,要么全部改自定义
mpvue
引入了postcss-pxtorpx
,用于将 px 单位转换成微信小程序特有的单位 rpx,但导航栏的高度是固定的,所以我把这个插件去掉了,固定的高度用px
,自适应的用rpx
- 需要适配iphone/android/iphoneX,参考高适应性的自定义导航栏开发思路
题外话,以前固定导航栏,总是对导航栏设置
position:fixed;
后再将主体部分的内容使用padding-top
或margin-top
来留出导航栏的高度,避免被遮挡。这样造成的问题是,每个页面都要手动设置,而且还要根据机型来适配,很繁琐。
这次终于学到一个小技巧,在导航栏组件里添加一个placeholder
,高度跟随导航栏的高度,position
不要设置为固定,就可以把位置给留出来了
<header><div class="navigation-placeholder" :style="{height: statusBarHeight + titleBarHeight + 'px'}"></div> // 这里就是用来占位的<div class="navigation-container" :style="{backgroundColor: backgroundColor}"><div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div><div class="navigation-title" :style="{height: titleBarHeight + 'px',lineHeight: titleBarHeight + 'px'}"><spanv-if="back"class="back-icon"@click="onBack"><img src="../assets/images/back.png" alt=""></span><pv-if="title"class="title":style="{ fontSize: textSize + 'px', color: textColor, textAlign: align }">{{ title }}</p></div></div>
</header>
3、底部固定,弹窗滚动
弹窗简直是设计师美眉的秘密武器,美其名曰,让设计看起来更轻,好吧,开发们就要面对两个问题:
1、弹出收起的动画要流畅;
2、弹窗弹出来的时候,底部要保持在原来的位置上,并且不能随弹窗内容的滚动而滚动
- 第一个问题,建议不要使用小程序的
createAnimation
,看起来好像也是用的transform
,但效果比起直接手动用transform
来控制还是要差一些
transition: transform .3s ease;
transform: translateZ(0) translateY(20px);
- 第二个问题折腾得就比较久了。
a、直接对底部内容设置position:fixed; overflow:hidden;
页面肯定是会回到顶部的;
b、小程序有一个catchtouchmove=true
的属性,相当于touchmove.stop="stopTouch"
,stopTouch
为一个空函数,就是阻止touch
事件冒泡发生,如果弹窗内容是固定的,在弹窗上加这个属性,可以很完美地解决问题,但如果弹窗内容是个需要滚动的列表,你会发现也滚动不了了;
c、对b的问题,貌似可以用scroll-view
的属性,但因为scroll-view
对video
组件支持不好,所以没有研究就直接放弃了;
d、完美地解决方案:刚开始我的弹窗结构是这样的:
<div class="dialog-mask" touchmove.stop="stopTouch"><div class="dialog-content"></div>
</div>
然后改成了这样:
<div class="dialog-container"><div class="dialog-mask" @touchmove.stop="stopTouch"></div><div class="dialog-content"></div>
</div>
将阻止冒泡设置在了mask
层,不让其影响到内容层,虽然有一些奇怪,但的确这个时候内容层的滚动不会再引起底部内容滚动了,误打误撞解决了这个问题。
4、slot
支持不好
最遗憾的就是mpvue
对slot
的支持竟然不如小程序原生,不仅不支持具名slot
,对仅有的一个slot
里竟然还不能添加动态变量,在捶胸顿足中迫不得已放弃。
5、video
和textarea
等客户端原生组件层级最高
很容易出现一个尴尬的情况,滚动列表的时候,视频竟然浮到了导航栏上方耀武扬威,还有,点击弹窗遮罩本应该关闭弹窗,结果却点到了底部的textarea
组件。
解决方法也很简单,视频就用一张图片代替,播放的时候替换为视频,textarea
在弹窗出现的时候disabled=true
6、webview自动全屏铺满
webview
不能像iframe
一样设置宽高样式
7、背景图片不能使用本地图片
图标转成base64,其余的使用<image />
8、navigateBack
不能传参数
storage
或者vuex
搭配用起来~
9、页面卸载后数据没有初始化
这简直是一个难以置信的问题,某个页面已经卸载了,下次再次进入,一些data
值竟然还保持在之前的状态,比如弹窗依然还弹起来的,最好在onUnload
函数里处理一下
10、无过滤器,不能使用函数设置style
和class
这个就尽量规避吧,毕竟路不止一条,此路不通,换一条照样走。
两个月的微信小程序尝试相关推荐
- 上线两个月,微信小程序给那些用身体支持它的人带来了什么?
刚过了尝鲜期就被唱衰,究竟是小程序的尴尬还是围观群众的尴尬? 1 月 9 日,微信小程序上线.从上线之初的刷爆朋友圈到被尝鲜用户打入冷宫,从一夜之间小程序微信讨论群暴增到群活跃度明显下降,似乎创意不是 ...
- 只需两步快速获取微信小程序源码
第一次在掘金这样高大上的社区写文章,忐忑地敲下我获取小程序源码过程中的经验分享. 最近在学习微信小程序开发,半个月学习下来,很想实战一下踩踩坑,于是就仿写了某个小程序的前端实现,过程一言难尽,差不多两 ...
- 只需两步获取任何微信小程序源码
只需两步获取任何微信小程序源码 kedwan关注 12018.09.15 09:32:43字数 2,428阅读 3,946 转载自百家号作者:不忘初心lucy 第一次在掘金这样高大上的社区写文章,忐忑 ...
- 一个月一个微信小程序(个人开发)---“助你考公“(一周年纪念礼物)
一.项目背景 与女友一周年纪念日即将来临的前一个月,突发奇想想写个小程序作为礼物(她考公).八月多还在实习,所以白天大多数时间是工作的,只有晚上和周末,以及九月上旬的完整时间. 二.项目构思 小程序, ...
- 两万字:讲述微信小程序之组件
我是c站的一个小博主,近期我会每天分享前端知识包括(原生的web语句,以及vue2和vue3,微信小程序的写法及知识点)本篇文章收录于微信小程序专栏中,如果想每天在我这学到一些东西,请关注我并订阅专栏 ...
- 1个月uni-app微信小程序开发上线实战专栏介绍
一.专栏介绍: <uni-app开发微信小程序1个月上线实战>,目标带领1000位同学成功开发上线一个自己的个人小程序! 作者介绍:国服第二切图仔--资深前端开发工程师,具有六年以上的前端 ...
- 小程序 多个 veb-view返回 返回了两个页面_微信小程序学习心得 - 忒扎心
我们写小程序时都要跳转页面的,也会有底部导航来进行切换 这个时候就要介绍下窗口是怎样配置的 要在文件里写一个tabBer对象 里面在定义一个list数组里面放我们定义的几个需要切换的页面 如下 最多l ...
- 这两天在学习微信小程序,不可避免的又要用到一些图标,通过问朋友解决了这个事情 想分享给你们一下 希望对你们有用...
第一步:百度搜索阿里巴巴矢量图 第二步:把自己需要的图标放在购物车 然后添加至项目 首先这个项目是自己命名的 然后下载到本地 当然下载的压缩包 解压后打开里面的 iconfont.css ...
- 微信小程序各种数据传输(云数据库、外接服务器、页面引用、全局变量等)
微信小程序数据传输 数据传输流的种类 云开发数据传输 其他后台数据传输 当前页面数据传输 页面之间数据引用 页面之间数据传输 全局变量数据传输 不同数据传输之间的对比 数据传输流的种类 两个月前微信小 ...
最新文章
- 记一次网站部署遇到的问题
- H3C——BGP联盟配置
- lajp mysql安装_Php调用java说明
- linux shell 当前用户名,在Linux中使用Whoami命令显示当前登录用户名称及替代命令的方法...
- 001-spring结合quartz使用
- Eclipse项目上传码云、从码云上检出项目、修改检出项目后在提交到码云、看此篇即可
- mysql c#开发库_c# 开发+MySql数据库
- 惩罚函数法例题matlab,外点惩罚函数法例题
- 计算机的中mb b单位的关系,b、B、KB、MB、GB 的关系?
- 旅游黄山需要注意的几个问题
- OpenStreetMap地图服务器安装
- ARFoundation多图识别的一个脚本
- 鸿蒙系统转正,鸿蒙首发机型确定 “备胎”鸿蒙系统正式转正
- 计算机系优秀团员事迹,【国奖风采,榜样力量】真诚,感恩——计算机学院罗惠娴...
- 前端UI框架选择区别对比推荐
- 本科计算机er如何入手一些项目?
- Could not set property ‘id‘ of ‘class com.twk.pojo.Book
- android 行高和字号之间关系,字号与行高
- 万宁:地产行业如何摆脱“一次性利润”困局?
- linux内核移植jz2440,Linux内核移植到JZ2440