小程序实战工作的知识点总结

坐等夕阳落time

已于 2022-06-08 17:42:40 修改

阅读量1k

点赞数 1

分类专栏：小程序文章标签：微信小程序

于 2022-03-28 17:03:26 首次发布

本文链接：https://blog.csdn.net/weixin_43991241/article/details/123590619

版权

小程序专栏收录该内容

20 篇文章 2 订阅

订阅专栏

前言

有一些知识点在另一篇文章了，毕竟小程序也是前端的一种嘛，尽量标题描述清晰一点，你们看目录好找。

前端笔记 -- 不重复造轮子(遇到就更新内容）_坐等夕阳落time的博客-CSDN博客

1 跨页面传汉字，汉字乱码

在接收汉字的页面，使用 decodeURIComponent(传过来的乱码) ，汉字就恢复正常了

this.myname = decodeURIComponent(option.myname)

解决报错SyntaxError：Unexpected end of JSON input_辰九九的博客-CSDN博客

若对象的参数或数组的元素中遇到地址，地址中包括?、&这些特殊符号时，对象/数组先要通过JSON.stringify转化为字符串再通过encodeURIComponent编码，接收时，先通过decodeURIComponent解码再通过JSON.parse转换为JSON格式的对象/数组

wx.navigateTo({
      url: '/pages/user_info/user_info?title=邀请码&params=' + encodeURIComponent(JSON.stringify(params)),
})

onLoad: function (options) {
    if (options.title) {
      wx.setNavigationBarTitle({
        title: options.title,
      })
      this.setData({
        navigationBarTitle: options.title,
        params: JSON.parse(decodeURIComponent(options.params))
      })
    }
},

2 当前页面滚动到指定位置

目的：点击搜索，直接滚动到商品列表处

1 首先模拟器是苹果6

2 量各个模块的高度，如下

即要跳转的高度（PX） = 160 + 42 + 152 = 354

然后如果模块用了margin的，还要加上这个margin的高度，因为我margin用的rpx单位，所以这里我们口算，在苹果6机型下的 1rpx = 2px

margin = 60rpx = 在苹果6机型下是30px

即要跳转的高度（PX） = 160 + 42 + 152 = 354 + 30 = 384px

3 然后接下来，我们在代码里计算各个机型的rpx与px的换算比

原理：rpx（responsive pixel）是微信小程序解决自适应屏幕尺寸的尺寸单位，可以根据屏幕宽度进行自适应。微信小程序规定屏幕宽为750rpx。

所以 1rpx = 750rpx / 手机屏幕实际的高度（px)

let percentRatio =  750 / wx.getSystemInfoSync().windowWidth;

4 滚动到指定的高度

  onSearch(e) {
    let toJumpRPX = 384 * 2 // 我们手动量的高度 * 苹果6机型下的rpx与px换算比 = 要滚动的rpx数值
    let percentRatio =  750 / wx.getSystemInfoSync().windowWidth; // 各机型的rpx与px换算比
    let toJumpPX = toJumpRPX /percentRatio // 各机型中实际要跳转的高度，px为单位
    // 微信小程序的滚动api
    wx.pageScrollTo({
      scrollTop: toJumpPX
    })
  },

5 演示

6 其他参考

小程序技巧（跳转到指定节点，锚点效果，非scroll-view实现）_许洪昌的博客-CSDN博客_小程序锚点

微信小程序 - 实现页面跳转，跳转到指定锚点位置 - sanyekui - 博客园

3 小程序 input 组件内容显示不全（字显示的长度不占满 input 宽度）

在<input>标签外面加了一层<view>,通过改变父层<view>来改变<input>标签的宽度，input 自己给个width:100% ，即可

4 小程序给自定义组件传布尔值

不能直接写true、false, 它判断是有值就是true，所以你发现传false传不过去，原因就是你直接写false，要用两个花括号包起来

5 小程序不想写太多的 that = this

然后就可以很爽的每个地方都用that了，不用一直写 that = this 了

因为小程序页面有生命周期，所以需要在onShow那里再赋值一次

6 小程序的双向绑定，不用bindinput了

很简单：value的前面加 model:

加个空的bindinput方法是为小程序的调试器别显示警告

<input
    model:value="{{phone}}"
    placeholder="请输入手机号码"
    bindinput="handleInput"
></input>

handleInput(e) {},

7 小程序打电话

let phone = e.currentTarget.dataset.phone 
if (phone) {
    wx.makePhoneCall({
        phoneNumber: phone,
    })
} else {
    wx.showModal({
        title: '提示',
        content: '商家未提供电话',
        showCancel: false,
        confirmText: '我知道了'
    })
}

8 小程序复制文字

