微信小程序踩坑2

1.小程序跳转小程序功能(请注意 两个小程序之间需要相互绑定) 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置

"navigateToMiniProgramAppIdList": ["wxxxxxxxxxxxx","wxxxxxxxxxxxx"]
	    * appId    string   要打开的小程序 appId    
	    * path    string   打开的页面路径，如果为空则打开首页    
	    * extraData   object  需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据。    
	    * envVersion  string   要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版，则打开的小程序必定是正式版。  (develop 开发板 trial 体验版 release正式版)    
	    * success    function 接口调用成功的回调函数    
	    * fail    function   接口调用失败的回调函数    

  wx.navigateToMiniProgram({
       appId: item.appId, //  要跳转的小程序Id
           path: 'pages/index', // 跳转的目标页面
           // envVersion: 'trial',  要注意这个参数 envVersion 
             ( "develop" 开发板    "trial" 体验版 "release" 正式版)
           extraData: {    // 需要传递的参数
             data: '1'
           },
           success: function success(res) { } // 成功回调，
           fail: function success(res) {} // 失败回调
         });

·····················································································
2.小程序页面跳转防止乱码以及传参问题 A->B
1)
A页面 （注意：encodeURIComponent 防止传过去的数据乱码）

 wx.navigateTo({ url: '/pages/home/home?url=' + encodeURIComponent(urlredirectTwo),})

B页面 （注意：decodeURIComponent 解析当前页面）

	 onLoad: function (options) {decodeURIComponent（options.url）console.log(options) //{url: 'https;XXXXXXXXX'}},

传递多个参数A->B

  wx.navigateTo( {url: '/pages/coupon/details/details?id=' + '18+‘&name=’ +'Hyun___' })

onLoad(options) // {name: Hyun___, id: 18}

·····················································································
3.小程序组件传值问题
父组件.wxml

		<view class="main">    <header bind:parentEvent='onParentEvent' id='header'></coupon>     </view>

父组件.json
{ “usingComponents”: {“header”: “…/header/index”, }}
父组件.js

    onParentEvent: function (e) {
       this.setData({  id: e.detail.id  })  },
   =======

子组件.js

Component({
  properties: {
    childData: {
      type: Object,
      value: { "bg_color": "white",    "color": "#000",    "flag": 1,    "name": "标题"} }  },
  data: {}, // 私有数据，可用于模版渲染
 lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {
      this.getCouponList()
     },
    moved: function () { },
    detached: function () { },
	  },
  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
 
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function () {
   // 在此请求数据接口列表
  }, 
  pageLifetimes:{
    show: function () {
      this.getList()
    }
  },
  // pageLifetimes: { // 组件所在页面的生命周期函数  show: function () { //   }, // },
  methods: {
    clickEvent: function () {     
      var myEventDetail = {id: 1}
      // 触发事件的选项
      var myEventOption = {}
      // 使用 triggerEvent 方法触发自定义组件事件，指定事件名、detail对象和事件选项
      this.triggerEvent('parentEvent', myEventDetail, myEventOption)
    },  }})

·····················································································
4.
小程序全局分享配置
// app.js 需要配置

	  "window": {
	    "withShareTicket": true
	  },

只要在app.js 写了 share 这个方法

	  share: function () {
	    //监听路由切换
	    //间接实现全局设置分享内容
	    wx.onAppRoute(function (res) {
	      //获取加载的页面
	      let pages = getCurrentPages(),
	        //获取当前页面的对象
	        view = pages[pages.length - 1],
	        data;
	      if (view) {
	          view.onShareAppMessage = function () {
	            //分享配置
	            return {
	              title: '标题',
	              path: 'pages/index/index',  // 路径，传递参数到指定页面。
	              imageUrl: 'https://xxxxxx',   // 分享的封面图
	              success: function (res) {
	                // 转发成功 console.log("转发成功:" + JSON.stringify(res));
	              },
	              fail: function (res) {
	                // 转发失败 console.log("转发失败:" + JSON.stringify(res));
	              }
	            };
	          }
	    })
	}

那么之后的页面只要带着onSHareAppMessage 这个函数 就不需要在里面写内容了

=====
小程序单个页面分享

	onShareAppMessage: function () {
		//分享配置
		return {
			title: '此处为标题描述',
			path: 'pages/index/index',  // 路径，传递参数到指定页面。
			imageUrl: 'https://xxxxxx',   // 分享的封面图
			success: function (res) {
				// 转发成功
				console.log("转发成功:" + JSON.stringify(res));
			},
			fail: function (res) {
				// 转发失败
				console.log("转发失败:" + JSON.stringify(res));
			}
		};
	},

············································································
5.
小程序添加拦截器 采用了fly.js
官网：https://nodejs.ctolib.com/wendux-fly.html
// app.js

var Fly = require('./flyio'); //引入路径根据自己放置的目录配置
var fly = new Fly();
// 响应头
fly.interceptors.response.use(
  response => {
    return response; //请求成功之后将返回值返回
  },
  err => {
	return err
    }
    // Do something with response error
  }
);
export default {
  fly: fly
};

---

index.js
import http from ‘./http’;
// post

  http.fly
      .post(url,  data, {
        headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': 'xxx'
        }
      })
      .then(res => {
        return resolve(res);
      })
      .catch(err => {
        return reject(err);
      });

//get

 http.fly
      .get(url, params, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': 'xxx'
        }
      })
      .then(res => {
        return resolve(res);
      })
      .catch(err => {
        return reject(err);
      });

