下载地址：https://mp.weixin.qq.com/
新建一个项目，效果如下：
微信小程序的各级目录介绍：
app.js是全局的JavaScript代码，app.json是全局的配置文件，app.wxss是全局css文件
如果全局代码和局部代码冲突时，全局代码优先级高
资源管理器中有几个页面，在app.json中的pages当中就得写几个页面，完全相同，第一个表示首页的路径，可以在pages当中增加路径，保存之后自动生成对应的文件，app.json当中的window就是页面外观的样式
js文件当中的代码都要写在page()函数当中
onLaunch()：小程序第一次加载时执行的代码
navigationBarBackgroundColor：导航栏背景颜色设置
微信小程序规定页面当中的js配置文件如果是空的，就要删除
页面结构：
各文件夹当中的json和js文件的作用是替代app.json和app.js文件
window当中的属性：
nBBC:导航条的背景颜色
nBTS:导航条当中的文字颜色
nBTT:导航条当中的文字内容
bC:窗口的背景颜色（当开启下拉刷新时才能看见颜色）
bTS:下拉刷新时小点的背景色（light和dark）
ePDR:开启下拉刷新
页面当中的json配置文件只能设置window内容
标签栏的配置：app.json当中的tabBar属性
tabBar属性必须是2个以上5个以下，text为内容，pagePath为超链接，selected表示被选中的
数据绑定：类似vue框架当中的插值表达式，只不过不需要id属性，更加方便
插值表达式可以用在元素的内部，并且不需要v-bind属性来绑定内容
插值表达式的其他用途：
pages当中的函数
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('监听页面');
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('页面初次渲染完成');
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('监听页面显示');
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('监听页面隐藏');
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log('监听页面卸载');
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
循环结构：wx：for ="{{ 对象 }}"类似vue的v-for循环
在循环中{{ index }}可以拿到循环数组的下标
基本的事件是bind+事件名组成
点击事件：bindtap，微信小程序的函数也可以接受参数
阻止冒泡的方法：把内部的点击事件设置为catchtap，不会产生冒泡事件
微信小程序在函数当中的this指向的还是页面
微信小程序想要给函数传递参数不能使用函数名+()的形式，但是可以通过e.target.dataset可以拿到自定义属性，自定义属性用data-属性名=‘属性值’的方式定义
页面对象也就是page，this.data.属性可以拿到插值表达式当中定义的属性和数据
双向数据绑定的方法（类似Vue当中的v-model）：
插值表达式是一次性的过程，页面显示完数据之后再更改数据的值时，页面不会发生变化，需要使用
this.setData({ 属性:新值 })函数改变数据值，才能实时响应到页面当中，这个属性是data数据当中的属性，如果想给数组对象当中的某个属性赋值，这个属性必须加引号
e.detail.value可以拿到表单的内容，e就是页面对象
获取表单当中输入的数据：form标签绑定事件bindsubmit，button按钮绑定form-type事件，input当中要有name属性
条件渲染：wx：if
标签的作用：把需要被控制的代码块（wx：开头的代码）写在block标签当中，可以起到同时控制的作用，但是block标签不会显示，也没有任何额外的功能，类似span标签
微信小程序独有的尺寸单位：rpx ；
小程序UI开发：组件的使用方法，size属性可以控制图标和表单的大小
<view class="container">
<view class="icon-box">
<icon class="icon-box-img" type="success" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">成功</view>
<view class="icon-box-desc">用于表示操作顺利完成</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="info" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">提示</view>
<view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">普通警告</view>
<view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="warn" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">强烈警告</view>
<view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="waiting" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">等待</view>
<view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="success_no_circle" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">多选控件图标_已选择</view>
<view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="circle" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">多选控件图标_未选择</view>
<view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="warn" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">错误提示</view>
<view class="icon-box-desc">用于在表单中表示出现错误</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="success" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">单选控件图标_已选择</view>
<view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="download" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">下载</view>
<view class="icon-box-desc">用于表示可下载</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="info_circle" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">提示</view>
<view class="icon-box-desc">用于在表单中表示有信息提示</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="cancel" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">停止或关闭</view>
<view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="search" size="14"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">搜索</view>
<view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
</view>
</view>
</view>
进度条：progress（类似mui框架的进度条）
在微信小程序中，hover表示按下，hover-class表示按下之后的class属性
操作反馈：交互操作组件，必须通过调用API方式使用
flex伸缩布局：flex布局就是一个弹性的盒子，当盒子内的内容增多时，不需要更改代码也能实现很好的布局方式
子盒子会以主轴为方向，占满整个侧轴的空间，如果给最右边盒子添加flex：1属性，则会占满右边的内容，如果给全部的子盒子都添加flex：1属性，则每个子盒子会平分父盒子。这个flex的值可以设置为任何数，它占多少取决于自身的值/总值，弹性盒子是可以相互嵌套的
页面跳转：
微信小程序的超链接标签是navigator，url是链接地址，如果在navigator标签当中添加redirect属性，则页面没有返回按钮，直接替换，并且不会产生访问记录。navigator当中的hover-class属性为点击添加的类名属性
微信小程序和网页一样，在跳转页面时如果想要传递参数，则需要在url链接之后使用？+参数名=‘参数值’的形式传递，在对应网页的js文件当中的onLoad函数中，option为第一个页面传递过来的参数值
页面跳转API：wx.navigateTo函数
页面返回AIP：wx.navigateBack({ delta:1 }),delta可以设置返回到第几个页面
微信小程序中标签的class等属性可以通过对数据的三元表达式来判断布尔值来设置不同的属性
轮播图：微信小程序自带一个轮播图的组件
//定义轮播图的组件
<swiper class='slides'>
//每一个被轮播的单项，当中放的是图片
<swiper-item>
<image src=""></image>
</swiper-item>
</swiper>
微信小程序对服务器端发送请求：发送的请求不在是ajax，微信小程序没有跨域的概念，请求地址可以写任意的地址。请求的地址必须在后台添加白名单，域名必须备案，而且必须是https。
自己开发可以在微信小程序开发工具勾选不检验合法域名
wx.request：
wx.request({
url: 'url',
header:{
'Content-Type':'json'
},
/*
success函数的三种方法：
success:function(res){
console.log(res);
}
success(res){
console.log(res);
}
*/
success:res =>{
console.log(res);
}
fail:function(res){
}
})
把请求函数封装在公共文件utils当中，通过es6的方法导出使用
util.js代码部分：
module.exports = (url,data) => {
return new Promise((resolve,reject) => {
wx.request({
url: `https://www.baidu.com/${url}`,
success:resolve,
fail:reject
})
}
)
}
index.js部分代码：
//引入util.js，require当中为字符串类型的数据，并且该行代码写在js文件最上方
const fetch = require("../../utils/util");
使用方法：
fetch('url').then( res => {
执行代码
})
微信小程序下拉加载更多信息：移动端的下拉加载信息本质也是PC端的分页加载，触底时加载第二页的数据
原理：
服务器端：在数据库中有很多表，每个表中都有一个id属性，并且从1递增
页面端：在data中定义一个空数组和第几次查询，在给服务器端发送请求时附带一个请求参数。这个请求参数表示第几次查询，并且用limit限制查询的数据，把每次请求过来的全部数据都追加到这个数组当中。在页面端使用wx：for循环渲染数组当中的数据
页面上拉触底事件的处理函数：
onReachBottom：function(){
}
img标签的图片如果只给高度或者宽度的其中一个属性时，再给一个属性mode=‘widthFix’/mode=‘heightFix’，可以让图片自适应
扫一扫
7799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
