一、项目目录:
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') },