如何在page页面,组件以及封装的js复用工具类文件获取app globalData中存储的全局变量以及方法？
-
page： this.$parent.globalData.applyId -
组件：this.parent.globalData.applyId -
js工具类文件·：wepy.$instance.globalData.tokenId -
page使用app中全局的方法：this.$parent.methodName();
关于微信小程序项目路由
wx.navigateTo跳转只记录10层的限制，如何更好处理，避免页面卡死？
首先区分微信小程序路由3种常用跳转区别：
wx.navigateTo：微信小程序会自动在nav导航上增加左返回按钮；重要的是，它会保留当前页面，跳转应用中的其他页面**，需要注意：小程序只会帮我们记住10层页面栈！！！超过10层navigateTo跳转便失效！wx.reLaunch：关闭之前打开的所有页面，然后打开到应用内的某个页面。这个功能可以很好解决navigateTo10层限制问题。wx.navigateTo：关闭当前页面，跳转到应用内的某个页面。
因此：重要的事情说三遍：在合理的前提下，请尽可能的用wx.redirectTo以及wx.reLaunch代替wx.navigateTo! ...
小程序中原生组件层级最高，页面中的其他元素无论设置多少
z-index都无法覆盖在原生组件子上，怎么破？
首先：常见的原生组件有：input(仅在focus时为原生组件)、textarea、map、video、canvas、camera。
解决办法：
官方提供的解决办法：
cover-view覆盖原生组件的文本视图和cover-image覆盖原生组件的图片视图，都可以覆盖在原生组件之上。另外需要注意：由于
cover-view和cover-image也是原生组件，需要保证他们插入页面的时机晚于要覆盖的原生组件。否则原生组件还是会覆盖cover-view若原生组件和自定义元素可以不用同时出现，可以先根据条件干掉原生组件。eg：
textarea原生组件的placeholder层级太高，打开的弹窗无法盖住其内容,便可以在打开弹窗的时候，干掉textarea，防止textarea层级穿透。
封装的组件中使用了
Vant提供的某些组件，但是当在页面中引入组件后，无法正常显示组件中的某些元素？
解决办法：
请切记 ! 将父组件使用到的Vant组件，例如：van-popup、van-picker等... 乖巧的引入子组件！！！
// 父组件
...
...
...
// 子组件
页面page1中引入了组件component1，在页面打开时发现component1
onload先于page1onload执行，导致组件无法获取数据源，怎么办？
解决办法：
在组件中使用watch监听页面变化，重新渲染！
watch = {
// 监听页面中什么时候传入了applyId 参数，再调用接口获取人员数据。
applyId(val) {
this.getApplyer(val);
}
}
使用
wx.navigateTo跳转后，返回上一个页面，页面不再进入onLoad生命周期，不会再刷新数据，怎么破？
解决办法：
由于返回上一页，微信小程序只是将隐藏的上一页再次显示出来而已，并不是将上一页重头开始重新渲染，所以可以在onShow生命周期中将需要重新渲染的数据再次执行。注意：防止onLoad和onShow重复加载数据，可以只将需要重新渲染的接口放入onShow生命周期中即可。
使用WePy作为替代原生开发小程序，出现数据源已变化，但是视图无响应，怎么解决？
解决办法：
WePy虽然对原生的setData进行了优化，可以直接使用this.title='name'的形式做数据赋值更新，但是切记：在数据源做了复杂循环变化后...各种数据与视图不同步的情况，请第一时间先手动使用this.$apply()触发脏数据检查，强制更新！基本上就解决了大部分情况！
如何实现微信小程序
input的双向绑定那？
解决办法：
input绑定bindinput事件监听输入的值，并且用value值去指定input显示的值。
bindInput(e) {
this.identifier = e.detail.value;
},
小程序常用的基础语法易错点：
-
wx:for循环遍历 ：双层for循环可能导致，无法区分获取每一层循环的item,可以使用wx:for-item="ele"的形式重置item。
注意写法：wx:for-item：指定数组当前元素的变量名 、wx:for-index：可以指定数组当前循环下标索引的变量名
{{cases.status}}
- 踩坑记录：
wx:if与wx:for不可在一个元素中同时使用，否则微信不知道是先执行for还是if！会出现渲染逻辑错误！
关于本地缓存的同步设置与获取方式总结
- 同步设置缓存
// 关于value值：只支持原生类型、Date、及能够通过JSON.stringify序列化的对象
wx.setStorageSync('VERSION', this.globalData.version);
- 同步获取缓存
wx.getStorageSync('VERSION');
我想动态修改小程序的页面标题？
wx.setNavigationBarTitle({
title: that.title
})
关于使用
wx.chooseImage选择图片后，如何正确上传图片，并且正确显示那？
在使用
wx.chooseImage选择相册图片后，要想显示选择的图片，只能使用view + background-image，否则图片在开发工具可以正常显示，在真机无法正常显示！wx.chooseImage选择图片后，api返回的只是选定照片的本地图片文件路径列表，虽然可以直接用wx.uploadFile，将图片上传自己的服务器后台。wx.uploadFile的filePath参数：暂存图片路径 /url参数：自己服务器后端的请求地址 /返回值是请求自己后台请求地址后的返回结果
// 1、选择图片
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 指定是原图还是压缩图
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
success(res) {
// 2、上传图片
wx.showLoading({ title: '上传中,请稍后...' });
wx.uploadFile({
url: `${_that.$parent.globalData.restServiceUrl_csrf}/upload`, // 自己后台的请求地址
filePath: res.tempFilePaths[0], // 本地暂存图片路径
name: 'file',
method: 'POST',
header: {
'content-type': 'multipart/form-data'
},
success (res) {
console.log(res);
...
}
})
}
})
关于小程序图片展示有哪几种方式？
- 直接使用
- 使用样式
background-img,只能使用在线图片链接，base64，不能使用本地图片链接地址
小程序消息推送如何实现？
需求：在用户未处于小程序界面时，可以通过微信自身的服务消息通知，在小程序外，及时下发通知，提醒用户相关订单最新状态。更多详情参考链接
// 传递formId给后台
formSubmit(formId, applyId) {
const param = {
formId: formId,
applyId: applyId,
cancleDate: parseInt(new Date().getTime(), 10) + 604800000, // 计算7天后的过期时间时间戳
}
wxRequest.request(`${this.globalData.restServiceUrl_csrf}/case/saveFormId`, {method: 'POST', data: param})
.then(res => {
console.log(res);
})
}
// 重置form表单内部button样式
.form-btn {
border:none;
text-align:left;
padding:0;
margin:0;
line-height:1.5;
}
注意事项：
- 为了可以给后台提供消息推送所需要的
formId，前端应该尽可能多的在项目高频点击处，收集推送码formId。 -
form中report-submit为true，代表需要请求发模板消息的推送码，此时点击按钮提交表单便可以获取formId，用于发送模板消息。