let weixin= e.currentTarget.dataset.weixin
if (weixin) {
    wx.setClipboardData({
        data: weixin,
        success: function (res) {
            wx.showModal({
                title: '提示',
                content: '复制成功，去添加商家为微信好友吧！',
                showCancel: false,
                confirmText: '我知道了'
            })
        }
    })
} else {
    wx.showModal({
        title: '提示',
        content: '商家未提供微信!',
        showCancel: false,
        confirmText: '我知道了'
    })
}

9 小程序加载图片，点击查看大图，加载错误显示占位图

<image src="{{item.imagePath ? item.imagePath:'/images/ic-err-img.png'}}" mode="aspectFit" data-src="{{item.imagePath ? item.imagePath:'/images/ic-err-img.png'}}" catchtap="previewImage" binderror="onImageError" data-index="{{index}}" />

// 预览图片(点击查看大图，不能看本地图片大图，图片需要放在服务器
previewImage: function (e) {
    var current = e.target.dataset.src;
    console.log(current)
    let list = []
    list.push(current)
    wx.previewImage({
      current: current, // 当前显示图片的http链接  
      urls: list // 需要预览的图片http链接列表  
    })
},

// 图片加载失败时
onImageError(e) {
    console.log(e)
    let index = ""
    if (e.target.dataset.index > -1) {
      index = e.target.dataset.index
      this.data.goodslist[index].imagePath = ""
      this.setData({
        goodslist: this.data.goodslist
      })
    }
},

tips: image的样式设置时，不管你给什么样的mode，都必须在css里把它的宽高都写上，这样刚加载的时候，就不会产生很明显的，图片闪一下（变形）才正确显示的效果。

10 微信小程序图片加载慢的解决

前人的经验，还是可以参考一下

实战解决小程序图片加载问题_夏尔の小酒馆的博客-CSDN博客_小程序图片加载慢怎么解决

微信小程序图片处理方案，解决加载缓慢， - hhhhhhhhyyyyyyyy - 博客园

11 小程序在线聊天

此功能主要是为了没时间开发聊天系统的准备的，如果自己开发的话用node.js来搭聊天系统后台哈。

这里使用的是腾讯的IM聊天，这个是要收费的，语音和视频通话有问题，其他的聊天功能就正常。

即时通信 IM 步骤1：导入 TUIKit - 含 UI 快速集成方案（荐） - 文档中心 - 腾讯云

12 生成海报

不使用组件：（我没弄过，就看着下面的文档感觉简洁明了，虽然代码残缺了点，但是有经验的自己参考一下，然后琢磨琢磨也是可以搞的）

生成分享海报（canvas2d） | 微信开放社区

使用第三方组件：

之前有做过，通过json配置海报的，具体什么名字我忘记了。。。有空的时候再找一下之前的代码

13 小程序页面传对象类型的参数

用 JSON.stringify(object) , 把 js的对象转成 JSON字符串

wx.navigateTo({
      url: '/pages/shop_goods_list/shop_goods_list?currentProduct=' + JSON.stringify(currentProduct),
    })

然后用JSON.parse(objectjson) 把 JSON字符串转成 js的对象

onLoad: function (options) {
    let currentProduct = ""
    if (options.currentProduct) {
      currentProduct = JSON.parse(options.currentProduct)
    }
}

14 小程序内凹圆弧背景

现在手机端ui界面是超级喜欢搞圆角的，而且正常的圆角不满足了，喜欢搞内凹的圆角了，如图

实现方式：

1 让ui给你切图

2 用css实现

我们要先分析一下构成，就长得是不是一个矩形，然后加上圆形的部分边，现在我们就是css来实现圆形的部分边。

首先要会css画半圆，下面这个博客css 画圆形教得挺好了，我就说思路

【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框_励志故事的博客-CSDN博客_css 半圆

首先我们要实现的是圆形的部分边，我们可以画出一个半径很大的半圆，然后只取到这个半圆的中间部分，然后再让这个半圆往上移动位置。重点就是调height的大小，和border-radius的大小，就可以实现控制这个圆弧的斜率，即凹的深度。

.v-swiper::after {
  content: '';
  width: 100%;
  height: 200rpx;
  position: absolute;
  z-index: -10;
  top: -70rpx;
  border-radius: 0 0 40% 40%;
  background: #FE3F68;
}

总结就是 border-radius 属性，只写右边两个值，就是下面两个角的弧度

.bg {
    background-color: #FE4858;
	height: 140rpx;
	width: 100%;
	border-radius: 0rpx 0rpx 50% 50%;
	text-align: center;
}

不过一般来讲，手机端的弧度都差不多是高度200rpx,边框圆角40%或50%的，但是有的需要很高的高度，如图（弧形还进行了优化，和上面截图对比）

