微信小程序> 小程序一些常用方法和功能总结-微信小程序基本功能-微信小程序功能开发

小程序一些常用方法和功能总结-微信小程序基本功能-微信小程序功能开发

浏览量:1287 时间: 来源:布怀特
1.

本篇总结一些小程序的基本功能,主要包含(手动目录⤵️):

小程序加载背景图片navigateTo传对象参数配置转发实现页面的分享小程序获取当前页面的url小程序获取节点信息及应用小程序的下拉刷新和上拉加载小程序加载背景图片小程序使用背景图片仅支持网络图片和base64图片。网络图片通过传入云端获得。base64可以在类似http://imgbase64.duoshitong.com的在线转换网站上获得。使用方法:background-image:url("data:image/jpeg;base64,/9j/4QA...");2.

建议使用网络图片,因为有的base64字符串实在太长了…

navigateTo传对象参数小程序将对象作为参数传递时,可以通过转为字符串的方式实现,接收时再对其进行解析。//传递wx.navigateTo({url:`path?object${JSON.stringify(object)}`})//解析constdataJSON.parse(options.object)配置转发实现页面的分享小程序的分享包括右上角按钮菜单分享和开发者自定义按钮分享,由于一些诱导分享的功也已由官方关停(官方文档),使得分享配置来更加单纯@.@onShareAppMessage(ops){constshareObject{title:'分享的标题(默认为小程序名)',path:'pages/index',imageUrl:'封面图路径(默认为页面前半部截图,自定义图片宽高比为5:4)',success:function(res){//转发成功console.log("转发成功:"+JSON.stringify(res));},fail:function(res){//转发失败console.log("转发失败:"+JSON.stringify(res));}}if(ops.from"button"){//来自页面内转发按钮returnshareObject;}else{//来自导航栏转发按钮returnshareObject;}3.

其中path像navigateTo一样可以在后面跟参数,也是在目标页面onLoad的options中获取。

小程序获取当前页面的urlgetCurrentPageUrl(pages){varcurrentPagepages[pages.length-1]varurlcurrentPage.routereturnurl}getCurrentPageUrlWithArgs(pages){varcurrentPagepages[pages.length-1]varurlcurrentPage.routevaroptionscurrentPage.options//拼接url的参数varurlWithArgsurl+'?'for(varkeyinoptions){varvalueoptions[key]urlWithArgs+key+''+value+''}urlWithArgsurlWithArgs.substring(0,urlWithArgs.length-1)returnurlWithArgs}4.

其中的pagesgetCurrentPages(),即在对应页面这样调用即可:

getCurrentPageUrlWithArgs(getCurrentPages())小程序获取节点信息及应用先看官方的示例代码,代码中通过元素的id获取元素,然后得到了边界坐标和滚动位置,因此我们可以通过这些数据实现类似于`锚点`这种页面跳转,或者用于对其他预算style的设置。constquerywx.createSelectorQuery()//创建节点查询器queryquery.select('#the-id').boundingClientRect()//获取节点位置信息query.selectViewport().scrollOffset()//获取页面滑动位置query.exec(function(res){res[0].top//#the-id节点的上边界坐标res[1].scrollTop//显示区域的竖直滚动位置})小程序的下拉刷新和上拉加载在小程序中,实现下拉刷新和上拉加载有两种方式。一种是通过配置page,另一种是使用`scroll-view`组件,但这种方式的触发条件其实是触顶刷新。综合两者的体验,推荐使用第一种方式。第一种方式:5.

这里我就用wepy里的语法来表示了,思路是一样的。

//首先config里配置下拉距离config{enablePullDownRefresh:true,onReachBottomDistance:50}//data里定义data{//使用isLoading来判断加载动画的显示隐藏,组合使用isLoading和noMoreData判断数据为空视图的显示隐藏。currentPage:1,noMoreData:false,isLoading:true}//请求数据loadData(){constthatthisthat.isLoadingtrue//伪代码request((res){//请求成功that.isLoadingfalsethat.noMoreDatares.data.lengthperPagethat.datares.datathat.$apply()})}//请求更多loadMoreData(){constthatthistaht.isLoadingtruethat.currentPage+1//伪代码request((res){//请求成功that.isLoadingfalsethat.noMoreDatares.data.lengthperPagethat.datathat.data.concat(res.data)that.$apply()})}//下拉刷新asynconPullDownRefresh(){awaitthis.loadData()wx.stopPullDownRefresh()}//上拉加载asynconReachBottom(){if(this.noMoreData||this.isLoading){return}awaitthis.loadMoreData()}6.

使用过程中你可能会遇到以下问题

下拉刷新无法弹回去7.

解决方法:在刷新函数了加上wx.stopPullDownRefresh();

刷新看不到三个小圆点的加载动画8.

原因是圆点颜色和背景颜色相同,所以解决方法就简单了,当然也可以设置你需要的其他颜色。

{"backgroundTextStyle":"drak","backgroundColor":"#fff"}第二种方式://视图scroll-viewscroll-ybindscrolltoupper"scrolltoupper"bindscrolltolower"scrolltolower"bindscroll"scroll"scroll-into-view"{{toView}}"scroll-top"{{scrollTop}}"scrolltoupper(){//触顶刷新}scrolltolower(){//处理上拉加载}

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