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

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证书勾选上即可