微信小程序
一、配置环境的准备
1.appId
2.文件结构
二、插值表达式
1.语法
这里的message在页面的js文件data对象里定义
<view>{{message}}</view>view> 注意：如果不加{{}}，那么微信小程序就会把这个变量认成字符串
{{}}前后加字符串会自动拼接成字符串
标签属性值为true，可以省略="{{true}}"
true也要写在{{}}里，否则也会被认为是字符串
三、wx:if和hidden
1.wx:if
wx:if类似于v-if，都是条件为真时显示标签。也是通过销毁创建dom元素的方法来进行dom元素的隐藏和显示
<view wx:if="{{true}}"></view>view>
其中wx:if wx:elif wx:else 和vue中的v-if v-else-if v-else相对应，使用也是一样的
2.hidden
hidden类似v-show，不同点在于当条件为true时，hidden会隐藏标签，但是v-show是显示标签。但他们的显示隐藏都是通过css display样式来进行控制
<view hidden="{{true}}"></view> 隐藏
四、wx:for
wx:for和vue里的v-for差别不是很多，大体的语法和渲染都和vue一致
list在js里的Page入口函数中data定义
<text wx:for="{{list}}" wx:key="*this">{{item}}-{{index}}</text>
tips1：
这里的wx:key类比vue中的:key，但是写法上有一点不同。
①对于简单数组，wx:key=”*this“，这里相当于:key="index"。俗话
说：有id用id，没id用index。这里的*this代表数组的每项元素
②对于复杂数组，wx:key="值唯一的键名"。例如list:[{id:1,name:'wx'},{id:2,name:'wx'}]，这里的id属性就是独一的，所以wx:key="id"(注意，这里不用插值)。反之，如果name属性是独一的，也可用name键名做key。
tips2：
这里的item和index也可以换成其他的名字，在标签里设置**wx:for-item="v"来设置item的名字 ；通过wx:for-index="i"**来设置index的名字
五、事件
1.绑定事件
语法
<view bindtap="clickFn"></view>
Page({
data:{},
clickFn(e){
console.log(e)
}
})
在小程序里绑定事件和vue里就很不一样了，在标签上绑定事件通过bind+事件名称来绑定事件。然后在js文件里，事件声明在和data同级的地方（不需要在methods里声明）
tips：在给标签绑定事件时，不能通过()去传参，小程序会把clickFn(100)和clickFn认成两个函数，它会去寻找你Page()里有没有clickFn(100)函数，而不是去找clickFn
2.传值
<view bindtap="clickFn" data-index="1"></view>
Page({
data:{},
clickFn(e){
// 打印结果为1
console.log(e.currentTarget.dataset.index)
}
})
和vue用函数括号传值不同，小程序的传值更接近原生js的传值。之前原生js要写删除某条数据的代码，也是通过自定义属性来进行传值，和小程序不同之处就是自定义属性放的地方不同罢了
3.小程序的数据驱动视图
<view wx:for="{{list}}" wx:key="*this" bindtap="delFn" data-index="{{index}}">{{item}}</view>
Page({
data: {
list: [1,2,3,4]
},
delFn(e) {
const { index } = e.currentTarget.dataset
// 直接对数组进行操作不能驱动视图
this.data.list.splice(index, 1);
}
})
上述做法并不能做到数据驱动视图，即使在appdata里查看list的数据已经发生了改变。小程序唯一能驱动视图的方法只有this.setData({属性名:值})，所以要在上面的js的最后添加一行代码this.setData({ list: this.data.list })，此时视图才会更新（this.setData({})可以更新多个变量）
六、样式
小程序的样式和css样式几乎能说是完全一样，但是有两个点需要注意
①小程序里不支持通配符*，因为小程序在內部进行了样式默认值处理，并且小程序对于兼容性也没什么要求。
②小程序新增了相对单位rpx，750rpx=100vw=视口屏幕宽度，作用是移动端适配
七、小程序的内置组件
1.view和text
view类似html里的div标签，块级元素。
<view></view>
text类似html里的span标签，行内元素。
<text></text>
tips：text标签和span标签有点不同，text标签可以长按选中复制文本，通过user-select属性进行设置。并且text不能嵌套其他标签（在页面上不会显示），只能嵌套text标签。
2.image
类似html里的img标签
<image mode="..." src="..." lazy-load></image>
①src属性用于设置图片路径，注意：与传统img标签路径不同的是，image的src设置的是绝对路径，以/开头
②mode属性用于设置图片的显示模式
③lazy-load开启懒加载模式
3.swiper
swiper是小程序内置的轮播图组件
<swiper>
<swiper-item>
<image></image>
</swiper-item>
</swiper>
①这个组件有默认大小，不管是什么尺寸的图片，都是默认占满
②interval控制轮播图播放速度
③auto-play开启自动播放
4.navigator
用于跳转小程序內部的页面或者是其他的小程序
<navigator url="/...."></navigator>
①url里的路径是绝对路径，以/开头
②只有在pages中设置过路径列表的页面才能跳转
③在tabBar（与pages同级）中的list列表里设置过的路由页面默认不能跳转过去
跳转模式（open-type）
1.swithTab
作用：可以允许跳转到tab页面
特点：清除掉历史记录，没有回退按钮
2.redirect
作用：不产生一条跳转的记录
特点：哪个页面不想要历史记录，就在该页面的navigator里添加redirect属性
3.navigatorBack
作用：回退到上一个页面，通常用于自定义返回按钮的样式
注意：写url无作用，写不写都一样
4.reLaunch
作用：跳转到目标页面，清除其他页面的历史记录
5.button
与之前所学的标签和组件不同，小程序的button按钮十分强大
可以分享改小程序给其他的微信用户
<button open-type="share"></button>
向微信反馈小程序存在的问题
<button open-type="feedback"></button>
联系客服（客服是开发小程序方添加的客服，并不是微信客服）
<button open-type="contact"></button>
查看设置（向用户申请授权通过的权限才会显示）
<button open-type="openSetting"></button>
获取用户手机号码（该功能只向通过认证的企业用户开放）
<button open-type="getPhoneNumber"></button>
6.rich-text
富文本标签
<rich-text>html字符串</rich-text>
小程序的富文本和vue的v-html和原生js的innerHTML很相似，都是可以解析字符串里的html标签。
特点：
①可以通过style和class控制样式
②id和标签选择器不能控制样式
八、自定义组件
小程序使用自定义组件和vue相比，减少了一个步骤。vue使用自定义组件是创建、导入、注册、使用。但是小程序的是创建、注册、使用
1.创建组件
小程序组件创建在和pages同级的components文件夹里，创建时建议文件夹名称和文件名一致
2.注册组件
在需要使用的页面中json文件usingComponents对象里注册
{
// 表示这个是一个组件（写在组件的json中）
"component": true,
// 使用在哪个页面里，就在哪个页面的json里的这个属性写上该文件的路径（写在需要使用的页面json中）
"usingComponents": {}
}
3.使用组件
在注册的页面里直接使用
<组件名></组件名>
九、组件传参
小程序组件之间的传参和vue里的有点不同，但是大致方向还是一致的
1.子传父
①给子组件绑定一个事件处理函数
<view bindtap="clickFn"></view>
②在子组件的js文件的Component({})入口函数里methods声明
Component({
data:{
msg:123
},
// 和页面js不同，子组件的方法要写在和data同级的methods里
methods: {
clickFn() {
// this.triggerEvent('自定义事件名', 传递的参数)
this.triggerEvent('clickFn', this.data.msg)
}
}
})
③在父组件中监听子组件所传过来的自定义事件 (bind+自定义事件名="父组件的处理函数")，这里就能看出vue的影子
<TextOne bindclickFn="clickFn"></TextOne>
④在父组件的Page({})入口函数中声明处理函数
Page({
data: {
},
clickFn(e) {
// e.detail就可获取所传过来的参数
console.log(e);
}
})
2.父传子
①父组件向子组件传值
<TextOne msg="{{msg}}"></TextOne>
②子组件接收父组件所传过来的值，也是和vue很相似
Component({
// 相当于vue里的props
properties: {
msg: {
type: String, // 传过来的数据类型
value: 456 // 默认值，相当于vue的deafult
}
}
})
总而言之，其实小程序组件传参的方式与vue十分相似（怎么会是呢），注意组件内的js文件和页面的js有所差异。首先是入口函数的不同，组件的是Component，页面的是Pages。并且组件的方法写在与data同级的methods里，页面则是写在和data同级的地方即可（少个methods包着）
十、小程序的生命周期
1.应用级（全局）
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
2.页面级
Page({
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 页面进入前台
*/
onShow() {
},
/**
* 页面进入后台
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载（清缓存）
*/
onUnload() {
},
/**
* 用户下拉刷新触发
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底触发
*/
onReachBottom() {
},
/**
* 用户点击右上角分享触发
*/
onShareAppMessage() {
}
})
3.组件级
Component({
// 组件挂载后执行
attached(){
// 发请求、开定时器
},
// 组件被卸载时执行
detached(){
// 清除定时器，清除缓存
}
})
常用的大概就是以上这些了，剩下一些不常用的可以去微信小程序官网了解
