微信公众号开发
微信小程序学习阶段一
一、初识小程序
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)
}
})
},
)}
-
微信小程序如何封装接口域名？-icode9专业技术文章分享11-13
-
如何在微信小程序中实现直传功能？-icode9专业技术文章分享11-13
-
如何在小程序的地图组件中添加标记和文字？-icode9专业技术文章分享11-13
-
在微信小程序的地图组件中如何实现自定义标记和气泡？-icode9专业技术文章分享11-13
-
微信小程序教程：零基础入门到实战11-01
-
微信小程序全栈教程：从入门到实践11-01
-
微信小程序怎么实现关注公众号功能-icode9专业技术文章分享10-31
-
微信小程序cover-view，支持bindtap吗-icode9专业技术文章分享10-30
-
微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享10-30
-
微信小程序web-view怎么设置高度？-icode9专业技术文章分享10-30
-
微信小程序中 onLoad和onready哪个先加载-icode9专业技术文章分享10-30
-
小程序 wx.getStorageSync('token')如何清除-icode9专业技术文章分享10-29
-
小程序防止冒泡e.stopPropagation()是什么-icode9专业技术文章分享10-29
-
小程序的点击事件页面如何写-icode9专业技术文章分享10-29
-
微信小程序如何使用echarts的折线图-icode9专业技术文章分享10-25
