总结开发过程踩到的坑（五）（小程序篇）

Cympros 发布于2019-08-26 12:00 / 402人阅读

摘要：最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。的使用微信小程序不支持原生页面跳转，包括和，若要跳转小程序应用内页面，需要使用，详见。参考文献微信小程序开发者文档

最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。不得不说，微信的野心真是越来越大了，但是它超高的流量注定了它有这个资本。

原文地址：mini programs

scroll-view 的使用

关于 Swiper 的使用

下拉刷新与上拉加载

web-view 的使用

其它涉及到的内容

1. scroll-view 的使用

官方提供了 scroll-view（可滚动视图区域）组件，开发者可以很方便对其进行配置。
在使用过程中，必须要指定 scroll-view 的一个固定高度，所以在某些情况下需要动态为该组件添加高度.

//wxml


//js
data: {
    scrollHeight: 500
},
onShow: function() {
    var that = this
    wx.getSystemInfo({
        success: function(res) {
            that.setData({
                scrollHeight: res.windowHeight
            })
        }
    })
}

注：使用 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，无法触发 onPullDownRefresh

2. 关于 Swiper 的使用

官方同样提供了 swiper 组件，只需简单进行配置即可实现轮播图，但是对于轮播图的指示点来说，并没有提供过多的配置，所以若要修改指示点，需要禁用默认自行进行模拟。

//wxml

    
        
    

     
     
       
     


//js
data: {
    swiperCurrent : 0
},
swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
},

3.下拉刷新与上拉加载

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

//app.json
"window": {
    "backgroundTextStyle": "dark",//如果下拉未呈现加载中图标，将 light 改为 dark
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50//页面上拉触底事件触发时距页面底部距离，单位为px
    }
    
//js
onPullDownRefresh: function() {
    //标题显示加载 gif
    wx.showNavigationBarLoading()
    //执行完成后，停止下拉刷新和加载 gif
    wx.stopPullDownRefresh()
    wx.hideNavigationBarLoading()
}，
onReachBottom: function() {
    //your code
    
}

除此之外，还可以使用 scroll-view 组件来实现这两个功能

//wxml



//js
loadMore: function() {
    //your code
},
refreshData: function() {
    //your code
}

在实际体验中，使用 scroll-view 的下拉刷新，当页面处于最顶端时，下拉无法触发该事件，需要滚动页面一段距离再下拉才会触发 bindscrolltoupper，体验并不友好，所以还是建议使用小程序原生下拉刷新。

另一个问题是，在上拉加载的时候，经常会触发多次加载事件，显然是不符合需求的，解决方法可以为加载事件添加一个加载状态，默认 true，触发加载时置为 false，待事件全部执行完毕后再修改为 true。

//wxml

4. web-view 的使用

微信小程序不支持原生页面跳转，包括 html 和 js，若要跳转小程序应用内页面，需要使用 wx.navigateTo(OBJECT)，详见 wx.navigateTo API。若要跳转 H5 页面，就需要用到 web-view 组件了。
web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。

web-view指向的 H5 链接必须要在小程序后台配置白名单。

若要实现动态跳转，只需要动态传参到 web-view 所在页面就可以了

//demo.wxml


//demo.js
data: {
    url: "https://www.google.com"
},
toPage: function(e) {
    wx.navigateTo({
        url: "pages/webView?url=" + e.currentTarget.dataset.url
    })
}

//webView.wxml


//webView.js
data: {
    url: ""
},
onLoad: function(options) {
    options.url? this.setData({ url: options.url }) : wx.navigateBack()
}

5. 其它涉及到的内容

小程序不能使用层级选择器。
在 wxss 不能使用背景图片，需要使用 image 组件引入图片。
wxml中不能直接插入转义字符，需要使用在 text 组件中使用。

自定义循环变量使用 wx:for-item="i"。

参考文献

微信小程序开发者文档

混合云云服务器存储过程总结小程序开发开发小程序开发开发制作小程序开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107988.html

总结开发过程踩到的坑（五）（小程序篇）

摘要：最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。的使用微信小程序不支持原生页面跳转，包括和，若要跳转小程序应用内页面，需要使用，详见。参考文献微信小程序开发者文档最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。不得不说，微信的野心真是越来越大了，但是它超高的流量注定了它有这个资本。原文地址：mini programs 目...

young.li 2019-08-29 15:38 评论0 收藏0
总结开发过程踩到的坑（五）（小程序篇）

摘要：最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。的使用微信小程序不支持原生页面跳转，包括和，若要跳转小程序应用内页面，需要使用，详见。参考文献微信小程序开发者文档最近开始接触了小程序的开发，由于时间问题，文档阅读的并不完备，也踩了很多坑。不得不说，微信的野心真是越来越大了，但是它超高的流量注定了它有这个资本。原文地址：mini programs 目...

wemall 2019-08-05 14:05 评论0 收藏0
总结开发过程踩到的坑（二）

摘要：本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自己对于该部分的理解，另一方面希望能够分享给大家，知识在于分享，当然踩过的坑也不例外滑稽。在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。本文章旨在总结开发过程中碰到的容易忘记或者比较重要的...

codeKK 2019-08-05 12:51 评论0 收藏0
总结开发过程踩到的坑（二）

摘要：本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自己对于该部分的理解，另一方面希望能够分享给大家，知识在于分享，当然踩过的坑也不例外滑稽。在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。本文章旨在总结开发过程中碰到的容易忘记或者比较重要的...

laznrbfe 2019-08-22 14:06 评论0 收藏0
总结开发过程踩到的坑（四）

摘要：本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自己对于该部分的理解，另一方面希望能够分享给大家，知识在于分享，当然踩过的坑也不例外滑稽。在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，...

terasum 2019-08-22 15:52 评论0 收藏0