时隔这么久,又开始写总结了,主要是小程序真的好坑,o(╥﹏╥)o,以下是我踩到的坑总结,希望其他的开发者不要像我这么痛苦。有收获的话,记得给我点赞点赞点赞呀
一、小程序页面生成二维码
官方文档
需要的传参是 page
,scene
,重点来谈谈scene
通过该api
生成的二维码,扫该生成的二维码进入小程序之后,会进入到对应的page
界面【即传的参数page
】,而传的参数scene
对应的数据的获得:代码如下
//传参中的 page界面
const pages = getCurrentPages();
const {options} = pages.pop();
console.log(options.scene); //传参中的scene数据在此可以打印出来
需要注意的是:二维码图片所带的scene
数据与wx.getLaunchOptionsSync()
中的scene
没有任何关系
二、scroll-view在IOS13版本滚动失效
问题描述
这个问题真的让我很懵逼,只有ios 13的手机才能出现,具体表现形式如下:B界面使用了scroll-view
组件,当从A界面进入B界面,滚动正常,当从B界面回到A界面,或者去其它界面,之后再回到B界面,滚动失效,B界面它不会滚了。
解决方法
经过我各种研究,发现解决方法非常简单,只要一行,在scroll-view
设置一个wx:if
,如下图所示:
总结
小程序问题的万能解决法,当你确认自己代码没有问题的情况下,不知道问题为什么会发生,尤其是类似上述问题,一定要记住!记住!记住!进入该组件/界面的时候,尽量可以做到该组件可以重新渲染,一个wx:if
可以解决很多莫名其妙的问题。上述问题就是这个道理。
三、小程序中使用canvas
目前只遇到一个问题,就是在某些手机的机型中,文字的展示会出现异常,场景:在ios13
的版本下,canvas
生成的图片对应的文字大小变得极小
解决方法:把渲染字体改为normal
,其它字体都可能会出现错误展示情况:
ctx.font = `500 ${20 * RATE}px normal`;
四、关于组件web-view
业务场景:给出一个路由,仅用web-view
来展示h5
界面,该路由的参数为path
注意点: 参数
path
必须被编码过,如下:wx.navigateTo({ url:/xxx/xxx?path=${encodeURIComponent(src)}`, });
.wxml
:代码如下:
<view>
<web-view src="{{path}}" />
</view>
.js
:代码如下:
Page({
data: {
path: ''
},
onLoad(options) {
//页面创建时执行
console.log(options);
this.setData({
path: decodeURIComponent(options.path)//在此处解码
});
},
该业务场景下的界面分享
遇到的问题:分享该界面,再通过分享的入口进入小程序的该界面,web
链接所代表的h5
界面未展示
解决方法:
onShareAppMessage(param) {
// 页面被用户分享时执行
return {
imageUrl: 'xxxx',
title: 'xxx小程序',
path: `/xxx/xxx?path=${encodeURIComponent(param.webViewUrl)}`
}
},
五、小程序dialog样式踩坑
问题描述:
当设置 弹窗宽度 时,在其它机型弹窗都可以完美居中,只有iPhone5
,iphoneSE
的小屏手机,弹窗会出现偏移,如图所示:
代码如下:
//.wxml
<mp-dialog
ext-class="dialog-ext-class"
>
...
</mp-dialog>
//.wxss
.dialog-ext-class .weui-dialog {
width: 560rpx;
}
产生原因:
一把辛酸泪,经过寻找:发现在小程序中,iPhone5
,iphoneSE
的小屏手机自带的.weui-dialog
默认样式类不同,
iPhone5
,iphoneSE
的样式类:
其它正常居中的手机样式类:
解决方法
经过各种调试,既要兼容正常手机的居中,又要兼容小屏手机的居中,最简单的方法就是计算居中的位置左右偏移量。so easy,设计使用的屏幕宽度750
,弹窗宽度 560
,居中则可得左右偏移量为:(750 - 560)/2 = 95
自信一点,代码如下:
.dialog-ext-class .weui-dialog {
width: 560rpx;
right: 95rpx;
left: 95rpx;
}
注意:
right
和left
都要写,不然只有小屏手机可以居中,而正常手机会产生偏移
附:个人总结的小程序目录结构一份
├── assets
│ ├── images(公共图片)
│ | └── personal
│ | ├── avatar_none.png
│ | └── ...
│ └── styles (公用样式目录)
│ ├── color.css (颜色样式)
│ └── ...
|
├── behavior (自定义behavior)
│ ├── article(文件夹按照模块分)
│ | ├── article.js
│ | └── ...
│ └── ...
|
├── components (公共组件目录)
│ ├── shareInfo (分享组件)
│ | ├── shareInfo.js
│ | ├── shareInfo.json
│ | ├── shareInfo.wxml
│ | ├── shareInfo.wxss
│ | └── template.wxml(共享同文件夹下的wxss)
│ └── ...
|
├── pages(主包目录)
│ ├── index
│ | ├── index.js
│ | ├── index.json
│ | ├── index.wxml
│ | ├── index.wxss
│ | ├── template.wxml (index的模板文件,共享同文件夹下的wxss)
| | └── components(index组件目录,结构同公共组件目录)
│ └── ...
|
├── subpackages(分包目录)
│ │── packageA (结构同主包目录)
│ │── evaluationDetail (评测)
│ │── description (说明:维护页,隐私协议等)
| └── ...
|
├── templates (公用模板目录)
│ │── templateA
| | ├── templateA.wxml
│ | └── templateA.wxss
| └── ...
|
├── utils(公共模块,工具类)
│ ├── app.js(接口请求方法)
│ ├── constant.js(常量声明)
│ ├── http.js(接口请求配置)
│ ├── local.js(微信本地数据保存)
│ ├── navigation.js(微信跳转方法)
│ ├── util.js(公用方法)
│ └── valid.js(正则配置)
|
├── .gitignore
├── app.js
├── app.json
├── app.wxss (assets/style中的css需要引入到该文件)
├── project.config.json