1. 关于微信小程序js项目更新为ts项目
（1） 直接新增项目，创建一个ts版本的基础框架用于ts开发（新项目开发时用到）
（2）在miniprogram目录下创建miniprogram_npm文件夹
- （3） 根目录 package.json 修改"scripts" 如下
"scripts": {
"compile": "./node_modules/typescript/bin/tsc",
"tsc": "node./node_modules/typescript/lib/tsc.js"
}
- （4）根目录project.config.json修改"scripts"如下
"scripts": { "beforeCompile": "npm run tsc" }
-
（5）微信开发者工具右上角本地设置，选中"使用npm模块"、"启用自定义处理命令”（mac m1不好使，命令行 npm run tsc 执行）
使用npm模块（6）安装typescript， 执行npm install typescript --save-dev
（7）再执行npm install
（8）在微信开发者工具菜单“工具”点击“构建npm”
（9）mac（命令npm run tsc）之后编译； windows 直接点击编译就ok啦
2、wx:for循环嵌套循环 ，怎样防止内部循环的item与index被覆盖
{{ insideItem.name }}
3、小程序分包的问题
- 分包之后文件会自动创建
{
"pages":[
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
3、 图片加载闪屏问题
主要原因：运行内存不够，微信对小程序图片渲染过大进行拦截
优化办法：可以大图片按比例进行压缩，可以根据下面的文档选择适合自己的方法
https://help.aliyun.com/document_detail/44688.html
页面中使用的话，可以写一个管道，例如
- 如果是png图片，建议转成jpg图片，在缩放?x-oss-process=image/resize,p_70/format,jpg
/**
* oss 图片缩放
* @param value url图片
* @param resizeNum 缩放比例单位px
* @param type 类型 1-按宽高缩放（m_lfit） 2-按长边缩放(resize,l_100) 3-固定宽高(resize,h_100,w_100) 4-按比例缩放(p_30)
*/
imageZoom: function (value, hResizeNum, wResizeNum, type) {
if (value.indexOf('?x-oss-process=image') != -1) {
return value;
}
type = type || 1;
hNum = hResizeNum || 100; // 高
wNum = wResizeNum || 100; // 宽
// 等比缩放
switch (type) {
case 1:
value = value + '?x-oss-process=image/resize,h_' + hNum + ',m_lfit';
break;
case 2:
value = value + '?x-oss-process=image/resize,' + 'l_' + hNum;
break;
case 3:
value = value + '?x-oss-process=image/resize,' + 'm_fixed,h_' + hNum + ',w_' + wNum;
break;
case 4:
value = value + '?x-oss-process=image/resize,' + 'p_' + hNum;
break;
default:
value = value + '?x-oss-process=image/resize,h_' + hNum + ',m_lfit';
}
return value;
},
5、 苹果底部黑边兼容代码：页面iphone底部安全距离问题**
- 方法一、 可以根据机型判断是否是iphone，在页面中添加对应的安全距离的class
// 获取系统信息
wx.getSystemInfo({
success(res) {
console.log(res, '系统信息')
isIos: res.system.indexOf('iOS') > -1 ? true : false;
},
});
-
方法二、 ios新增特性： CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
safe-area-inset-left：安全区域距离左边边界距离；safe-area-inset-right：安全区域距离右边边界距离；safe-area-inset-top：安全区域距离顶部边界距离；safe-area-inset-bottom：安全区域距离底部边界距离(默认的是34px)
.ios-fixed {
padding-bottom: calc(constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/
padding-bottom: calc(env(safe-area-inset-bottom)); /*兼容 IOS>11.2*/
}
原文出处链接： https://blog.csdn.net/SuperJane_123/article/details/124493306
6、建议）小程序图片的大小81*81。40kb
7、 提示过长的问题wx. showToast
// wxml
8、 如何避免微信小程序中 app.js中 onshow事件的多次触发的问题
在开发过程中，会遇到app.json 中 onShow事件会因调用其它api而触发，例如:wx.chooseImage，wx. previewImage等
解决方法： 要根据不同场景调用不用业务逻辑。
onShow: function (option) {// option scene判断进入的场景， 根据不同场景业务逻辑处理 }
9、dialog. 滚动条问题
// wxss
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
10、1rpx的边线太粗的问题
.border::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 1rpx;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
border-bottom: 1px solid #F3F3F3;
}
11、swiper 滚动失效并且不断抖动问题
// wxml
{{item.oneCaseDescription}}
// ts
swiperChange2(e){
this.current2 = e.detail.current
}
原文章链接： https://blog.csdn.net/weixin_42317515/article/details/104887325
12、小程序scroll-view横向滚动失效，内容被压缩
用scroll-view做横向滚动时，给scroll-view设置了display：flex，子元素宽度固定，并且总长度超出scroll-view的宽度，但是发现滚动不了，并且子元素宽度被压缩了。
解决方法：
（1）给scroll-view设置white-space: nowrap;
（2）给子元素设置display: inline-block;
// wxml
// wxss
.scroll {
white-space: nowrap;
}
.item1 {
margin-right: 30upx;
width:350upx;
height:180upx;
display: inline-block;
background-color: #FAFAFA;
}