微信小程序笔记整理

前段时间刚接触小程序，写了一个小程序项目，总结一些写项目用到的一些基础知识点吧。

一，在app.json里面写入新建页面的名称，直接可以新建一个页面。

二，应用常用的生命周期。

1，Page({  })  // 创建一个页面实例对象。

2，onLoad  //监听页面加载，

3，onReady  //监听页面初次渲染，

4，onShow //监听页面显示，

5，onHide //监听页面隐藏

三，条件渲染

1，for循环。

<view wx:for="{{list}}" wx:for-item="list">
<tetx>{{list.Text}}</tetx>
</view>
    list:[
      {
        Text:"我是第一个",
      },
      {
        Text:"我是第二个",
      },   
      {
        Text:"我是第三个",
      },
    ]

2，条件渲染。

<view wx:if="{{false}}">我是第一个</view>
 <view wx:elif="{{true}}">我是第二个</view>
<view wx:else>我是第三个</view>

3，隐藏：

//类似于wx:if
<view hidden="{{true}}">True</view>

四：常用的事件绑定方法

1，bindtap：点击事件；

2，longtap：长按事件；

3，touchstart：触摸开始；

4，touchend：触摸结束；

5，touchcansce：取消触摸；

五：推拽事件，

小程序有写好的组件，关键字是movable-view，movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

<movable-area class="move-content" style="pointer-events: none;height: 100%; 100%;left:0px;top:0px;position:fixed;">
<movable-view direction="all" x="30" y="30" animation="{{false}}" style="pointer-events: auto;  40px;height:56px;z-index: 999;">
  <image style=" 30px;height: 30px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600161316594&di=8152bc5995173630efc94f12a8371b63&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180801%2F23%2F1533138097-nkmjLKYXra.jpg"></image>
</movable-view>  
</movable-area>

direction：是可移动的方向。属性值有all、vertical、horizontal、none。

六，微信小程序倒计时dome。

<view class="container">
     <view class='progress_box'>
        <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas> 
        <canvas class="progress_canvas" canvas-id="secondCanvas"></canvas>
    </view>
</view>

//css样式
.progress_box{
  position: relative;
  84px;
  height: 84px;  
  display: flex;  
  align-items: center;
  justify-content: center;
  background-color: #03abfd;
  border-radius: 84px;
}
.progress_bg{
  position: absolute;
  84px;
  height: 84px; 
}
.progress_canvas{
  84px;
  height: 84px; 
}

 /js页面
Page({

  /**
   * 页面的初始数据
   */
  data: {
      

  },

  drawProgressbg: function () {
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg')
    ctx.setLineWidth(15);// 设置圆环的宽度
    ctx.setStrokeStyle('#F18136'); // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath();//开始一个新的路径
    ctx.arc(42, 42, 30, 0, 2 * Math.PI, false);
    //设置一个原点(100,100)，半径为90的圆的路径到当前路径
    ctx.stroke();//对当前路径进行描边
    ctx.draw();
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var step = 1,//计数动画次数
      num = 0,//计数倒计时秒数（n - num）
      start = 1.5 * Math.PI,// 开始的弧度
      end = -0.5 * Math.PI,// 结束的弧度
      time = null;// 计时器容器

    var animation_interval = 1000,// 每1秒运行一次计时器
      n = 10; // 当前倒计时为10秒
    // 动画函数
    function animation() {
      if (step <= n) {
        end = end + 2 * Math.PI / n;
        ringMove(start, end);
        step++;
      } else {
        clearInterval(time);
      }
    };
    // 画布绘画函数
    function ringMove(s, e) {
      var context = wx.createCanvasContext('secondCanvas')

      var gradient = context.createLinearGradient(200, 100, 100, 200);
      gradient.addColorStop("0", "#2661DD");
      gradient.addColorStop("0.5", "#40ED94");
      gradient.addColorStop("1.0", "#5956CC");

      // 绘制圆环
      context.setStrokeStyle('#f6cbf4')
      context.beginPath()
      context.setLineWidth(10)
      context.arc(42, 42, 30, s, e, true)
      context.stroke()
      context.closePath()

      // 绘制倒计时文本
      context.beginPath()
      context.setLineWidth(1)
      context.setFontSize(30)
      context.setFillStyle('#ffffff')
      context.setTextAlign('center')
      context.setTextBaseline('middle')
      context.fillText(n - num + '', 42, 42, 30)
      context.fill()
      context.closePath()

      context.draw()

      // 每完成一次全程绘制就+1
      num++;
    }
    // 倒计时前先绘制整圆的圆环
    ringMove(start, end);
    // 创建倒计时
    time = setInterval(animation, animation_interval);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.drawProgressbg(); 
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

效果图：

 七：视频播放组件video：

1，获取视频播放时间方法：bindtimeupdate

  bindtimeupdate(res) {
    //console.log('bindtimeupdate', parseInt(res.detail.currentTime), '时间总时长-->', parseInt(res.detail.duration));
    let nowTime = parseInt(res.detail.currentTime);
    let endTime = parseInt(res.detail.duration);

  },

2，bindplay：当开始/继续播放时触发play事件

3，bindpause：当暂停播放时触发 pause 事件

4，bindended：当播放到末尾时触发 ended 事件

5，bindtimeupdate：播放进度变化时触发

八：提示框：

1，加载框

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)

2，弹出提示框：

  wx.showToast({  title: '我是提示框!', icon: 'none', duration: 2000 }); 

 3，页面跳转

//本页面跳转
 wx.redirectTo({
        url: "../Introduction/Introduction",
      })

//不同页面跳转
wx.navigateTo({
        url: "../Introduction/Introduction",
      })