微信小程序项目中的踩坑记录
1、写class中的三木运算符的时候不要进行换行，否则编辑器报错
2、在小程序中使用flex进行布局，在ios手机上，也就是ipone等机型，底部会有问题，我们需要加一个代码padding-bottom: env(safe-area-inset-bottom);（可以加到当前整个大的盒子中就可以）（可以百度这一句代码，详细的看看）将底部的安全距离进行流出来，还有有时候底部固定，中间进行overflow:auto；flex:1;的时候，底部的高度会没有了，这个时候第一种就是将高度加多一点，第二种就是外部不加高度，使用子元素的高度加margin或者是padding进行顶一下
-
不加底部安全距离的
image.png
-
加了底部安全距离的
image.png
3、自定义的底部弹窗，点击阴影和关闭按钮进行隐藏，但是点击其他的空白区域也会触发冒泡事件，直接给白色的部分，大的盒子加上catchtap，这个点击事件可以什么也不做，这样的话，再点击其他的空白区域就不会进行触发冒泡事件了
image.png
image.png
image.png
4、 当我们使用点击按钮或者是三个点进行分享，由于在生命周期中，没有成功，失败的回调函数，我们不知道用户有没有点击分享出去，点击分享，在进行取消，也是会被认为是分享成功的，可以使用wx.showShareMenu这个解决，不过这个目前是测试版本，只支持安卓手机，所以会有点问题
5、微信小程序中input框禁止输入表情符号
-
注：在小米手机的输入法上，表情会带一个空格，会有点问题
//禁止input框中输入表情符号
const emoji = function(data){//data就是input框中的value值
let reg = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi ;
if(data.match(reg)){
data = data.replace(reg,'');
}
return data;
}
6、websocket的注意事项（可以查看我的这篇文章）
7、在小程序中使用web-view的注意事项
- 首先需要创建一个页面进行使用web-view
<web-view src="https://www.baidu.com"></web-view>
- 还有登录微信公众平台，开发管理---->开发设置中将我们的业务域名进行配置，注意是https的别加错了
- 注意：如果你的h5页面更新的很频繁，那么你直接使用时间戳的形式（加载h5页面的时候会很慢），如果长时间才进行更新一次，可以直接将随机数进行写死就可以出来了
<web-view src="https://www.baidu.com/help.html?p=123'}}"></web-view>
<!-- <web-view src="https://www.baidu.com/help.html?p=timestamp'}}"></web-view> -->
- 每次更新h5后，因为有缓存的原因，我们要将随机数进行修改，这样的话，页面就会是你修改后的了
- 我之前看好像还需要下载证书啥的需要进行验证，这个的话，你可以百度下哈，这里直说修改h5后，页面没有进行更新怎么解决的
小程序跳转到其他的小程序，接收到的参数，一般会在app.js中的onLaunch和onShow中都可以接收到
- 在这里说得是要在onShow中进行接收，原因：在onlaunch中首次可以接收到，当用户点击A小程序跳转到B小程序，第一次参数是没有问题的，用户关闭B小程序，在次点击A小程序跳转到B小程序，（多次重复这个操作），就会导致我们参数接收的出现问题
小程序获取用户的运动步数的问题
-
使用wx.getSetting可以获取用户有没有进行授权，在使用wx.authorize进行获取的某一个权限进行弹框，提示用户进行授权，也可以使用需要授权的api，也会进行弹框提示的
-
注意：
-
1、这里当弹框授权后，需要用户进行授权，用户点了拒绝之后，不可以再次调用授权的api进行弹框提示用户授权（此时会直接默认是拒绝的状态），我们可以进行提示用户，并且使用wx.openSetting直接打开设置的页面，让用户进行手动的授权
-
2、获取微信运动步数的时候，使用api获取的是三十天内的，也可以获取到用户当天的步数，但是需要用户先点击进入微信运动，在点击进入小程序，这样我们拿到的数据就是最新的了，不然就需要等待微信的刷新机制进行刷新后，我们才能获取到用户最新的步数（这样的话，会有延迟，数据不是最新的问题，目前没有好的解决办法）
-
wx.getWeRunData({//获取微信用户运动步数的api
success:res=>{
console.log(res);
},
fail:msg=>{//用户拒绝后的处理
console.log('用户拒绝');
console.log(msg);
wx.showModal({
title:'需要授权才可以',
success:res=>{
if(res.confirm){
wx.openSetting({//直接打开到设置页面，让用户自己手动的进行授权
success (res) {
console.log(res.authSetting['scope.werun']);//返回true，说明用户授权了，返回false，说明用户没有或者是关闭了，需要进行提示
}
})
}
}
})
}
})
=================使用wx.getSetting获取用户是否授权===============
wx.getSetting({
success(res) {
console.log('---------sasa-----------');
console.log(res.authSetting['scope.werun']);
if (!res.authSetting['scope.werun']) {
wx.authorize({
scope: 'scope.werun',
success () {
console.log('111');
},
fail:_msg=>{
// console.log((_msg));
}
})
}
},
fail:msg=>{
console.log('错误');
console.log(msg);
},
complete:_s=>{
console.log(_s);
}
})
小程序中使用canvas，获取不到node，这个我们要将canvas写成是单标签就可以了(或者你直接将我的这段代码直接进行cv就可以了)
<view class="wrap">
<canvas type="2d" id="canvas" style="width: 100%; height: 100%;" />
</view>
onReady: function () {
// 使用 wx.createContext 获取绘图上下文 context
const query = wx.createSelectorQuery()
query.select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
console.log(res);
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.fillRect(0, 0, 100, 100)
})
},
微信小程序中使用uCharts
-
根据项目的需求，选用了uCharts中的刻度表的功能，uCharts是使用uniapp编写的插件，可以在全端使用，但是我当时看了好几遍的文档，还是没有看出来，在gitee上的项目实例中是可以显示的，但是我想要其他的功能，不知道怎么整，最后只能根据项目实例中的UNIAPP，直接复制进行简单的一些修改就行，他有个小程序扫码体验，里面的每个功能都会显示在那个页面下，根据这个进行查找就可以了，根据你的项目需求，或许还需要进行简单的修改下源码
image.png
-
第一种是uCharts中提供的，进行简单的修改了下源码
-
第二个是百度就有的，进行简单的修改了下
-
图片中的红色部分是项目中要有个图片，这里就简单的用了一个图片进行展示了
-
这个的源码的话，就放到我的gitee上的仓库了，有需要的小伙伴可以看看，这个是测试所以写的没怎么进行优化，可以凑活看哈https://gitee.com/fen-xin/progress-bar.git
微信小程序中生成小程序码，长按手机不展示识别二维码的情况
- 由于生成小程序码是通过后台请求微信返回的一个图片路径，然后使用canvas进行画上去的，并生成图片，此时长按点击没有显示识别二维码，解决：1、可能是生成的小程序码是个透明的，然后canvas中底部的背景不是白色的，所以导致的
在小程序中生成条形码
- 一定要使用wxapp-barcode这个插件，使用wxbarcode这个插件生成的条形码不会被识别，切记！！！
- 使用方法，首先下载安装(将文件提取放到小程序的文件夹中)
npm i wxapp-barcode
-
下载下来的文件中有demo，作者写的案例，不会的可以看看那个
image.png
使用scroll-view的上拉加载及页面本身的下拉刷新的问题
- 当我们下拉刷新时，清空当前数据，加载后重新赋值，为了让页面回到顶部，此时，你会发现接口被调用了两遍
- 触发下拉刷新的方法后，他加载的数据要是有10条，那么满足scroll-view的上拉加载的条件，此时，又会触发一次
-
解决方法： 我们可以不让当前的数据为空，加载后，让scroll-view的有个scroll-top为0 ，就可以滚动到顶部了
image.png
-
data 中进行声明
image.png
-
数据加载出来之后，进行重新赋值
image.png
