2022微信小程序开发常用的方法总结(代码)

 所属分类:php教程

 浏览:134次-  评论: 0次-  更新时间:2022-10-08
描述:更多教程资料进入php教程获得。 本篇文章给大家带来的内容是关于微信小程序开发常用的方法总结(代码),有一定的参考价值,有需要的朋友可...
更多教程资料进入php教程获得。

本篇文章给大家带来的内容是关于微信小程序开发常用的方法总结(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1:wx:for=”{{}}”遍历时,要加wx:key=""否则会有警告提示VM120:3 Now you can provide attr “wx:key” for a “wx:for” to improve performance.,但页面不会报错

2:事件方法传参的写法:bindtap=”toDetail” data-data=”{{item.url}}”

js:

toDetail:function(e){
  let url = e.currentTarget.dataset.data;
   wx.navigateTo({
      url: '../bookdetail/detail'
  });
 }
登录后复制

3.swiper自定义圆点样式


        
          
            
              
            
          
        

         
          
           
            
           
         
      
登录后复制
js:data: {
   // tab切换 
    currentSwiper: 0
    },swiperChange: function (e) {
 this.setData({
  currentSwiper: e.detail.current
 })
},
登录后复制
wxss:/*用来包裹所有的小圆点 */
.dots { 
display: flex; 
justify-content:center; 
flex-direction: row; 
margin:22rpx auto;
}
/*未选中时的小圆点样式 */
.dot { 
width: 10rpx; 
height: 10rpx; 
border-radius: 50%;
 margin-right: 18rpx; 
 background-color: #969FA9; 
 opacity: 0.5;
 }
/*选中以后的小圆点样式 */
.active { 
width: 20rpx; 
height: 10rpx; 
border-radius:20rpx;background-image: linear-gradient(-90deg, rgba(150,159,169,0.50) 24%, #F5F7FA 100%);
border-radius: 100px;
}
登录后复制

4.微信小程序获取当前页面的url

使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组,数组最后一个就是当前页面

var pages = getCurrentPages()    //获取加载的页面
var currentPage = pages[pages.length-1]    //获取当前页面的对象
var url = currentPage.route    //当前页面url
var options = currentPage.options    //如果要获取url中所带的参数可以查看options
登录后复制

可以写成工具函数放到utils中:

/获取当前页url/ function getCurrentPageUrl(){ 
    var pages = getCurrentPages()    //获取加载的页面 
    var currentPage = pages[pages.length-1]    //获取当前页面的对象 
    var url = currentPage.route    //当前页面url 
    return url }
/获取当前页带参数的url/ function getCurrentPageUrlWithArgs(){ 
    var pages = getCurrentPages()    //获取加载的页面 
    var currentPage = pages[pages.length-1]    //获取当前页面的对象 
    var url = currentPage.route    //当前页面url 
    var options = currentPage.options    //如果要获取url中所带的参数可以查看options
登录后复制
//拼接url的参数
var urlWithArgs = url + '?'
for(var key in options){
    var value = options[key]
    urlWithArgs += key + '=' + value + '&'
}
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length-1)

return urlWithArgs
登录后复制
}
module.exports = { 
    getCurrentPageUrl: getCurrentPageUrl, 
    getCurrentPageUrlWithArgs: getCurrentPageUrlWithArgs }
登录后复制

5.A页面跳转到B页面 标题更新

全局的app.js 中设置参数存放标题

globalData: { 
    userInfo: null, 
    bookTitle:”” 
  } A页面跳转方法中设置全局的标题参数 app.globalData.bookTitle =”标题”
B页面 onLoad:function(){ 
     wx.setNavigationBarTitle({ 
      title: app.globalData.bookTitle 
    }) 
  }
登录后复制

6 scroll组件

20180906184154177.png

程序员必备接口测试调试工具:立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试,同时在线协作,内容实时同步

登录后复制

scroll组件绑定了 bindscroll=”scroll”方法,没定义这个方法时 ,会出现这样的错误提示,但不影响效果,滚动正常,去掉即可

7.微信小程序 —— button按钮去除border边框

在开发微信小程序组件框架时,我遇到了一个问题,微信小程序中的button组件有特定的css,背景可以用“background:none”去掉,但是边框再用“border : none”去掉就不可以了,这也是微信小程序与h5的不同之处。
但是在微信小程序中使用:after选择器就可以实现这一功能。

使用 button::after{ border: none; } 来去除边框

相关推荐:

微信小程序如何获取用户session_key,openid,unioni(代码)

小程序如何实现模板消息发送的功能(图文)

以上就是微信小程序开发常用的方法总结(代码)的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: 微信小程序,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!