跳到主要内容

开发常用

常用​

tarbar​

"tabBar": {
    "list": [
      {
        "pagePath": "pages/notice/notice",
        "text": "消息通知",
        "iconPath": "/image/notice.png",
        "selectedIconPath": "/image/_notice.png"
      },
      {
        "pagePath": "pages/teacher/teacher",
        "text": "名师风采",
        "iconPath": "/image/teacher.png",
        "selectedIconPath": "/image/_teacher.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "/image/self.png",
        "selectedIconPath": "/image/_self.png"
      }
    ],
    "selectedColor": "#000000",
    "color": "#999"
  },

轮播图​

<view class="banner">
  <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#000" circular autoplay interval="4000">
    <swiper-item><image src="/image/lbt/1.jpg" mode="widthFix"></image></swiper-item>
    <swiper-item><image src="/image/lbt/2.jpg" mode="widthFix"></image></swiper-item>
    <swiper-item><image src="/image/lbt/3.jpg" mode="widthFix"></image></swiper-item>
    <swiper-item><image src="/image/lbt/4.jpg" mode="widthFix"></image></swiper-item>
  </swiper>
</view>
/* 轮播图 */
.banner{ 
    width: 100%;
    /* 调整高度 */
    height: 700rpx;
}
.banner swiper{ 
    height: 100%;
}
.banner image{ 
    width: 100%;
}

页面跳转带参数​

wx.navigateTo({
    url: '/pages/info/info',
    success: function(res) {
        res.eventChannel.emit('info', e.currentTarget.dataset.info)
    }
})



onLoad(options) {
    const eventChannel = this.getOpenerEventChannel()
    const _this = this
    //接受index页面传来的数据
    eventChannel.on('info', function(data) {
        _this.setData({
            info:data
        })
    })
},

登录​

普通登录​

login(){
      const _this = this
      wx.getUserProfile({
          desc: '授权信息不做其他用途',
          success:function(e){
              console.log(e.userInfo);
              wx.setStorageSync('userInfo', e.userInfo)
              _this.setData({
                  isLogin:true,
                  userInfo:e.userInfo,
              })
          },
          fail:function(e){
              console.log(e);
          }
      })
  },
 
 // 携带code，调用wx.login方法
login(){
    const _this = this
    wx.getUserProfile({
        desc: '授权信息不做其他用途',
        success:function(e){
            console.log(e.userInfo)
            wx.login({
                success(res1){
                  console.log(res1);          
                }
              })
        },
        fail:function(e){
            console.log(e);
        }
    })

获取头像和昵称​

<view data-weui-theme="{{theme}}">
  <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}"></image>
  </button> 
  <form catchsubmit="formSubmit">
    <view class="row">
      <view class="text1">昵称：</view>
        <input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称"/>
    </view>
    <button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit">提交</button>
  </form>
</view>
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
  background-color: #fff;
}
 
.avatar {
  display: block;
  width: 56px;
  height: 56px;
}
 
.container {
  display: flex;
}
.row{
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   display: flex;
   align-items: center;
   height: 80rpx;
   padding-left: 20rpx;
}
.text1{
    flex: 2;
}
.weui-input{
    flex: 6;
}
const app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
 
 
Page({
/**
   * 页面的初始数据
   */
  data: {
    avatarUrl: defaultAvatarUrl,
    theme: wx.getSystemInfoSync().theme,
 
  },
 
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
   
    this.setData({
      avatarUrl,
    })
    app.globalData.userInfo.avatarUrl = avatarUrl
   
  },
  formSubmit(e){
     app.globalData.userInfo.nickName = e.detail.value.nickname
      wx.switchTab({
        url: '/pages/home/index',
      })
  },
 
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.onThemeChange((result) => {
      this.setData({
        theme: result.theme
      })
    })
  },
})

选择图片​

wx.chooseMedia({
    count: 1, // 可选择的图片数量
    mediaType: ['image'], // sourceType
    sourceType: ['album', 'camera'], // 来源：相册或相机
    success:  (res)=> {
        console.log(res.tempFiles);
    }
})

图片上传​

wx.uploadFile({
    url: '服务器地址', // 上传图片的接口地址
    filePath: imagePath, // 图片文件路径
    name: 'image', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
    success: (res) => {
        console.log(res)
    },
    fail: function (res) {
        console.log(res);
    }
})

使用Echarts图表​

  • 引入："ec-canvas": "./ec-canvas/ec-canvas"
  • 使用
<view class="echarts">
    <ec-canvas id="echarts" canvas-id="echarts" ec="{{ec}}"></ec-canvas>
</view>
.echarts{
  width: 800rpx;
  height: 800rpx;
}
ec-canvas{
  width: 100%;
  height: 100%;
}
// 引入echarts.js
import * as echarts from '../../ec-canvas/echarts';

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

// 初始化图表函数
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })

  canvas.setChart(chart)

  // 显示Echarts图表类型信息，可以去Echarts官网复制粘贴
  let option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }]
  }

  chart.setOption(option);
  return chart;
}
// 获取异步数据
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })

    canvas.setChart(chart)
    
    // 同时异步数据加上异步
    setTimeout(()=>{
        let pageArr = getCurrentPages()
        // 可以拿到我们的data数据
        console.log(pageArr[pageArr.length-1].data)

          let option = {
            ...
          };

         chart.setOption(option);
    }, 300)
    
  return chart;
}