·············································································
6.
小程序封装POST,GET请求

const getPost= function (url, data, urlParams) {
  let urlParam = '';
  if (urlParams) {
    urlParam = '/' + urlParams;
  }
  return new Promise((resolve, reject) => {
    http.fly
      .post(url,  data, {
        headers: {
          'content-type': 'application/json',
          'Authorization': "xxxxx"
        }
      })
      .then(res => {
        return resolve(res);
      })
      .catch(err => {
        return reject(err);
      });
  })
};

const getFunc = function (url, params, urlParams) {
  let urlParam = '';
  if (urlParams) {
    urlParam = '/' + urlParams;
  }
  return new Promise((resolve, reject) => {
    http.fly
      .get(url, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': "xxx"
        }
      })
      .then(res => {
        return resolve(res);
      })
      .catch(err => {
        return reject(err);
      });
  })
};

······························································
7.
小程序swiper 滑动过快导致闪屏
// 已修改 当快速滑动时，e.detail.source 不是touch 需增加判断， source为touch时,在赋值

handleChange: function(e){
     if(e.detail.source == "touch") {
            this.setData({
                current: current
            })
        }   
}

······························································
8.
小程序的几种路由方式
1）.wx.switchTab(Object object)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

	wx.switchTab({
	  url: '/index'
	})

2).wx.reLaunch(Object object)
关闭所有页面，打开到应用内的某个页面

	wx.reLaunch({
		  url: 'test?id=1'
	})

3).wx.redirectTo(Object object)
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.redirectTo({
  url: 'test?id=1'
})

4).wx.navigateTo(Object object)
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

		wx.navigateTo({
		  url: 'test?id=1',
		  events: {
		    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
		    acceptDataFromOpenedPage: function(data) {
		      console.log(data)
		    },
		    someEvent: function(data) {
		      console.log(data)
		    }
		    ...
		  },
		  success: function(res) {
		    // 通过eventChannel向被打开页面传送数据
		    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
		  }
		})
	···············

//test.js

		Page({
		  onLoad: function(option){
		    console.log(option.query)
		    const eventChannel = this.getOpenerEventChannel()
		    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
		    eventChannel.emit('someEvent', {data: 'test'});
		    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
		    eventChannel.on('acceptDataFromOpenerPage', function(data) {
		      console.log(data)
		    })
		  }
		})
5).
wx.navigateBack(Object object)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
堆栈的解释：(https://baike.baidu.com/item/%E5%A0%86%E6%A0%88/1682032?fr=aladdin) 其实我没太看懂！！！
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

···············································
9.
小程序分包加载（ 此处引入了官方文档）
目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过 16M
单个分包/主包大小不能超过 2M
对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

具体使用方法请参考：
使用分包  https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
独立分包 https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html
分包预下载 https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html