开发小程序问题总结

1.获取页面可视区的高度

//getSystemInfoSync是获取系统的信息的
wx.getSystemInfoSync().windowHeight;

2.获取页面的dom元素，原生js在小程序中是无法获取到dom元素的，可以通过下面的方式获取

//https://developers.weixin.qq.com/miniprogram/dev/api/SelectorQuery.exec.html
wx.createSelectorQuery().selectAll('.tables-list').boundingClientRect((tablesList) => {
//这里是获取到的对象列表
	tablesList.forEach((item, index) => {
		height += item.height;
	});
}).exec((tablesList) => {
	//执行所有的请求，请求结果返回的是dom列表
});

3.scroll-view简单的使用，原理是：需要滚动的元素的高度必须超出父元素(scroll-view)的高度，真机调试才可以看到效果

<scroll-view scroll-y scroll-with-animation></scroll-view>

4.小程序的模板里不允许直接使用原生js的方法和return值，如果需要进行复杂的操作可以使用computed和filter进行数据计算或过滤

5.textarea原生组件如果它的外层元素是fixed的，即使使用fixed=”true”,文字会固定在当前位置，目前解决方法是不给外层添加fixed

6.目前的语言包是通过模拟i81n实现语言包的，在子组件使用语言包需要通过props传值，例如(:$t=”$t”)

7.关于小程序原生组件层级过高问题可以使用它的cover-view进行覆盖

8.mpvue中无法使用axios，而我们的原本的h5项目需要在原来的基础上改版为小程序，可以使用flyio

(1)import Fly from "flyio/dist/npm/wx"
	const axios = new Fly()
	export default axios;
另外可以参考一下文档：
	https://www.poorren.com/mpvue-mini-program-ajax-axios
	https://www.jianshu.com/p/7a4b56e793e4

9.解决小程序内容不够的时候，高度100%无法撑满容器，解决的办法是
1.给page标签添加css
2.是给模板外层容器添加固定定位
3.使用小程序的wx.getSystemInfoSync().windowHeight;例如

(1)
Page{
	Height:100%;
	Overflow-y:auto;
}
(2)
.container{
	position: fixed;
	height: 100%;
	width: 100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content: center;
}
(3)wx.getSystemInfoSync()可以获取到系统的信息，wx.getSystemInfoSync().windowHeight可以获取到移动端的可视区的高度，可以使用这个给最外层的元素绑定高度。

10.使用mpvue-router-patch代替vue-router实现this.$router.push方法，跳转链接改为/pages/home/main

11.textarea穿透遮罩层的问题，因为原生组件层级最高，会导致textarea定位在遮罩上，解决的办法是通过一个容器模拟textarea的样式，在遮罩出现的时候textarea隐藏，模拟的容器显示，遮罩隐藏的时候，textarea显示，示例：

<textarea 
	:class="is_weixin ? 'textarea-padding' : ''" 
	v-show="!mastload" name="" 
	:placeholder="请输入留言" 
	v-model="notice" 
	cursor-spacing="90">
</textarea>
<div 
	:class="is_weixin ? 'textarea-div' : ''" 
	v-show="mastload" 
	class="textarea">
请输入留言
</div>

(1)is_weixin是用来判断手机系统的，因为textarea在android和ios的样式不同，在computed里计算，代码如下：

is_weixin: function () {
	let res = wx.getSystemInfoSync();
	//获取手机系统类型android或ios
	let system = res.platform === 'android' ? true : false;
	return system; 
}

12.页面层数的处理，我们知道小程序的页面栈达到10层的时候，如果还是使用wx.navigateTo()是无法跳转的，这个时候我们可以使用wx.reLaunch()、wx.redirectTo()、wx.navigateBack()解决这个问题，看代码(mpvue里的解决方案，如果使用其它框架或原生api替换掉跟mpvue-router-patch相关的方法即可)

//跳转的时候直接调用这个函数，这篇文章有详细说明 https://segmentfault.com/a/1190000012282464
toPushPages: function (params) {
    //获取页面层数
    let currentsPages = getCurrentPages();
    let len = currentsPages.length;
    //可能每个人的传进来的参数不同，有可能是字符串或对象
    let path = typeof params == 'object' ? params.path : params;
    //查找是否存在页面层数中
    let index = currentsPages.findIndex(item => {
      //替换掉第一个/，有可能不同的传进来的参数不同
      return path.replace(/^\//, '') == item.route;
    })
    //回退的页面层数，默认是1
    let backFloor = len - (index + 1);
    //判断页面栈中是否已经存在，存在则使用回退的方式
    if (index >= 0) {
      this.$router.go(backFloor);
    } else {
      //判断页面栈中的层数是否达到限制，就让顶层的栈出栈，需要跳转的页面进栈
      if (len >= 10) {
        this.$router.replace(params);
      } else {
        this.$router.push(params);
      }
    }
  }

13.注意小程序中，编译后的代码包最大为2M，超过2M，需要对资源进行处理，例如图片的优化，或者做分包处理最大为8M