微信小程序开发笔记持续更新中...

2019-11-21 本文已影响0人 Jabo

前言

小程序已经火了一段时间了，各大厂商也纷纷推出自己的小程序。想想前端好难啊，天天都要面对新知识，不学习就要掉队，这些天整理公司的小程序项目发现好多点又忘记了~~~心塞塞。所以痛定思痛写做些笔记吧，供大家参考也自己总结下。

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({
….
});