微信小程序开发注意事项总结:上拉加载失效、转义字符等

1、上拉加载失效

问题背景:部分页面上拉加载失效。当使用flex布局,底部固定,中间采用自适应撑满全屏实现滚动时,发现上拉加载失效,不知道是什么原因。

解决问题:

  在小程序中,官方为我们提供了原生的下拉刷新和上拉加载,只需要进行简单的配置即可实现下拉刷新的功:onPullDownRefresh、onReachBottom

  除此之外,还可以使用 scroll-view 组件来实现这两个功能,利用scroll-view的bindscrolltolower、bindscrolltoupper事件

<scroll-view
style="height: {{scrollHeight}}px;"
enable-back-to-top
bindscrolltolower="loadMore"
bindscrolltoupper="refreshData">
</scroll-view>

2、小程序不能使用层级选择器。

3、在 wxss 不能使用背景图片,需要使用 image 组件引入图片。

  微信小程序css设置本地背景图片

  微信小程序中,直接在css中直接使用本地图片为view设置背景图片,如

.box1{
  background-image: url(../../image/alltest_bag.jpg);
}

  会出现如下问题,会报错:pages/allTest/allTest.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。

  微信小程序不能用CSS的方法加载本地图片,比如background-url(),除非你把本地图片base64化,否则只能够用image组件。如果想将图片作为背景,而且上面排列其他的一些组件的话,需要使用定位布局了。

  解决方案:1、图片转为base64;2、使用image组件,然后使用定位布局

4、wxml中不能直接插入转义字符,比如 \n,需要使用在 text 组件中使用。

5、web-view的使用

  微信小程序不支持原生页面跳转,包括 html 和 js,

  若要跳转小程序应用内页面,需要使用 wx.navigateTo(OBJECT),详见 wx.navigateTo API

  若要跳转 H5 页面,就需要用到 web-view 组件了。web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。

<web-view src="{{url}}"></web-view>

  web-view指向的 H5 链接必须要在小程序后台配置白名单。若要实现动态跳转,只需要动态传参到 web-view 所在页面就可以了。

6、自定义组件里面无法使用icon,需要用image

7、文本实现两端对齐

  文本实现两端对齐,大多人都知道text-align:justify;实际上,写这句在小程序端真的没有两端对齐的效果。

  需要加上:text-align-last: justify;才能实现两端对齐

8、域名不在配置的白名单里的问题

  开发者工具——详情——本地配置——不校验合法域名...HTTPS证书勾选上即可

上一篇:Linux学习——shell编程之环境变量配置文件


下一篇:OpenGL 使用 PBO 高速复制屏幕图像到内存或者纹理中