基础

小程序背景图片自适应

<!-- 设置一个view包裹全部内容 -->
<view class="bg">
<!-- 内容 -->
</view>

<!-- 设置背景图样式 -->
.bg {
	width:100%;
  height:100vh;
  background-image: url('https://p.ipic.vip/klel6q.jpg');
  background-size: cover;
}

获取输入内容

  inputHandler(e){
    console.log(e.detail.value)
  }

  <input bindinput="inputHandler" />

批量代码快隐藏

//wx:if 动态显示和隐藏
//复杂时使用
<block wx:if{{true}}>
  <view>xxx</view>
  <view>xxx</view>
</block>

//加一个样式
//频繁时使用
<view hidden="{{flag}}"> 为真时隐藏元素 </view>

遍历数组

data{
    arry1:['a1','a2','a3'],
    list:[
     { id:0,name:'a'},
     { id:1,name:'b'},
     { id:23,name:'ac'}
    ]
}

<view for="{{arry1}}">
  {{index}},{{item}}
</view>

<view for="{{list}}" wx:key="id">
  {{item.name}}
</view>

wss样式导入

<!-- 新建/common/common.wxss 文件 -->
.username{
	color:red;
}

<!-- 在要使用的wxss文件中导入 -->
@import "/common/common.wxss"

<!-- 在相应的wxml文件中直接使用 -->
<view class="username"></view>

全局样式、局部样式

<!-- 写在app.wxss中,会应用于全局 -->
view{
boder:10rpx
}

<!-- 在当前页面的wxss文件中使用中，只会作用于当前页面，如果产生冲突会产生覆盖 -->
view{
boder:100rpx
}

tabBar

网络相关

发送请求

getInfo(){
  wx.request({
    url: 'https://www.escook.cn/api/get',
    method:'GET',
    data:{
      name:'zs',
      age: 3
    },
    success(res){
      console.log(res.data)
    }
  })
},

数据渲染

<script>
  //九宫格
  getGridList(){
    wx.request({
      url: 'https://www.escook.cn/categories',
      method:'GET',
      success:(res)=>{
        console.log(res.data)
        this.setData({
          gridList:res.data
        })
      }
    })
  },
</script>


<view class="grid-list" >
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

页面跳转

<!-- 编程式导航 -->
<script>
  //跳转到tabBar页面
  goContect(){
    wx.switchTab({
      url: '/pages/contect/contect',
    })
  },

  //跳转到非tabBar页面
  goInfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },
  //返回上一层页面
  backTo(){
    wx.navigateBack({
      delta:1 
    })
  },

  //携带参数跳转
  gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info?name=啊贵&age=99',
    })
  },

  //通过 onLoad 的 options 接收参数
  onLoad:function (options) {
    console.log(options)
  },
</script>
<button bindtap="goContect">跳转到contact</button>
<button bindtap="goInfo"> 回到非tabBar页面 </button>
<button bindtap="backTo">返回</button>
<button bindtap="gotoInfo">携带参数跳转</button>



<!-- 声明式导航 -->
<!-- 跳转到tabBar页面 -->
<navigator url="/pages/contect/contect" open-type="switchTab">跳转tabBar页面</navigator>
<navigator url="/pages/info/info" open-type="navigate">跳转非tabBar页面</navigator>
<!-- 带参数跳转 -->
<navigator url="/pages/info/info?name=‘啊三’&age=9">传参</navigator>

生命周期

wxs 和 javaScript 的关系

wxs使用场景

跳转➕携带参数

发送请求

<van-cell-group wx:for="{{list}}" wx:key="id" inset>
  <van-cell title="工单编号：" value="{{item.orderNumber}}" />
  <van-cell title="内容：" value="{{item.remark}}" />
  <van-cell title="工单状态：" value="{{item.status}}" />
  <button class="order-buttom" bindtap="toInfo" data-item-id="{{item.id}}">单色按钮</button>
</van-cell-group>


<script>
  toInfo:function(event){
    console.log(event.currentTarget.dataset.itemId)
  },
</script>