微信小程序学习阶段一

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

一、初识小程序

1、小程序项目结构

小程序项目里的

app.json用于书写全局配置信息，里头的pages数组一般用于创建新的页面，pages/文件夹名字/文件名字，一般文件夹名字需要和文件名字保持一致，小程序首先会显示出现在pages数组对应的第一个页面

app.wxss书写全局样式

app.js配置文件

utils书写插件

sitemap和project.config.json属于配置文件

images存放图片

pages放置小程序页面，小程序中每一个页面都是一个独立的文件夹，每一个页面文件夹包含四个文件wxml wxss js json，wxml类似于之前的html书写页面结构，wxss类似于之前的css书写页面样式

2、tabBar

tabBar用于切换页面，list数组配置切换页面，list数组里pagePath设置页面路径，text设置名字，icon Path设置icon图片路径，selectedIconPath设置点击变换icon图片。

3、wxml

text引入文字

button按钮

input输入框

icon小图标

image引入图片

view容器

3.1、wxss

常用css样式

width设置宽度

height设置高度

color设置文本颜色

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

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

，double - 定义双边框

margin设置外边距

padding设置内边距

4、使用js定义数据

{{变量}}使用双大括号定义js数据，.js文件里的data定义数据变量

5、按钮绑定事件

使用bindtap绑定一个点击事件，在.js文件中定义事件

6、wx:for

使用wx:for遍历生成text或view，<text wx:for="{{list}}" bindtap="fn" data-id="{{index}}">{{item}}-{{index}}</text>

wx:for="{{所要遍历的数据}}"，{{index}}表示数组下标，{{item}}代表数据的每一项

7、使用点击事件写一个选项卡

<view>

    <text class="{{num==index?'current':''}}" wx:for="{{list}}" bindtap="change" data-id="{{index}}">{{item}}</text>

</view>

data: {

    list:['我的','热门','游戏','故事','娱乐','知识'],

    num:0

  },

  change(e){

    this.setData({

        //重新给num赋值

      num:e.target.dataset.id

    })

  }

8、wx:if和hidden

wx:if用于控制标签显示是否存在，true存在 false不存在，hidden制标签显示隐藏，true隐藏 false显示

9、swiper

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

autoplay属性设置是否自动播放

10、scroll-view

scroll-view组件设置区域滚动，scroll-y="true"属性设置y轴滚动，scroll-x="true"属性设置x轴滚动，

11、navigator

navigator组件实现普通页面跳转，如果要跳转到tabBar中的页面需要加open-type="switchTab"属性

12、icon、progress和swich

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

progress进度条

swich开关按钮

二、使用云平台服务

1、音频视频文件存放于云开发里的存储，audio引入音频，video引入视频，scr=“云平台地址”，有些url不支持云平台地址

2、一个音乐播放器

.wxml文件中

<image class="{{num==0?'play':''}}" src="../../images/pic.jpg" mode="widthFix" bindtap="change"></image>

.js文件中

// 创建音频

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()

        }

    },

)}

.wxss文件添加样式

image{
    width:300rpx;
    margin-left: 225rpx;
    animation:move 5s infinite linear
}
@keyframes move{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.play{
    /* 暂停旋转 */
    animation-play-state: paused;
}
3、视频发送弹幕

.wxml文件中

<video src="cloud://zsh-gmx9p.7a73-zsh-gmx9p-1257218395/mv.mp4" controls="true"     danmu-list="{{danmulist}}"     danmu-btn="true" id="myVideo"></video>

<!-- 获取表单元素的值 bindinput可以实时获取表单元素的值 -->
<input type="text" placeholder="请输入弹幕内容" bindinput="getcon" />
<button type="primary" bindtap="send">发送弹幕</button>
 

.js文件中

Page({

  data: {

    danmulist:[

      {

        text:'111',

        color:'#ffff00',

        time:1

      },

      {

        text:'222',

        color:'#00ff00',

        time:2

      },

      {

        text:'333',

        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'

    })

  },

onReady: function () {

    // 获取视频标签

    this.videoContext = wx.createVideoContext('myVideo')

  },

)}

4、评论界面

.wxml

<!-- 文本域 -->
<!-- bindinput实时获取表单元素的值 -->
<textarea name="" id="" cols="30" rows="10" bindinput="getcon"></textarea>
<button type="primary" bindtap="send">发布评论</button>

<view wx:for="{{list}}">
    <text>{{item.con}}</text>
    <text class="right">{{item.date}}</text>
</view>

.wxss

textarea{
    border:1px solid orange;
    width:600rpx;
    margin-left: 75rpx;
}
button{
    margin-top: 20px;
}

view{
    font-size: 12px;
    border-bottom:4px;
    padding-bottom: 4px;
    border-bottom:1px solid orange;
}
.right{
    float: right;    
}

.js

Page({

    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

        })

    },

)}

5、增加数据和查询数据

.wxml

<input type="text" placeholder="请输入用户名" bindinput="getuser"/>
<input type="password" placeholder="请输入密码" bindinput="getpass"/>
<button bindtap="add">增加数据</button>

<button bindtap="check">查询数据</button>

.js

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)

        }

      })

    },

)}

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