在对一个程序或者界面编译之前，需要有充足的知识储备，同时需要一个良好的编程软件，因此微信团队开发了一个适用于大众及专业人员的软件：稳定版 Stable Build | 微信开放文档
进入软件界面之后，首先会看到app.js、app.json,app.wxss、project.config.json、sitemap.json，他们的功能为
sitemap.json配置文件
project.config.json配置文件
wxml类似于html中的html 书写页面结构
wxss类似于html中的css 书写页面样式
app.wxss书写全局样式
app.json配置文件
一、如何创建一个页面
例如我要创建一个名为box的页面，首先，我们要找到app.json文件中的pages,在pages中输入
"pages/box/box", (在微信小程序中，逗号（,）相当于Java中的分号(;）有分开代码的作用，但不同的是，小程序可以不用在最后一个语句中加逗号），编译box之后模拟器中会显示pages/box/box.wxml，此时代表创建成功，此时可以在资源管理器中的pages文件里看到文件box，因此我们可以知道每个页面都有一个独立的文件夹每一个页面文件都包含后缀为wxml wxss js json四个文件。
知识点（WXML）
1.在页面中添加图片
<image src="../../images/图片名称.后缀"></image>
在标签 image 中加入mode="aspectFit"可以使图片保持纵横比，完整的显示图片
2.滚动条
scroll-view：可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。
组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
scroll-x:允许横向滚动
scroll-y:允许纵向滚动
3.图标组件
icon图标组件:
icon的类型，有效值：success, success_no_circle,
info, warn, waiting,
cancel, download, search, clear
<icon type="success" size="100" color="lime"></icon>
<icon type="success_no_circle" size="100" ></icon>
<icon type="info" size="100"></icon>
<progress percent="30" backgroundColor="orange" active="true" color="red"></progress>
4.导航
navigator导航：navigator实现页面跳转
<navigator url="/pages/index/index">首页</navigator>
url跳转的地址 /根路径
如果跳转页面在tabbar中出现过，不能直接跳转 ,加open-type="switchTab
<navigator url="/pages/my/my" open-type="switchTab">我的</navigator>
二、小程序案例
1.知识储备
小程序中使用js的变量的时候，需要使用{{}}
其中{{}}中存放变量或者表达式
这些值需要存放在js中的data;{}中，
格式为data:{变量名：值（'abc:123'）}
在微信小程序中，想要wxml界面中实现动态变化需要js的参与，
例如微信中的点击事件,以按钮为例，需要在<button中添加bindtap='名称'>
bindtap为小程序中的点击事件（方法名后面不加()），在用bindtap绑定一个点击事件后，回到Js中定义一个方法，在JS中，方法可以直接定义，
例：方法名：function（）{}
在方法中我们可以用this.data.变量名来获取数据
this.setData.（{变量名：值}）来修改数据
当需要从两个选择中二选一时，可以使用三元表达式：
a?'b':'c'如果a为真的时候，得到b否则c
微信小程序中需要遍历时，使用wx:for={{变量}} 实现遍历 动态复制标签
item代表每一个选项的值 代表下标元素
小程序中事件传参 data-js中接受名字="传递参数
例：<view wx:for="{{list}}" bindtap="toggle" data-id="{{index}}">{{item}}-{{index}}</view>
因为在此方法中名字为形参，故可以随意取名 如toggle:function(e){
this.data.e
}
wx:if="表达式"表达式为真的时候显示 表达式为假的时候隐藏
<button wx:if="{{1==2}}">按钮</button>
一.选项卡设计
（1）首先在wxml界面中建立标签text，加入点击事件bindtap=“change”，后在JS编译界面中的data中加入list数组，返回text中输入data-id="{{index}}" 再输入
wx:for="{{list}}"遍历，把在data中输入的list遍历到wxml界面后在标签text中输入{{item}}
代码为：
<text bindtap="change" data-id="{{index}}" wx:for="{{list}}">{{item}}</text>
要实现几个选项之间可以动态选择，因此需要在JS界面中定义方法
此时JS中的data中有list和num两个数据，其中num:0（数组的渲染顺序一般从下标为0开始，因此这个数为0）
故代码为:
change:function（e）{
this.setData({
num:e.target.dataset.id
//此时为修改num中的数据
}
如果想要在点击选项卡之后可以显示颜色
我们可以在text中加入三元表达式
class="{{index==num?'current':''}}" 此段代码的意义为，当数组下标==num时，如果为真，则显示current的内容，如果此时选择的不是num中的数组则
不显示current的内容
（2）在点击选项卡之后下面有内容
建立一个view，在JS中的data里再输入一个数据con返回界面在view中输入vx：for，使data中的con遍历到wxml中的view里面，
因为data中list和con都属于数组的一类，故下标index和内容item相同，因此可以在view中使用vx:if来显示和隐藏某个数组内容
代码片段为：
：<view wx:if="{{num==index}}" wx:for="{{con}}">{{item}}</view>
当num==index时 假设{{0==0}}故显示下标为0的数组内容
二.如何创建网易云音乐歌曲圆盘
首先在wxml中创建image标签来放置圆形图片
设置可以360度旋转的图片 需要使用动画效果
因此 在wxss中输入代码
animation: move 1s infinite linear;animation: move 1s infinite linear; //使动画旋转定义动画的旋转
@keyframes move{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}如果需要动画在点击时暂停
我们可以在image标签中写入
<image class="{{num==0?'paused':''}}" ></image> 同时在JS中data写入num：1
在wxss中写入animation-play-state: paused; // 使动画暂停在创建音频过程中需要使用的代码
const innerAudioContext = wx.createInnerAudioContext() // 创建音频
innerAudioContext.src='播放路径' // 播放地址
innerAudioContext.autoplay = true // 自动播放
innerAudioContext.loop=true // 循环播放
使点击圆形图片和音乐的开始/暂停关联则需要到JS
首先在image标签中写入bindtap="change"
当我们点入界面之后应该自动播放音乐，如果我们设置音乐播放为num=0/1
则在data中写入num：1 此时音乐播放
change:function(){
if(this.data.num==0){
this.setData({
num:1
})
// 播放音乐
innerAudioContext.play()
}else{
this.setData({
num:0
})
// 暂停音乐
innerAudioContext.pause()
}
}音乐点击圆盘之后的播放和暂停实际上是数据的变换，当data中的num中为1时
播放音乐，num为0时暂停音乐
三.如何把视频放入小程序并可以发送弹幕
首先在wxml界面创建video 后输入src填写视频地址 再写入id="myVideo"以获得音频
怎么样在视频中发送弹幕
首先在wxml界面中写入input标签 写入绑定获取标签数据bindinput="getcon"
写入button标签同时绑定点击事件bindtap="send"
在video中写入danmu-list="{{danmu}}"
之后进入JS后在data中写入
danmu[]{
text:'123' //文本内容
color:'pink' //弹幕颜色
time:1 弹幕出现时间
}之后在data中输入con:' '绑定内容
之后输入
getcon:function(e){
console.log(e.detail.value)
this.setData({
con:e.detail.value
})
},
send:function(){
// 实时发送弹幕
this.video.sendDanmu({
text:this.data.con,
color:'pink'
})
}
onReady: function () {
// 获取音频
this.video=wx.createVideoContext('myVideo')
}四.如何在小程序中发评论
首先
在wxml界面创建一个textarea标签
创建button标签
创建view标签后加入两个text标签，一个为显示输入内容，一个为时间
在进入JS编译之前，首先需要在textarea中输入bindinput来实时获取表单元素的值
button中添加一个点击事件bindtap="send"来实现点击之后和输入评论区域以及展示区域联动
在view中输入wx:for{{list}}实现对评论内容的遍历
在JS中，在data里输入list：[{con: '' ,date:''}]表示了发评论的一个大概内容和我们应该要获取的值,之后输入
getcon:function(e){
// 存储的就是表单元素的值
console.log(e.detail.value)
// 把表单元素的值赋值给con
this.setData({
con:e.detail.value
})
}因此我们可以从此代码看出，在textarea中获取的值将以con的形式表达，
故在data中定义一个变量con:' '
要实现发送数据，最关键的在于button，如果将button与上下两个区域进行联动，以达到发送评论的目的
因此，我们创建
send：function（）{
首先创建变量date: 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
var mylist=this.data.list //获取变量list之后追加变量
con:this.data.con,
date:year+'-'+month+'-'+d+' '+hours+':'+minutes+':'+seconds
})把list中的con和date追加到mylist中
此时mylist和list是一个包含的关系，
所以我们把list修改为mylist
this.setData({
list:mylist
})如何在云开发数据库中找到我们存储的数据
首先
在WXML中创建两个input
一个用来输入user，一个用来输入password
创建两个button，一个用来增加数据
一个用来查询数据
首先在输入uset的input标签中输入 placeholder="请输入用户名" type="text"
又因为需要和JS联动所以需要一个点击事件bindtap="uin"
同时，在输入password中的标签中输入 placeholder="请输入用户名" type="password"
又因为需要和JS联动所以需要一个点击事件bindtap="upa"
在button标签中输入bindtap="add"增加数据
button bindtap="select"查询数据
在JS中
首先我们先建立一个数据库名为student
add:function(){
const db = wx.cloud.database()
db.collection('student').add({
// data 字段表示需新增的 JSON 数据
data: {
user:'zzl',
pass:'123456',
user:'zss',
user:this.data.user,
pass:this.data.pass
},
success: function(res) {
// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
console.log(res)
},
})
当我们在输入用户名的文本框中输入内容时，我们把这些内容定义为user
当我们在输入密码的文本框中输入内容时，我们把这些内容定义为pass
因此在data中我们要输入两个变量并且两个变量要把输入的内容获得
data: {
user:this.data.user,
pass:this.data.pass
}
在输入内容时我们获取他的值，获取用户名
uin:function(a){
console.log(a.detail.value)
this.setData({
user:a.detail.value
})
}在输入内容时我们获取他的值，获取密码
upa:function(a){
console.log(a.detail.value)
this.setData({
pass:a.detail.value
})
}当输入完成之后点击绑定名为add的button
即可导入数据库，刷新之后我们可以看到里面的内容
当建立完毕之后，我们要查询我们输入的数据，因此我们需要用到查询的语句
我们在button中建立了点击事件select
在JS中，我们需要定义一个变量
select:function(){
const db = wx.cloud.database()
db.collection('student').where({
user:'123',
pass:'123'
})在where中输入我们想查询的user和pass，点击button后即可查询到我们输入过的数据
