来点现实中遇到的坑儿吧~~~~~~~~~~~解决前 心中有千万个草泥马在奔跑。解决后,kao 这么简单!!!!!!!!
1、项目需要用到slider时,容易触发到右滑切换到上一页的问题。
解决方法: 在json:
{ "enablePullDownRefresh": false, "disableScroll": true, "disableSwipeBack": true }
2、做了项目后,你会发现,更新无处不在。小程序的所有页面一打开就全部加载好的,所以我们就需要打开到哪,就setData到哪,,,,这里你会发现组件更新的重要性!!!幸好我们现在的框架就完全的支持到这一点,从item->list->tabs->…每个组件都对setData作了封装。更新解决了,后面你又会发现一次性更新所有的话,内容越多,反应越慢。不怕。这时我们还有指定某一条的更新。封装得到了findAndUpdate的方法
3、原生组件,层级太高,在开发者工具正常显示,所以很努力去折腾完善,…完成后在真机想炫耀一翻…妈啊,这是什么鬼东西!!自身折腾了目前已经有的canvas插件三个,只要你的页面需要滚动。这些插件就没有任何意义。这个问题官方目前没有很好的解决办法,后面想到的解决办法就是后端转成图片生成,前端这边读取就好了,可是呢,,说什么对服务器的要求很高,如果是实时的,体验更差。最后的最后,就是用到嵌h5的方式了
wxml:
<web-view src="{{url}}" bindmessage=""></web-view>
4、定位问题。需要在app.json里添加
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
5、顶部导航栏的背景色是可以修改的,自定义的。在app.json的
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "Saui",
"navigationBarTextStyle": "white"
}
6、包太多?需要分包?:同样是app.json
"subpackages": [{
"root": "新建目录名称/",
"name": "saui",
"pages": [
"index/index",
"index2/index",
"index3/index"
]
}],
7、一个页面,组件之间的交互是无处不在的。在我们的框架中我们可以在组件里嵌组件。不仅可以写自己的组件, 也能自由的去嵌套别人已经写的组件。这个可以解决什么问题呢。在没有组件之间的嵌套,我们写业务时,会有n多个view
比如:关于我们。关于我们里面有文字,图片,文字还有下划画,小程序是不能写结构的,所以我们需要对文字有特殊处理的话,
静态式写法:
<view class='plr-default mt-90-r bg-linear'>
<view class="article-title mb-58-r">saui框架</view>
<view class="hbody">
<view class="article-content mb-58-r">虽然我们长得丑,但是我们很强大</view>
<view class="article-content mb-58-r">虽然我们长得丑,但是<text style='text-decoration:underline;'>我</text>,<text style='text-decoration:underline;'>们</text>,<text style='text-decoration:underline;'>很</text><text style='text-decoration:underline;'>强大</text> </view>
<view class="article-content mb-58-r">虽然我们长得丑,但是我们很强大</view>
<view class='hei-257-r'>
<image src="/images/about-pic2.png" />
</view>
</view>
</view>
组件式:(注:@html是用到了别人的wxParse,封装到我们的框架里)
wxml:
<ui-item item="{{aboutData}}" />
js:
data: {
aboutData: Pager.item({
'@html': <div class='plr-default mt-90-r bg-linear'><h2 class="article-title mb-58-r">saui框架</h2><p>xxxxxx</p></div>
})
}
8、显示弹出层的时候,滚动屏幕,底部会跟着滚动,这时。 我们能干什么呢。给scroll-view组件里 scroll-y一个变量,在js里显示弹出层时,去对这个组件作setDate。普通写法:
wxml:
<scroll-view scroll-y="{{isScrollx}}" class="scroll-wrap-nav">
js:
data: {isScrollx: true},
onReady: function(){
//弹出时
this.setData({isScrollx: false}).
}
20191029
9、iconfont,字体偏移问题。不管是pc还是移动,还是小程序,使用iconfont,都会有偏移问题,或者浏览器行高不一样问题。如果你们遇到了个对设计要求很高的,又不知是icon有问题 还是样式有问题的。这个锅 我们就要自己解决了~~~~ 如下
调用前
.icon-checked: before
display: block;
font-size: 40rpx;
line-height: 40rpx;
调整之后
最后 如果以上还不能满足你的要淾,你可能还需要调整下iconfont里的网络16-64 放大缩小后,你会有意外的惊喜
10.!!! cover-view cover-image 有兼容性问题, 导致图片变形,文字出不来。 目前解决办法把cover-去掉
11.scroll-view scroll-x无法滚动,需要在父级添加
white-space: nowrap;
12.有时父级用了flex,左右结构,右边的flex:1却无效????不明白。不过解决办法可以给这个flex:1再加个width: 50%(如何什么《数值》都可以)
13.解决微信小程序跳转页面点击事件全部失效问题:在跳转路由前加定时,如:
setTimeout(() => { wx.reLaunch(...) })
15…待续
translateX(translateY)会影响fixed
scroll-view 里 > 是无效的
界面: <scroll-view class='xx'><view class='item'>选项一</view><view class='item'>选项二</view><view class='item'>选项三</view><view class='item'>选项四</view></scroll-view> 样式表: 错误: .xx >.item { border-bottom: 1rpx solid } 正确: .xx .item { border-bottom: 1rpx solid }
更新版本了~~~~~~~~~~~~局部优化了界面。给score功能添加了上下页的存储功能。