微信小程序实战

1.flex布局实现瀑布流

场景：如上图所示1,2,3,4,5容器分别为5个相同的组件，高度随着组件内部的图片的高度自适应。如何使用flex布局来实现这种自适应的效果。
由于这种容器布局是两列排列的，所以在使用flex的时候会选择row为主轴方向进行排列。

.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

这样的布局方式会出现盒子容器排列不齐的情况。如下图所示

因此我们需要换一种方案解决该问题，可以使用如下解决方案

将横向和纵向分别设置flex布局，最外层容器设置一个flex，然后将每个容器盒子分为基偶排列，然后纵向再用一个flex包围这样就可以实现效果。

2.小程序实现滚动分页

实现微信小程序触底分页需要借助微信小程序提供的onReachBottom函数，当滚动条触底后就会触发，就可以去请求下一页的数据了。
但是在实现的过程中会出现onReachBottom无法触发的情况，原因是因为他找不到底部 所以无法触发onReachBottom函数的执行，因此需要注意的是将当前页面的page设置为101vh，这样就可以找到底部并执行onReachBottom函数了。
需要注意的是，onReachBottom和滚动条scroll-view不能在一起使用，否则依然会找不到底部 从而导致滚动条无法正常滚动。

3. 微信小程序实现多文件上传

场景：微信小程序需要支持多张图片的上传 如何实现？
微信小程序API不支持多文件上传，那么可以使用遍历的方式调用接口上传。更优的方式是使用Promise.all的方式进行上传(这也可以是Promise.all的一个应用场景)

// 上传API
 return Promise.all(
      files.map((file, index) => {
        return new Promise((resolve, reject) => {
          wx.uploadFile({
            url: '/upload',  // 上传的url
            filePath: file.url,
            name: 'file', //后端接收图片的字段名
            success(res) {
              res = JSON.parse(res)
              if (res.code === '0') {
                const data = res.data
                that.data.fileListModel.push({
                  url: data
                })
                that.data.formData.modelImg.push(data)
                that.setData({
                  "formData.modelImg": that.data.formData.modelImg,
                  fileListModel: that.data.fileListModel
                })
                resolve(res.data)
              } else {
                reject(res);
                Toast.fail({
                  message: res.msg,
                  context: that
                });
              }
            },
            error(err) {
              Toast.fail({
                message: '图片上传失败!' + err,
                context: that
              });
            }
          })
        }).then(results => {
          if (results) {
            console.log('上传成功')
          }
          // return { urls: results.map(data => data.url) };
        }).catch(err => {
          Toast.fail({
            message: '上传失败重新上传!',
          });
          return Promise.reject(err);
        })
      })
    )

4. 微信小程序实现将当前搜索关键字添加到历史搜索列表中

// 从缓存中获取历史搜索列表
 getHistory() {
	var keywords = wx.getStorageSync('words');
	return keywords;
 }
 // 将当前关键字添加到历史列表中
 addToHistory(word) {
    // 从缓存中获取历史搜索关键字
	let keywords = this.getHistory();
	if(keywords) {
		// 查找当前缓存列表中是否存在当前关键字
		let index = keywords.indexOf(word);
		// 不存在
		if(index === -1) {
			let length = keywords.length;
			// 缓存列表的长度大于等于最大长度
			if(length >= this.max) {
			    // 将最后一个元素移除
				keywords.pop(word);
			}
			// 将新关键字添加到第一个元素上
			keywords.unshift(word);
			// 将关键词列表放入缓存中
			wx.setStorageSync('word', keywords)
		}
		
	}else {
		// 缓存中没有历史搜索关键字 直接存到缓存中
		keywords = [word];
		wx.setStorageSync('word', keywords)
	}
 }

5. 微信小程序迁移到QQ小程序

1. 注册QQ小程序
2. 直接将微信小程序代码迁移到QQ小程序上，QQ小程序兼容微信小程序的语法代码，但是微信小程序不能兼容QQ小程序语法代码。如果同事开发微信小程序和QQ小程序，建议优先使用微信小程序的代码。

6.微信小程序迁移到百度小程序

1. 注册百度小程序账号
2. 使用百度小程序的搬家工具将微信小程序迁移到百度小程序上。
3. 将wx:for wx:for-index wx:for-item 修改为 s-for s-for-index s-for-item
4. 将wx:if wx:else wx:elif 修改为 s-if s-else s-elif

7.小程序内跳转

一个小程序有很多个页面，每个页面都有不同的功能，页面之间可以相互跳转。小程序启动时只有一个页面层级，但是小程序中有各种各样的页面，这些页面会在跳转时不断的新增、销毁、重新初始化页面层级。
小程序页面被关闭unload之后，如果有原本在执行的逻辑会继续执行。虽然页面跳转会切换页面层级，但是业务代码执行的上下文依然是同一个线程中的。如果这个时候有跳转等逻辑，在跳转之后的逻辑依然会继续执行，如果还有其他跳转逻辑可能会导致页面连续跳转，严重时跳转参数丢失导致白屏
如下跳转逻辑

wx.navigateTo({url: '/pages/pageB'})
// 中间有一大堆的逻辑
wx.navigateTo({url: '/pages/pageC'})

小程序从A跳转到B 后面的逻辑会继续执行 因此页面B会跳转到页面C。由于触发跳转的逻辑并不在B页面上，如果有问题定位就会比较困难。如果用户在未执行到跳转逻辑的时候执行了返回上一页的操作，返回到上一个页面的跳转逻辑继续执行，从而导致进行二次跳转。
为了防止用户进行操作，可以添加判断。

// 处理是否有当前路由
function matchOriginPath(originPageUrl) {
    // 页面栈可以通过getCurrentPages拿到
	let currentPages = getCurrentPages();
	const currentPage = currentPages[currentPages.length - 1].route;
	用于判断当前页面是否已经被跳转走了
	const isMatch = !originPageUrl || (originPageUrl  && currentPage.indexOf(originPageUrl) > -1);
	return isMatch ;
}

8. 跳转到其他小程序

使用wx.navigateToMinniProgram跳转

wx.navigateToMinniProgram({
	appId: '',  //需要跳转的小程序appId
	page: '/page/index',
	extraData: {},   // 需要传递的数据
	envVersion: 'develop',  // 需要跳转的小程序版本
	success(res) {
		// 成功的回调
	}
})