瀑布流​

<view class="container">
  <view class="picture">
    <block wx:for="{{ firstData }}" wx:key="index">
      <view class="item">
         <image mode="widthFix" src="{{ item.funcPhoto }}" />
        <view class="text-center">{{ item.remark }}</view>
      </view>
    </block>
  </view>
</view>
/* 全局内边距 */
.container {
  padding: 0 20rpx;
}
/* 瀑布流布局 */
.picture{
  column-gap: 5rpx;
  column-count: 2;
  margin: 20rpx 0;
}
.item {
  width: calc(100% - 30rpx);
  break-inside: avoid;
  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1);
  border-radius: 10rpx;
  margin: 0 15rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
.item image {
  width: 100%;
}
.data-img{
  width: 300rpx;
  height: 300rpx;
}
.text-center{
  padding: 8rpx 15rpx;
}
data:{
    firstData : [
      {
        id:'5',
        remark: "立春",
        funcPhoto: "https://article.biliimg.com/bfs/article/c26eda8120840201a02b7e67a7cd58b5191c94e4.jpg"
      },
      {
        id:'6',
        remark: "雨水",
        funcPhoto: "https://article.biliimg.com/bfs/article/c49e8b533a8bde01b513f892b1b39c73a77ddcaf.jpg"
      },
      {
        id:'7',
        remark: "不同地区出行关注那些天气",
        funcPhoto: "https://article.biliimg.com/bfs/article/b72a385d6019ac4fd4f787c77fa9b6e51f1eaf32.jpg"
      },
      {
        id:'8',
        remark: "一杯中国茶里的气象故事",
        funcPhoto: "https://article.biliimg.com/bfs/article/f3573adb6412d643b5a6172248dde03cd31abd9e.jpg"
      },
    ],
}

小细节​

button​

  • button按钮，我们设置size="mine"，变成行内元素
  • button按钮，我们设置hover-class="active"，就是当用户手指按下去，会为这个按钮添加class为active，我们可以设置这个active1的样式来实现功能
  • view也可以设置hover-class，还有可以阻止冒泡：hover-stop-propagetion
  • image：元素默认为320×240
  • image mode：
    • widthFix：就是设置width为240，然后高度自动扩展，将图片全部显示出来【一般都设置这个】
    • heightFix：高度适配
    • ...
  • input双相绑定：<input type='text' model:value={{message}} />

其他​

  • view事件历数字

  • for循环的key，使用item的方式，使用*this：<view wx:for={{100}} wx:key="*this"></view>

  • for循环空，使用对象中的某一个参数为key，直接使用名字就行,，他会自动去item去取这个

    • data: {
          data:[
            {id:1,name:'hh1'},
            {id:2,name:'hh2'},
            {id:3,name:'hh3'},
          ]
        },
            
            
            
      <view wx:for="{{data}}" wx:key="id">
          <view>
            {{item.name}}
          </view>
        </view>

  • for循环重命名：wx:for-item='item1'

  • 在执行上拉刷新的时候，我们可以配置在距离底部还有多久，就执行这个上拉操作，比如获取数据

  • 下拉的操作是可以修改下拉时间的，比如下拉获取数据，当我们获取到数据的时候就立即停止下拉

  • data-自定义属性：获取打印e自己看

  • 在app.js - globalData 配合全局数据【这个globalData 是自定义名字】。获取先在Page()外定义：const app = getApp()，获取app.globalData.token。也可以在页面里去修改这个globalData的数据：this.globalData.token = '111'

  • 根据data数据动态绑定样式，比如颜色

    • data:{
          list:['red','blue','black']
      }

      <view wx:for="{{list}}" wx:key="id">
          <view style=" color: {{item}} ">文字</view>
      </view>

  • currentTarget和target的区别

    • currentTarget：处理事件的元素
    • target：触发事件的元素

  • page外拿到page中datya数据

    • Pages({
          data:{
              data1:111,
              data2:"bbb"
          }
      })
      fuction a(){
          pageArr = getCurrentPages()
          console.log(pageArr[pageArr.length-1].data)
      }

  • 全屏背景色

    • page {
        height: 100%;
        background: rgb(201, 101, 101);
      }

this.setData修改数据​

普通的

在微信小程序的前端开发中，使用this.setData方法修改data中的值，其格式为

this.setData({
   参数名1: 值1,
   参数名2: 值2
})

数组

data:{
    cars:['nio', 'bmw', 'wolks']
}
// 方式一：
this.setData({
      ['cars[0]']: 'tesla'
})


// 方式二
//修改data中的city数据，修改第i个的name
let name = 'city['+i+'].name'
this.setData({
    [name]: '中国'
})

// 方式三：构造变量，重新赋值
var temp = this.data.cars
temp[0] = 'volvo'

this.setData({
    cars: temp
})

对象

data:{
     user_info:{
      name: 'li',
      age: 10
    },
}
// 方式一
this.setData({
      ['user_info.age']: 20
})

// 方式二：构造变量，重新赋值
var temp = this.data.user_info
temp.age = 30

this.setData({
    user_info: temp
})