微信⼩程序scroll-view（滚动组件）与onPullDownRefresh（下拉刷新）⼀.官⽅api描述在滚动scroll-view时会阻⽌页⾯回弹，所以在scroll-view中滚动，是⽆法触发onPullDownRefresh查阅⼤量资料以后发现⼀共有三种⽅式：1.使⽤view代替scroll-view，从⽽触发onPullDownRefresh2.在scroll-view标签上新建⼀个隐藏的view标签，使⽤scroll-view标签中bindscrolltoupper（滚动到顶部/左边，会触发事件）显⽰view标签，做动画模拟上拉刷新3.scroll-view标签下添加⼀个view标签能与onPullDownRefresh结合使⽤（我猜⽤的这种）⼆.⽅法代码如下：wxml：<scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" scroll-with-animation="true" scroll-into-view="{{scrollTopTX}}" class = "ball" ><!---改 llp-----> <view class='{{dropDown?"list":""}}' ><view style='width:100%;height:100%' bindtouchmove='{{dropDown?"downTouchmove":""}}'><!-- 每⼀⾏ --><view class="row" wx:for="{{allContentList}}" wx:key="key" id="row{{index+1}}"><!-- ⽇期 --><view class="datetime" wx:if="{{item.create_time != ''}}">{{item.times}}</view><!-- 头像与内容⽂本 --><view class="body" style="flex-flow: {{item.myself == 0 ? 'row' : 'row-reverse'}}"><view class="avatar-container"><image class="avatar" v:if="" src="{{item.head_img_url}}" /></view><!-- 画三⾓箭头 --><view class="triangle" wx:if="{{item.msg_type != 'image'}}" style="{{item.myself == 1 ? 'right: 140rpx; background: #7ECB4B' : 'left: 140rpx;'}}"></view><view class="content" style="{{item.myself == 1 ? 'background: #7ECB4B' : ''}};{{item.msg_type == 'image' ? 'background: none' : ''}}"><image class="picture" wx:if="{{item.msg_type == 'image'}}" src="{{item.msg}}" mode="widthFix" bindtap="preview" data-src="{{item.msg}}" /><view wx:else="{{item.msg_type == 'text'}}">{{item.msg}}</view></view></view></view></view></view></scroll-view>wxss：@import "../../modules/chat-input/chat-input.wxss";/** 聊天窗⼝样式* 54px为回复框⾼度，js同*/page{height: 100%;}/*加载*/.list {overflow:auto;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;}/*聊天记录*/.ball{width : 100%;height: 92%;margin-bottom: 100rpx;white-space:nowrap;}/*单元⾏*/.row {display: flex;flex-direction: column;margin: 0 30rpx;}/*⽇期*/.datetime {font-size: 10px;padding: 10px 0;color: #999;text-align: center;}/*主体*/.body {justify-content: flex-start;width: 100%;margin-top: 10px;}/*头像容器*/.body.avatar-container {width: 20%;}/*头像*/.body .avatar {width: 80rpx;height: 80rpx;background:#fff;border-radius: 50%;margin: 0 20rpx;}/*⽂本消息*/.body .content {font-size: 30rpx;background: #fff;border-radius: 20rpx;padding:0 24rpx;line-height: 80rpx;margin-bottom: 10px;}/* 三⾓箭头 */.body .triangle {background: white;width: 20rpx;height: 20rpx;margin-top: 26rpx;transform: rotate(45deg);position: absolute;}/*图⽚消息*/.picture {width: 160px;}/*回复框*/.reply {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;position: fixed;bottom: 0;width: 100%;height: 54px;border-top: 1px solid rgb(215, 215, 215); background: rgb(245, 245, 245);}.reply .voice-image {width: 25px;height: 25px;margin-left: 3%;}/*⽂本输⼊或语⾳录⼊*/.reply .opration-area {flex: 1;padding: 8px;}/*回复⽂本框*/.reply input {background: rgb(252, 252, 252);height: 36px;border: 1px solid rgb(221, 221, 221);border-radius: 6px;padding-left: 3px;}/*选取图⽚*/.reply .choose-image {width: 25px;height: 25px;/*按住说话button*/.voice-button {height: 36px;color: #818181;font-size: 14px;line-height: 36px;}/*悬浮提⽰框*/.hud-container {position: fixed;width: 150px;height: 150px;left: 50%;top: 50%;margin-left: -75px;margin-top: -75px;}/*背景层*/.hud-background {position: absolute;width: 100%;height: 100%;background: #999;opacity: .8;z-index: 11;border-radius: 10px;}/*悬浮框主体*/.hud-body {position: relative;width: 100%;height: 100%;z-index: 19;display: flex;flex-direction: column;justify-content: space-between;align-items: center;}/*图标*/.hud-body image {margin-top: 20px;width: 80px;height: 80px;}/*⽂字*/.hud-body .tip {color: #fff;text-align: center;width: 90%;line-height: 34px;margin: 0 auto;margin-bottom: 10px;width: 90%;}.hud-body .warning {background: #cc3333;border-radius: 5px;}::-webkit-scrollbar{/*隐藏滚动条*/width: 0;height: 0;color: transparent;}js：// chat.js// var app = getApp();var user_id = user_idvar sender_id = sender_idvar socketOpen = false;var frameBuffer_Data, session, SocketTask;var url = 'ws://:8080';import Toast from "../../utils/toast";let chatInput = require('../../modules/chat-input/chat-input'); let utils = require('../../utils/util');/*** 聊天输⼊组件展⽰页⾯/*** 页⾯的初始数据*/data: {lastX: 0, //滑动开始x轴位置lastY: 0, //滑动开始y轴位置text: "没有滑动",currentGesture: 0, //标识⼿势textMessage: '',allContentList: [],chatItems: [],scroll_height: wx.getSystemInfoSync().windowHeight - 54, page_index: 0,mode: true,cancel: false,status: 0,toView: '',msg: '',receiver_ids: '',sender_ids: '',scrollTopTX: 'a4',//滚动位置dropDown:true,//切换滚动与刷新dropDown_id:false//只允许刷新⼀次},//滑动移动事件handletouchmove: function (event) {var currentX = event.touches[0].pageXvar currentY = event.touches[0].pageYvar tx = currentX - stXvar ty = currentY - stYvar text = ""//左右⽅向滑动if (Math.abs(tx) > Math.abs(ty)) {if (tx < 0)text = "向左滑动"else if (tx > 0)text = "向右滑动"}//上下⽅向滑动else {if (ty < 0)text = "向上滑动"else if (ty > 0)text = "向下滑动"}//将当前坐标进⾏保存以进⾏下⼀次计算stX = currentXstY = currentYthis.setData({text: text,});},//滑动开始事件handletouchtart: function (event) {stX = event.touches[0].pageXstY = event.touches[0].pageY},//滑动结束事件handletouchend: function (event) {this.data.currentGesture = 0;this.setData({text: "没有滑动",});},Refresh: function () {var arr = res.data;for (var i = 0; i < arr.length; i++) {console.log(arr[i].content)arr[i].content = i}this.Refresh()},/*** ⽣命周期函数--监听页⾯加载*/onLoad(options) {var that = this;var read_id = er_idvar read_id = er_id;if (er_id == undefined) {})return;}console.log(195, options)that.setData({// avatar:options.avatar_url,/*改 llp*/// sender_id: sender_id,user_id: wx.getStorageSync('user_id'),avatar_url: wx.getStorageSync('avatar'),receiver_ids: read_id.split(",")[0],sender_ids: read_id.split(",")[1]})wx.getStorage({///////////////////////////////////////取////////////////////////////////////// key: 'key01',success(res) {console.log(207, res)var arr = [];for (var i = 0; i < res.data.length; i++) {var myself = '';if (res.data[i].sender_id == er_id) {myself = 1;} else {myself = 0;}var itile = {myself: myself,head_img_url: that.data.avatar_url,msg: res.data[i].content,msg_type: 'text',myid: res.data[i].receiver_id,uid: res.data[i].sender_id,}arr.push(itile)}console.log('arr', arr)that.setData({allContentList: arr,dropDown: false,})setTimeout(function () {/*改 llp*/console.log('1111111111111111', arr.length)that.setData({scrollTopTX: 'row' + arr.length})}, 100)},})// wx.request({// url: 'https:///api/InstantMessaging/query_chat', // data:{// sender_id:sender_id,// receiver_id:user_id,// type:2// },// success: function (Tenarticle) {// console.log(Tenarticle,"Tenarticle")// wx.setStorage({// key: 'Tenarticle',// data: Tenarticle.data// })// }// })this.initData();// wx.getStorage({// key: 'Tenarticle',// success(Tenarticle) {// for(var t=0;t<Tenarticle.data.length;t++){// that.data.allContentList.unshift({// msg: Tenarticle.data[t].content,// uid: Tenarticle.data[t].sender_id,// myid: Tenarticle.data[t].receiver_id,// states: Tenarticle.data[t].states,// times:Tenarticle.data[t].times,// msg_type:"text",// head_img_url: that.data.avatar_url&&that.data.avatar,// myself:1&&0// })// }// }// })},var that = this;var that_data = that.datavar user_id = user_idSocketTask.onOpen(res => {socketOpen = true;console.log('监听 WebSocket 连接打开事件。
Taro开发微信⼩程序遇到的问题和解决⽅法1.scroll-view 置顶, 给设置scroll-top为0⽆效问题？解决⽅案: 不触发置顶问题，需要给scroll-top⼀个设置接近0的随机数，Math.random()2.scroll-view绑定bindscrolltolower没有触发问题？解决⽅案: 通过获取系统信息wx.getSystemInfoSync()拿到屏幕的⾼度，然后减去其他组件占位的⾼度, 得到scroll-view容器的⾼度, 最后给scroll-view的style设置容器的⾼度才能⽣效3.⽤wx.createSelectorQuery().select(id).fields({computedStyle: ['margin', 'backgroundColor', 'width', 'height']})，获取⾼度，如果设置了padding得到的值不准确问题?解决⽅案: 给容器添加box-sizing: border-box;4.注意在使⽤taro, 对webpack配置defineConstants全局变量，不能在代码中使⽤相同和全局变量相同的命令变量或者函数中的形成5.⼩程序中使⽤request，如果url直接带上中⽂，在部分⼿机会导致中⽂编号异常请求失败解决不要直接query拼接到url中，把query传递到request对应的data中，最好在header中添加'Content-Type': 'application/json;charset=utf-8'6.aro v1.3.0-beta.3开发微信插件，使⽤'@tarojs/async-await'导致regeneratorRuntime is not defined报错在载⼊@tarojs/async-await的地⽅添加⼀个声明const regeneratorRuntime = global.regeneratorRuntime;7.升级Taro为Taro v1.3.0-beta.3，开发微信插件，微信开发⼯具报VM2140:5 未找到⼊⼝ app.json ⽂件，或者⽂件读取失败，请检查后重新编译。
微信⼩程序开发打开另⼀个⼩程序的实现⽅法微信⼩程序打开另⼀个⼩程序，有两种⽅法：1.超链接；2.点击按钮。
全局配置：跳转到其他⼩程序，需要在当前⼩程序全局配置中配置需要跳转的⼩程序列表,代码如下：App.json{..."navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]}否则会弹出以下错误提⽰：超链接实现跳转到⼩程序：demo.wxml<navigatortarget="miniProgram"open-type="navigate"app-id="wxdbcxxxxxxxx985f"path="pages/index/index?goods_id=201"extra-data="{{extraData}}"version="develop"bindsuccess="toMiniProgramSuccess">点击超链接打开绑定的⼩程序</navigator>demo.jsdata:{ extraData: { from: '优享新可能nav' }}...toMiniProgramSuccess(res){//从其他⼩程序返回的时候触发wx.showToast({title: '通过超链接跳转其他⼩程序成功返回了'})}相关参数：属性名类型默认值说明target String self设置为miniProgram，则跳转都其他⼩程序app-id String要打开的⼩程序 appIdpath String打开的页⾯路径，如果为空则打开⾸页，可带参数extra-data Object需要传递给⽬标⼩程序的数据，⽬标⼩程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。
微信⼩程序页⾯返回传值的4种解决⽅案汇总⽬录使⽤场景解决⽅案1、使⽤globalData实现2、使⽤本地缓存Storage实现3、使⽤⼩程序的Page页⾯栈实现4、使⽤wx.navigateTo API的events实现总结使⽤场景⼩程序从A页⾯跳转到B页⾯，在B页⾯选择⼀个值后返回到A页⾯，在A页⾯使⽤在B页⾯选中的值。
例如：在购买订单页⾯跳转到地址列表，选择完地址以后回退到订单页⾯，订单页⾯的配送地址需要同步更新。
解决⽅案常见的⽐容要容易解决的⽅案是使⽤⼩程序的全局存储globalData、本地缓存、获取⼩程序的页⾯栈，调⽤上⼀个Page的setData⽅法、以及利⽤的events属性监听被打开页⾯发送到当前页⾯的数据。
下⾯给⼤家简单对⽐下四种⽅法的优缺点：1、使⽤globalData实现//page Aconst app = getApp() //获取App.js实例onShow() {//⽣命周期函数--监听页⾯显⽰if (app.globalData.backData) {this.setData({ //将B页⾯更新完的值渲染到页⾯上backData: app.globalData.backData},()=>{delete app.globalData.backData //删除数据避免onShow重复渲染})}}//page Bconst app = getApp() //获取App.js实例changeBackData(){app.globalData.backData = '我被修改了'wx.navigateBack()}2、使⽤本地缓存Storage实现//page AonShow: function () {let backData = wx.getStorageSync('backData')if(backData){this.setData({backData},()=>{wx.removeStorageSync('backData')})}},//page BchangeBackData(){wx.setStorageSync('backData', '我被修改了')wx.navigateBack()},3、使⽤⼩程序的Page页⾯栈实现使⼩程序的页⾯栈，⽐其他两种⽅式会更⽅便⼀点⽽且渲染的会更快⼀些，不需要等回退到A页⾯上再把数据渲染出来，在B 页⾯上的直接就会更新A页⾯上的值，回退到A页⾯的时候，值已经被更新了。
