小程序基础

最新推荐文章于 2024-07-19 15:13:29 发布

k47

最新推荐文章于 2024-07-19 15:13:29 发布

阅读量105

点赞数

分类专栏：小程序文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/qq_28207647/article/details/128464828

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

两种跳转方式：bindtap标签绑定点击事件跳转；navigator标签跳转

注：wx.navigateTo不能跳转到tabbar页面，需要专门的方法

一、标签跳转

<navigator url="/pages/index/index?id=123123"></navigator>

二、绑定事件跳转

    // data-是前缀，后面跟的是变量名；bindtap是点击事件名称
    <view bindtap="clickme" data-nid="234324">
     <text>点一下</text>
    </view>
clickme:function(e){
    var nid = e.currentTarget.dataset.nid;
    console.log(nid);
    wx.navigateTo({
      url: '/pages/index/index.wxml?id='+nid,
    })
  }

被跳转页面接收参数

  // 在onLoad方法里面 提取穿过来的参数
  onLoad(options) {
    console.log(options.id);
  },

数据绑定

//自己定义的变量message
<view>修改数据{{message}}</view>
<view bindtap="clickupdate">点击修改</view>

data: {
    message:"准备修改的数据",
  },
  clickupdate(){
      // this的意思是page下面的字典，自然包括data，修改数据需要用setData这样前后端才能够修改数据；
    this.setData({message : "被修改了"});
  },

flex布局

 /* 圆角 */
  border-radius: 50rpx;
  
  /* 设置flex布局 */
  display: flex;
  /* 设置排列方式 */
  flex-direction: row;
  /*让下面的孩子平均居中   flex-start靠左居中；center居中；space-between是站两边居中*/
  /* 在主轴方向如何展示 */
  justify-content: space-around;

获取用户信息

<button open-type="getUserInfo" bindgetuserinfo="clicknikename">点击获取头像</button>
  clicknikename(){
    var gloadthis = this
    wx.getUserProfile({
      desc: 'desc',
      success:(res)=>{
        console.log(res);
      }
    })
  }