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

一、上拉加载失效

问题背景：部分页面上拉加载失效。当使用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>

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

三、在 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组件。若是想将图片做为背景，并且上面排列其余的一些组件的话，须要使用定位布局了。

　　解决方案：一、图片转为base64；二、使用image组件，而后使用定位布局

四、wxml中不能直接插入转义字符，好比 \n，须要使用在 text 组件中使用。

五、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 所在页面就能够了。

六、自定义组件里面没法使用icon，须要用image

七、文本实现两端对齐

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

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

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

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