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(){//处理上拉加载}
小程序一些常用方法和功能总结-微信小程序基本功能-微信小程序功能开发
浏览量:1287
时间:
来源:布怀特
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。 -

零代码 + AI 双轮驱动|即速应用解锁人工智能小程序开发新范式
无需代码、无需 AI 算法功底,普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合,推出 AI 智能生成能力,用户通过自然语言描述需求,AI 自动生成小程序页面、功能模块与后台配置,覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力,一键对接微信生态,打通视频号、企业微信、短信跳转,帮企业快速落地 AI 应用,抢占智慧经营先机,让每家企业都拥有 AI 驱动的智慧店铺。










