这是我参与更文挑战的第15天,活动详情查看: 更文挑战 !
1. IOS上日期相关显示异常?👽
👻情景描述:IOS设备中日期显示异常。
👻解决方案:创建 Date 对象时没有使用new Date('2020-01-01')这样的写法,iOS 不支持以中划线分隔的日期格式,正确写法是new Date('2020/01/01')。
👻详细解释:stackoverflow.com/questions/1…
2. tab栏无法被覆盖?👽
👻情景描述:部分情景中tab栏无法被遮罩、动作面板覆盖。
👻解决方案:在唤起动作面板时将tab栏隐藏,关闭动作面板时再显示tab栏。
👻示例代码:
wx.hideTabBar();//隐藏
wx.showTabBar();//显示
3. 微信版echarts的使用方法?👽
👻情景描述:微信中使用echasrt。
👻示例代码:
// 1. 引入echarts包
// 前往 https://github.com/ecomfe/echarts-for-weixin 下载 ec-canvas 文件夹,复制进本地项目;
// 2. index.json中注册echarts组件
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
//3. 页面中引入组件(VUE语法,此处省略异步数据请求 )
<view class="score-card-content chart">
<ec-canvas
id="mychart-dom-pie"
canvasId="mychart-pie"
:ec="ec"
></ec-canvas>
</view>
import * as echarts from '../../../ec-canvas/echarts';
export default{
data(){
return {
ec: {
lazyLoad: true,
},
}
},
beforeUpdate() {
this.initChart();
},
methods:{
setOption(chart) {
const option = {
backgroundColor: 'transparent',
color: [
'#fd6a30',
'#facc14',
'#0083fd',
'#14ae1c',
'#a9a9a9',
'#32C5E9',
'#67E0E3',
'#91F2DE',
'#FFDB5C',
'#FF9F7F',
],
legend: {
show: true,
orient: 'vertical',
left: 'right',
top: 'middle',
itemWidth: 17,
itemHeight: 17,
textStyle: {
color: '#202020',
fontSize: 10,
},
borderRadius: 0,
},
series: [
{
label: {
normal: {
fontSize: 12,
formatter: '{d}% {c}',
color: '#202020',
},
},
labelLine: {
length: 6,
},
type: 'pie',
center: ['40%', '50%'],
radius: ['40%', '80%'],
left: 'left',
top: 'middle',
data: this.canvasData,
},
],
};
chart.setOption(option);
},
initChart() {
const { page } = getCurrentInstance();
let ecComponent = page.selectComponent('#mychart-dom-pie');
ecComponent.init((canvas, width, height, dpr) => {
// 获取组件的 canvas、width、height 后的回调函数
// 在这里初始化图表
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr, // new
});
this.setOption(chart);
// 将图表实例绑定到 this 上,可以在其他成员函数(如 dispose)中访问
this.echartInstance = chart;
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return chart;
});
},
}
}
4. webView页面与小程序页面之间通信?👽
👻 情景描述:weView页面与小程序页面互相交换。
👻 解决方案:1: 小程序→web:通过url拼接参数完成。2: web→小程序:利用JSSDK与小程序API配合完成。
👻 示例代码:
<!--小程序-->
<view class="main">
<web-view :src="`${DOMAIN}?id=${id}&userId=${userId}`" :bindmessage="acceptMsg"></web-view>
</view>
<!--webView-->
<!--引入SDK-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<!--通信-->
<script>
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
</script>
5. 父子组件会发生触摸穿透?👽
👻 情景描述:在子元素上进行触摸滑动操作时,父元素也会跟着滚动。
👻 解决方案:禁止子元素上的触摸事件冒泡。
👻 详细解释:微信小程序中的触摸事件是冒泡事件,会向父元素传递。当使用catch代替bind绑定事件时,会阻止原事件的冒泡行为。另外在vue语法框架下,也可使用.stop.prevent来解决。详见文档。
👻 示例代码:
<!--子元素-->
<view class="card" @touchmove.stop.prevent = "moveHandle">
<!--OR-->
<view class="card" catchtouchmove = "moveHandle">
<script>
···
methods:{
moveHandle(){
return;
}
}
···
</script>