微信小程序开发笔记
微信小程序开发笔记：
@组件开发
1、与Vue组件用法类似。
a、创建组件：小程序中的组件与普通页面目录相同，例如需要创建一个名为component的组件。首先创建一个目录为component的目录，由component.wxss、component.wxml、component.js、component.json四部分构成.
与普通页面文件差别：
component.json：需要声明此文件为组件模块，如下，其中 "component":true,指明此文件为页面组件文件。 "usingComponents":为此组件引用其它的组件列表。其它页面调用当前组件同理，只需装当前组件地址添加到 "usingComponents":中。
{
"component":true,
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
component.js：组件中的行为控制器及数据。声明时与其它独立页面中的page项不同，组件 中为Component({});其中重要组成部分由数据data、read及其它生命周期钩子函数、methods方法、properties数据传递等几项构成。其中properties比较特殊，是用来获取父级页面调用当前组件时的数据传递。
properties: {
//这里定义了modalHidden属性，属性值可以在组件使用时指定.写法为modal-hidden
/*日期*/
brandContributeNews: {
type: String,
value: ' ',
observer: function (newData, oldData) {/*主页面数据有更新*/
// console.log(newData, oldData);
}
},
}
b、调用组件与传值
页面中调用 ，只需在wxml中添加组件。例如调用component组件。
创建节点：<component></component>
<component brandContribute-news="{{newsChart}}"></component>
传值：此处的brandContribute-news="{{newsChart}}" 为页面向组件中传值部分。brandContribute-news为上述中 properties中定义的brandContributeNews的值，取值时需将调用组件中的上划线变驼峰式。此处的brandContributeNews可以在组件之直接利用this.data.brandContributeNews获取到。其中observer为数据更新时会记录新值，与更改前上次值，模块中根据此项数据建立的视图，在数据更新后会自动更新重排。
方法：如果要组件中调用父级页面中的方法，在组件中的methods中定义方法，利用triggerEvent传递参数。如下：methods:{
removeContrase:function (e) {
var myEventDetail = {
aContrastList:aContrastListTmp,
name:name,
};
var myEventOption = {} // 触发事件的选项
this.triggerEvent('removeContrase', myEventDetail, myEventOption);
},
}
在组件中调用此方法如下：
<component brandContribute-news="{{newsChart}}" bind:removeContrase="showAddContrastBoxWrap"></component>
这里的showAddContrastBoxWrap为父页面js中的方法，并且showAddContrastBoxWrap接收参数detail，即为之前定义的myEventDetail，与myEventOption ,如要获取参数myEventDetail下的name,在父级页面showAddContrastBoxWrap中即为e.detail.name;至此完成组件之前的调用、传值。
@常见问题
1、在页面中定义弹窗，在弹窗上面滑动时，页面本身会随着滑动方向上下滑动。
解决办法：获取可视区域高度，弹窗显示时，将高度赋值给页面最外层，并添加overflow:hidden属性（可以定义一个class,根据弹窗显示状态添加此class），弹窗隐藏，去除些属性。但有一点，就是页面会自动滚动到顶部，scroll-top变为0。
2、页面中如果有类似echart等canvas组件，层级过高，会置于弹窗之上，设置index无效；
解决办法：目前只有在弹窗显示时，设置图表hidden属性为true;
3、微信小程序中引入echart插件（不能在scroll窗口中引入echart,否则会出现图表不跟随页面滚动的情况）。
@实例
1、微信小程序中创建组件，组件中使用echart,代码：
import * as echarts from '../../ec-canvas/echarts';
Component({
properties: {
//这里定义了modalHidden属性，属性值可以在组件使用时指定.写法为modal-hidden
/*对比列表-chart*/
brandContraseDataChart: {
type: Array,
value: [],
observer: function (newData, oldData) {/*主页面数据有更新*/
//设置对比标签列表数据为图表数据最后一项
if (newData.length > 0) {
brandContraseDataChart: newData,
});
this.barComponent = this.selectComponent('#mychart-dom-bar');
this.init_lin();
var aTmp = [];
var dateTime = '';
var len = newData[0].list.length;
for (var i = 0; i < newData.length; i++) {
var oTmp = {};
oTmp.name = newData[i].brand;
oTmp.codeUpdate = newData[i].list[len - 1].codeUpdate;
oTmp.type = newData[i].list[len - 1].type;
oTmp.code = newData[i].list[len - 1].value;
dateTime = newData[i].list[len - 1].time;
aTmp.push(oTmp);
}
this.setData({
aContrastList: aTmp,
dateTime: dateTime,
});
}
}
},
},
behaviors: [],
data: {
// 这里是一些组件内部数据
ec: {
lazyLoad: true /*对比拆线图*/
},
aContrastList: [], /*对比标签列表-chart*/
},
ready: function () {
},
methods: {
// 这里放置自定义方法
//初始化图表
init_lin: function () {
var _this = this;
this.barComponent.init((canvas, width, height) => {
// 初始化图表
const scaChart = echarts.init(canvas, null, {
width: width,
height: height
});
scaChart.setOption(this.getScaOption(), true);
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return scaChart;
});
},
getScaOption: function () {
var _this = this;
var aLegend = [];
var aXdata = [];
var aData = [];
var option = {... }
return option;
},
}
})
组件页面调用图表：
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
2、左右滑动删除当前项
//滑动事件定义
touchS: function (e) {
if (e.touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startX: e.touches[0].clientX
});
}
},
touchM: function (e) {
if (e.touches.length == 1) {
//手指移动时水平方向位置
var moveX = e.touches[0].clientX;
//手指起始点位置与移动期间的差值
var disX = this.data.startX - moveX;
var delBtnWidth = this.data.delBtnWidth;
var txtStyle = "";
if (disX == 0 || disX < 0) {//如果移动距离小于等于0，文本层位置不变
txtStyle = "left:0px";
} else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离
txtStyle = "left:-" + disX + "px";
if (disX >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "left:-" + delBtnWidth + "px";
}
}
//获取手指触摸的是哪一项
var index = e.currentTarget.dataset.index;
var list = this.data.aTxtStyle;
list[index] = txtStyle;
//更新列表的状态
this.setData({
aTxtStyle: list
});
}
},
touchE: function (e) {
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束，手指移动的距离
var disX = this.data.startX - endX;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
//获取手指触摸的是哪一项
var index = e.currentTarget.dataset.index;
var list = this.data.aTxtStyle;
list[index] = txtStyle;
//更新列表的状态
this.setData({
aTxtStyle: list
});
}
},
页面中调用滑动方法：updateNameStory 为点击时执行的方法
<view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchmove="touchE" bindtap="updateNameStory" >
