微信小程序（第一阶段总结）

本文主要是介绍微信小程序（第一阶段总结），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、项目目录：

1、其中项目级别的的文件包括 app.js、app.json、app.wxss 这三个。

app.js是小程序的脚本代码；app.json 是对整个小程序的全局配置；app.wxss 是整个小程序的公共样式表。

2、微信小程序中的每一个页面都需要写在 app.json 的 pages 中，每一个页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。

3、事件处理函数：

// 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onl oad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },

4、wxss:

常用css样式

width设置宽度

height设置高度

color设置文本颜色

background-color设置背景颜色，background-image设置背景图片，不能本地路径,可以使用网络地址，或者base64位图片，

border设置边框，dotted - 定义点线边框，dashed - 定义虚线边框，solid - 定义实线边框

，double - 定义双边框

margin设置外边距

padding设置内边距。

5、wxml:

text引入文字；button按钮；input输入框；icon小图标；image引入图片；view容器。

6、icon、progress和swich

icon组件设置一些提示类的小图标；

progress进度条；

swich开关按钮。

7、swiper：

swiper组件用于编写轮播图 <swiper> <swiper-item> <imag></swiper-item></swiper>

autoplay属性设置是否自动播放。

二：云平台：

1、音乐播放器：

// 创建音频
const innerAudioContext = wx.createInnerAudioContext()
// 自动播放
innerAudioContext.autoplay = true
// 设置播放地址
innerAudioContext.src='cloud://zsh-gmx9p.7a73-zsh-gmx9p-1257218395/aa.m4a'
// 加循环
innerAudioContext.loop=true
Page({

    /**
     * 页面的初始数据
     */
    data: {
        num:1
    },
    change:function(){
        if(this.data.num==0){
            this.setData({
                num:1
            })
            // 播放音乐
            innerAudioContext.play()
        }else{
            this.setData({
                num:0
            })
             // 暂停音乐
             innerAudioContext.pause()
        }
    },

2、评论界面制作：

 data: {
        list:[
            {
                con:"君乐宝可真倒霉，碰上倒割商家韭菜的了",
                date:"2022-03-16"
            },
            {
                con:"君乐宝是不是玩踩雷游戏了，挺准",
                date:"2022-03-16"
            }
        ],
        con:''
    },
    getcon:function(e){
        console.log(e.detail.value)
        // 获取的表单元素的值赋值给con
        this.setData({
            con:e.detail.value
        })
    },
    send:function(){
        // a.push(b)把b追加到数组a后面
        // 获取数据
        var mylist=this.data.list;
        // 获取当前日期
        var  date= new Date()
        // 获取年份
        var year=date.getFullYear();
        // 获取月份 月份只有0-11月份
        var month=date.getMonth()+1
        // 获取日期
        var d=date.getDate()
        // 小时
        var hours=date.getHours()
        // 分钟
        var minutes=date.getMinutes();
        // 秒
        var seconds=date.getSeconds();
        // 追加数据
        mylist.push({
            con:this.data.con,
            date:year+'-'+month+'-'+d+'  '+hours+':'+minutes+":"+seconds
        })
        // 修改mylist的值
        this.setData({
            list:mylist
        })
    },

3、增加数据和查询数据：

Page({

    /**
     * 页面的初始数据
     */
    data: {
      user:'',
      pass:''
    },
    getuser:function(e){
      this.setData({
        user:e.detail.value
      })
    },
    getpass:function(e){
      this.setData({
        pass:e.detail.value
      })
    },
    add:function(){
        // 初始化
        const db = wx.cloud.database();
        // 增加数据
        // db.collection('集合名字')
        db.collection('student').add({
            // data 字段表示需新增的 JSON 数据
            data: {
              user:this.data.user,
              pass:this.data.pass
            },
            // success成功以后的指令
            success: function(res) {
              // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
              console.log(res)
            }
          })
    },

    check:function(){
      // 初始化
      const db = wx.cloud.database();
      // 查询语句
      db.collection('student').where({
        user: 'zsh',
        pass:"123"
      })
      .get({
        success: function(res) {
          // 查询结果
          console.log(res.data)
        }
      })
    },

4、视频弹幕制作：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    danmulist:[
      {
        text:'吐槽',
        color:'#ffff00',
        time:1
      },
      {
        text:'今天才周二',
        color:'#00ff00',
        time:2
      },
      {
        text:'今天太热了',
        color:'#00ffff',
        time:2
      }
    ],
    con:''
  },
  getcon:function(e){
    // e.detail.value 获取表单元素的值
    console.log(e.detail.value)
    this.setData({
      con:e.detail.value
    })
  },
  // 发送弹幕
  send:function(){
    this.videoContext.sendDanmu({
      text:this.data.con,
      color:'pink'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 获取视频标签
    this.videoContext = wx.createVideoContext('myVideo')
  },

这篇关于微信小程序（第一阶段总结）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！