前言
小程序已经火了一段时间了，各大厂商也纷纷推出自己的小程序。想想前端好难啊，天天都要面对新知识，不学习就要掉队，这些天整理公司的小程序项目发现好多点又忘记了~~~心塞塞。所以痛定思痛写做些笔记吧，供大家参考也自己总结下。
1、导入
这里我觉得有必要理解几个概念 export、export default、 module.eports的区别不过多的解释看module.exports 和 exports,export 和export default的区别。require与import的区别 require和import的区别。
上代码：
// data.js
let processForms = [{...}]
module.exports = {
processForms
}
// form.js
import formData from "./data.js";
2、调试AppData
微信开发者里面的使用工具AppData，可以很方便的查看当前数据变化
AppData
组件标签样式警告
组件样式警告
提示很明显了，机制问题，改成用class就好了
3、覆盖第三方组件样式
目前因为微信机制问题【作用域考虑】，在自定义组件中在调用第三方组件，并重写组件样式的话是有问题的。目前有三种方式解决
1、修改第三方组件抛出externalClasses 【不建议】
2、使用标签书写样式有效,但是会报上面组件标签样式警告 【不建议】
3、自己在页面定义class，及书写第三方组件样式可行
4、setData 动态下标的使用
官网介绍方法
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
看到这个的时候我第一反应是js的拼接，but 行不通
this.setData({
'array['+index+'].text':'changed data'
})
可行的做法是,这种魔鬼中的细节只有看文档多实操积累撒【sa】
let itemText = 'array['+index+'].text'；
this.setData({
[itemText]:'changed data'
})
5、容器点击事件穿透【事件捕获】
这里的事情有点扯，按事件的类型来区分的话应该是事件捕获，但是小程序里面点击的明明button 的父容器，却触发了button事件，所以这里我叫他事件穿透。
点击容器触发了button事件
解决：在容器上阻止冒泡，catchtap 一个空事件
推荐了解：浏览器中事件的冒泡
6、textarea 等原生组件穿透浮层【层级最高】
场景：真机中在页面中使用textarea ，里面的placeholder或者内容会漂浮在浮层（弹窗框Mask之类）之上，很恶心啦。
官方的解释是textarea是原生组件层级最高撒
小程序原生组件
目前官方给出的方案是使用 <cover-view>、<cover-image>，这个个人感觉能解决一部分需求，但是局限【限制】有点大。以下整理了网上的几种方案：
1、cover-view 方式
2、隐藏方式，也就是在mask开启时，隐藏原生组件反正都开启浮层了。不过页面可能会闪，对于有强迫症的可能会接受不了撒
3、在2的基础上扩展一下，写个元素占位，mask的时候显示元素占位来替代原生组件【还可以focus 的时候，这个自己想了，思路很多,下面是我项目DEMO部分】
<!--textarea.wxml-->
<view class="textarea-box">
<textarea class="textarea" wx:if="{{focusFlag}}" focus="{{focusFlag}}" value="{{item.defaultValue}}" placeholder="{{item.placeholder}}" disabled="{{item.readonly}}" maxlength="{{item.len}}" bindinput="inputChange" bindblur="textareaBlur"></textarea>
<view class="placeholder" wx:if="{{!focusFlag}}" catchtap="textareaFocus">{{item.defaultValue ? item.defaultValue: item.placeholder}}</view>
</view>
/*textarea.wxss*/
.textarea-box {
position: relative;
height: 200rpx;
overflow: hidden;
}
.textarea, .placeholder {
width: 100%;
border: 1rpx solid #ddd;
padding: 28rpx 34rpx;
height: 200rpx;
box-sizing: border-box;
border-radius: 20rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
}
.placeholder {
position: absolute;
top: 0;
left: 0;
bottom: 0;
word-break: break-all;
overflow: auto;
}
目前主流是这三种方式，如果你有更好的方式，欢迎来搞。
7、小程序{{}}内使用函数
为什么会有这个需求呢？写过Vue的同学应该用用过filter在页面做数据处理，好处是简单，看的直白。bug小程序中没有啊。原来小程序提供了另外一种方式.wxs文件处理。举栗
/*
* utils.wxs
* 大家应该发现了，我这里用的都是es5的语法low？
* 应该这个文件就是这么有个性es6不行哈
*/
var getIsNumber = function(ele) {
if (ele === "" || ele == null) {
return false
}
if(!isNaN(ele)){
return true
} else {
return false
}
}
module.exports = {
getIsNumber: getIsNumber
}
.wxs文件有了这么用呢找个页面试试啥
/*
* test.wxml
* 就这么简单粗暴
*/
<wxs src="../../utils.wxs" module ="utils"/>
...
<view wx:for="arr" wx:key="index">{{utils.getIsNumber(item.type)}}</view>
...
8、npm 构建
这个是因为这几天移动了项目目录，用cnpm install后再构建发现不行，所以你懂得npm install撒
9、组件内canvas 失效
这是个很有意思的事情，在页面中使用canvas都正常，把事件抽到自定义组件里面，canvas失效了，my god！
查了一下原来是作用域的问题，组件内要指定this。
1、 const query = wx.createSelectorQuery().in(this)
这一句是最重要的，要用 in(this)，this传入的是自定义组件的实例，否则获取到的rect值为null。
ready: function() {
const query = wx.createSelectorQuery().in(this)
query.select('.search-content').boundingClientRect(rect=>{
console.log(rect.height)
}).exec();
}
2、canvasToTempFilePath: fail canvas is empty。 类似
wx.canvasToTempFilePath({
canvasId: 'canvasId',
success: (res) => {
},
fail: (res) => {
}
},this);
10、获取小程序页面栈
let pages=getCurrentPages();//页面指针数组
let prepage=pages[pages.length-2];//上一页面指针
prepage.setData({
….
});
网友评论