微信小程序--总结
开发环境
开发小程序的第一步就是需要去注册一个小程序账号，通过这个账号来管理小程序。第二步要 安装开发工具。这几个内容在微信小程序的文档中都有详细的讲解。 注：小程序的文件大小不能超过2M。
文档地址：https://developers.weixin.qq.com/miniprogram/dev/
小程序组件
小程序有许多的组件。在学习的过程中可以通过文档中讲解的组件来一个个的学习。在组件的使用中，有一些组件要自己定义样式，如：组件button只有两种大小，如果要使用更小的button，就必须要通过自己定义样式来改变。
wxml代码如下：
<view class='cart-operate'>
<button class='btn'>-</button>
<input type="number" value='1' class='inp'></input>
<button class='btn'>+</button>
</view>
wxss代码如下：
.cart-operate{
widows: 230rpx;
height: 60rpx;
display: inline-block;
overflow: hidden;
float: right;
margin-right: 30rpx;
border: 2rpx gainsboro solid;
border-radius:10rpx
}/*按钮绑定的类*/
.btn{
width: 50rpx;
height: 60rpx;
padding:0;
margin: 0;
display: inline-block;
line-height: 56rpx;
text-align: center;
box-sizing: none;
border: none;
border-radius: 0;
}
.btn::after{
border: none;
border-radius: 0;
}
实现图如下：
如上代码要想改变button的样式，有时候要通过after选择器来改变。在小程序有关高、宽、边距等与px有关的建议使用rpx这样可以在不同的设备上有更好的比例效果。
小程序的API
小程序的API虽然都在文档中有说明，但是有些常用的还是要自己去敲一遍代码。一些常用的在老师发的文档中有，然后我自己也找了几个常用的。
1.分享
分享有两种方式：
① 小程序右上角自带的分享功能（...）
如果在当前页面调用wx.hideShareMenu()方法，那么右上角的分享功能将被隐藏，当然，隐藏方法与现实方法是承兑出现的，调用wx.showShareMenu()方法，可以显示该功能。
② 自定义分享按钮：
<button open-type='share'>分享</button>不管使用上面的哪一种方式，都是通过调用当前页面的onShareAppMessage(options)方法返回的数据模型，自定义分享就是return一个对象object即可，其中，options.from可以用来判断是从自定义button打开的转发页面，还是从右上角的打开的转发页面。
以下是options的参数说明：
以下是自定义object的数据模型：
小程序自带分享代码和调试器如下：
onShareAppMessage(options){
console.log(options)
}
自定义分享可以是分享图片等
onShareAppMessage(options){
console.log(options)
return {
title:"自定义分享图片",
path:"/pages/student/student",
imageUrl:"/imgs/cat.jpg"
}
}
2.隐藏滚动条
当页面中使用了滚动视图的时候，在滚动视图上回来滚动条的出现，但是在手机端用户体验的时候，有滚动条是不美观的，所有就需要隐藏滚动条。在需要隐藏滚动条的页面wxss样式中添加隐藏滚动条样式
样式代码如下：
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
3.左滑出现删除按钮
思路：首先将要有左滑出现删除按钮的节点总个节点分为上下两层，上一层放置正常的展示的内容，下面一层放置左滑显示出的按钮，可以通过z-index实现分层。上层通过绝对定位，通过行内样式绑定绝对定位的left属性值来实现左移动，下一层通过绝对定位在最右端，然后通过三个有关手指触摸的事件touchstart（手指触摸开始），touchmove（手指触摸移动）、touchend（手指触摸结束）绑定这个节点，来动态的改变上层的left属性。
wxml代码如下：
<view class="item-box">
<view class="items" wx:if="{{product.length>0}}">
<view wx:for="{{product}}" wx:key="*this" class="item">
<view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" class="inner txt" style="{{item.txtStyle}}">
正常的展示的内容
</view>
<view data-index="{{index}}" bindtap="delItem" class="inner del">删除</view>
</view>
</view>
</view>
wxss代码如下：
.item-box{
width: 100%;
padding:100rpx,0;
box-sizing: border-box;
}
.items{
width: 100%;
margin-bottom: 150rpx;
}
.item-box view{
box-sizing: border-box;
}
.item{
position: relative;
border-top: 2px solid #eee;
height: 250rpx;
overflow: hidden;
}
.item:last-child{
border-bottom: 2rpx solid#eee;
}
.inner{
width: 100%;
position: absolute;
top: 0;
}
.txt{
left: 0;
z-index: 999;
background-color: white;
display: flex;
}
.del{
right: 0;
height: 250rpx;
width: 200rpx;
background-color: #e64340;
text-align: center;
color: white;
z-index:4;
line-height: 250rpx;
}js代码如下：
data:{
product:[
{
id:1,
txtStyle:"left:0rpx",
},
{
id:2,
txtStyle:"left:0rpx",
}
],
delBtnWidth: 180,
}
//获取元素自适应后的实际宽度
touchS: function (e) {
//判断是否只有一个触摸点
if (e.touches.length == 1) {
this.setData({
//记录触摸起始位置的X坐标
startX: e.touches[0].clientX
});
}
var pro=this.data.product;
pro.map(item=>{
item.txtStyle="left:0rpx"
})
this.setData({
product:pro
})
},
//触摸时触发，手指在屏幕上每移动一次，触发一次
touchM: function (e) {
var that = this
if (e.touches.length == 1) {
//记录触摸点位置的X坐标
var moveX = e.touches[0].clientX;
//计算手指起始点的X坐标与当前触摸点的X坐标的差值
var disX = that.data.startX - moveX;
//delBtnWidth 为右侧按钮区域的宽度
var delBtnWidth = that.data.delBtnWidth;
var txtStyle = "";
if (disX == 0 || disX < 0) {//如果移动距离小于等于0，文本层位置不变
txtStyle = "left:0px";
} else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离
txtStyle = "left:-" + disX + "rpx";
if (disX >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "left:-" + delBtnWidth + "rpx";
}
}
//获取手指触摸的是哪一个item
var index = e.currentTarget.dataset.index;
var list = that.data.product;
//将拼接好的样式设置到当前item中
list[index].txtStyle = txtStyle;
//更新列表的状态
this.setData({
product: list
});
}
},
//触摸结束后
touchE: function (e) {
var that = this
if (e.changedTouches.length == 1) {
//手指移动结束后触摸点位置的X坐标
var endX = e.changedTouches[0].clientX;
//触摸开始与结束，手指移动的距离
var disX = that.data.startX - endX;
var delBtnWidth = that.data.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";
//获取手指触摸的是哪一项
var index = e.currentTarget.dataset.index;
var list = that.data.product;
list[index].txtStyle = txtStyle;
//更新列表的状态
that.setData({
product: list
});
}
},
4.节点信息和设备信息的获取
设备信息的获取可以通过wx.getSystemInfoSync()函数来获取得到。通过调试器打印出来的如下图：
其中包含有设备显示器的高（windowHeight）,宽(windowWidth)，设备的类型，设备显示窗口（显示器除上导航和下导航）的宽（screenWidth），高（screenHeight）等信息。
获取某个节点的信息
wx.createSelectorQuery().select("#scroll-hot").boundingClientRect(rect=>{
console.log(rect)
}).exec()
获取节点是信息是通过这个节点的id来获取的如上代码，其中scroll-hot是这个节点的id。可以获取到这个节点的信息如下：
可以获取到这个节点距离上下左右四个方位的距离，这个节点的宽高，还有这个节点子自定义属性（data-xxx）传递的值。
5.key赋值
[key]是es6中的一个新特性，来初始化属性变量和函数的定义方法，并且允许在对象属性中进行计算操作：
var key ="product["+index+"].valuse"；//product是data数据中要改变数据的数组
this.setData({
[key]:adds
})