1、这周接触小程序，第一个难点就碰到了，官方的tabbar不是全局都显示的，官方的tabbar只显示在tabbar.list下面列出来的页面里面，有点坑。
2、要做一个自己的支付，在输入密码页面需要像微信那样有6个框，然后输入数字在狂里面显示一个黑色的点，我是用一个隐藏的input，然后点击狂框让input获取焦点，然后变化时获取input里面的值得长度，来显示6个密码点。
<view class='pswGrid' bindtap='inputFouce'>
<view> <block wx:if="{{inputLength>0}}">●</block> </view>
<view> <block wx:if="{{inputLength>1}}">●</block> </view>
<view> <block wx:if="{{inputLength>2}}">●</block> </view>
<view> <block wx:if="{{inputLength>3}}">●</block> </view>
<view> <block wx:if="{{inputLength>4}}">●</block> </view>
<view> <block wx:if="{{inputLength>5}}">●</block> </view>
</view>
3、在小程序中碰到tab标签，可多选、取消，本来想在页面中使用class=“{{arr.indexOf(id)>-1?'act'："}}”，来动态绑定class，但一直不成功，最后查资料的得知下图，小程序在页面中这3个方法无效，最后使用在渲染tab的时候，先把数据处理一下，加一个字段判断是否选中，并添加到一个数组中传给后台就可以了
4、在做小程序的时候会碰到小程序解析富文本编辑器生成的html，官方的rich-text使用效果并不理想，可借助 wxParse此插件来翻译html，正常的话就不说了。碰到一种情况，在开发工具中富文本中的图片正常显示，但在真机测试时，富文本图片不显示，点击图片查看大图又会显示。具体原因是富文本中图片src带有参数，会造成wxParse解析不正常现象，在src以//开头时也会出现图片不显示问题，可利用
改变图片路径
5、小程序在使用scroll-view时，一定记得要在scroll-view标签的样式中使用white-space: nowrap;，不然子元素会换行，造成不能滚动问题！！！
6、在使用小程序上传图片功能时，上传之后小程序返回的时临时文件地址，后台保存一般是base64位格式的图片，所以需要在前台处理临时地址把图片格式转为base64格式。wx.getFileSystemManager().readFile()，可将图片转为base64格式，但一次只能转一张，所以需要设置选择图片张数不能太多，不然一次等待时间太长。
上传临时图片批量转base64格式
7、官方提供的radio、checkbox样式在项目中显示有点大，可以这样修改其样式。
checkbox {
width: 28rpx;
height: 28rpx;
}
checkbox .wx-checkbox-input {
width: 28rpx;
height: 28rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #3296fa;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 28rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
font-size: 22rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
转自:https://developers.weixin.qq.com/community/develop/doc/0002c84233032862c6f6bb13256404
8、小程序滚动条隐藏
/*隐藏滚动条*/
::-webkit-scrollbar{
width:0;
height:0;
color: transparent;}
// 实测上述方法在ios无效 具体不清楚怎么回事
::-webkit-scrollbar{display: none;}::-webkit-scrollbar-track{display: none;}::-webkit-scrollbar-thumb{display: none;}
// 此方法在项目中使用，好像可行
9、小程序生成二维码，类似草料的功能
github：https://github.com/demi520/wxapp-qrcode
10、弹出模态框 底层会跟着滑动使用catchtouchmove阻止
例如： <view class="modal modal_2" catchtouchmove="{{ture}}" wx:if="{{modal}}">
11、js点击穿透 冒泡，最简单是用catch不用bind，但是引入第三方插件时只能使用bind绑定时，就会出现冒泡问题。
解决方法：在你要阻止冒泡的view的父元素上绑定一个catch事件，就能完美阻止这个view的事件冒泡
12、官方小程序自定义tabbar
13、小程序统一转发标题和简介
function overShare() {
//监听路由切换
//间接实现全局设置分享内容
wx.onAppRoute(function(res) {
//获取加载的页面
let pages = getCurrentPages(),
//获取当前页面的对象
view = pages[pages.length - 1],
data;
if (view) {
data = view.data;
if (!data.isOverShare) {
data.isOverShare = true;
view.onShareAppMessage = function() {
//你的分享配置
return {
title: '凤凰于飞 贵隐梧桐',
path: 'pages/index/index'
};
}
}
}
})
}
需要写在app.json中 在launch掉用
网友评论