我们可以拆分成两部分：

加入你需要的高度500rpx，那就300rpx直角边框，200rpx弧角边框，代码如下

.top {
		width: 100%;
		color: #333333;
		background-color: #F9484B;
		text-align: center;
		height: 300rpx;
	}
	
.arc-bg {
	background-color: #F9484B;
	height: 200rpx;
	width: 100%;
	border-radius: 0rpx 0rpx 50% 50%;
	transform: scale(1.1,1.1); // 放大以后弧形更自然
}

<view class="top">
</view>
<view class="arc-bg">
</view>

下面的输入内容往上走

.content {
	position: relative; //和自己原先的位置相比
	top: -100rpx; // 往上移动了100rpx
	margin-top: 10rpx;
	background: white;
	margin: 0rpx 32rpx;
	padding: 80rpx 70rpx;
	border-radius: 20rpx;
}

15 小程序在onshow获取页面传递参数

用到这个是因为，发现uniapp的分享页，进来的时候没有先执行onload,而是onshow完再去onload，所以顺序倒了，查询就缺失参数了，所以就在onshow时获取页面的传参（这个参就是onload那里的参数）

let pages= getCurrentPages();//获取应用页面栈
let options = pages[pages.length - 1].options//获取页面传递的信息
this.spuId = options.spuId || ''

16 列表根据对象指定的字段去重

（uniapp的写法，但是去重方法原生微信小程序也能用，因为都是js)

js 里对象可以根据字段名取值，这样灵活性很高，函数传参也可以不用传索引号而是直接传字段名，就可以直接修改对象的字段值了。

this.object['key'] = value

removeDuplication(items, validKey = validKey) {
				items.reverse() // 倒序，保留最新的数据
				const ids = []
				const list = []
				for (var i = 0; i < items.length; i++) {
					if (ids.indexOf(items[i][validKey]) === -1) {
						list.push(items[i])
						ids.push(items[i][validKey])
					}
				}
				list.reverse()
				return list
			},
// 去重
this.selectedPlatformAttrValueList = this.removeDuplication(this.selectedPlatformAttrValueList, 'attrId')

17 找出一个列表中含有其他列表值的元素

原理：JavaScript Array indexOf() 方法，返回数组中某个指定的元素位置，如果在数组中没找到指定元素则返回 -1。

let list1 = list.map(item => item.attrId)
// 找处列表2中的含有列表1中的元素的元素
let list2 = this.selectedPlatformAttrValueList.filter(item1 => list1.indexOf(item1.attrId) > -1)

18 小程序、网页设置了全屏背景色，往下滑背景色就没了，变成白色

小程序、网页设置了全屏背景色，往下滑背景色就没了，变成白色_坐等夕阳落time的博客-CSDN博客

19 uniapp u-View 的输入框，怎么做输入限制，输入两位小数，然后设置输入最小值和输入最大值、整数、不给输符号等

uniapp u-View 的输入框，怎么做输入限制，输入两位小数，然后设置输入最小值和输入最大值、整数、不给输符号等_坐等夕阳落time的博客-CSDN博客

20 输入的数值转小数

// 数值精度
newVal = this.toPrecision(Number(value), 2)

toPrecision(num, precision) {
	if (precision === undefined) precision = 2;
    return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)).toFixed(2);
}

21 uniapp 值修改了，页面却没有更新，使用异步更新

uniapp App端解决input@input事件动态修改值不生效的问题_半吊子月淼的博客-CSDN博客

22 uniapp 原生组件事件保留自己的回调，又能够支持自己传其他参数

【uni-app】input组件 @input事件(实时监听输入)传参问题_cdgogo的博客-CSDN博客_uniapp监听键盘输入

23 查看类型

Object.getPrototypeOf(dataForm.skuList[0].priceFee)

24 字符串转列表，列表转字符串

// 字符串转列表
this.imgFileList = res.data.imgUrls.split(",")
// 列表转字符串
this.dataForm.imgUrls = this.imagePathList.join(",")

25 获取当前页面，判断当前页面是什么页面

微信小程序，获取当前页面，判断当前页面是不是tabbar页面_坐等夕阳落time的博客-CSDN博客原理：用getCurrentPages()方法，获取用户访问的所有页面，最后的那个页面就是当前页然后有route属性，就知道当前页面的路径了，再和tabbar页面的路径对比就好了let pages = getCurrentPages()console.log(pages)if(pages.length > 0) {let prevPage = pages[pages.length - 1]if (prevPage.route === 'pages/index/index' .https://blog.csdn.net/weixin_43991241/article/details/124968266?spm=1001.2014.3001.5501