微信小程序踩坑（与支付宝小程序的异）

最新推荐文章于 2023-03-07 16:08:46 发布

Y_G_G

最新推荐文章于 2023-03-07 16:08:46 发布

阅读量771

点赞数

分类专栏：小程序文章标签：微信post报错 wxs 微信图片放大

本文链接：https://blog.csdn.net/Y_G_G/article/details/99682730

版权

小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文总结了在开发微信小程序时遇到的问题，包括API的命名差异，如wx代替my，wx.showToast的使用，POST请求的header设置，wxs模块的使用，text组件的限制，图片显示和数据绑定问题，调试模式与实际运行接口的差异，以及富文本和缓存管理的挑战。开发者在迁移项目时需要注意这些细节。

摘要由CSDN通过智能技术生成

前段时间刚写了一个支付宝小程序，然后又说再写一遍微信emmm，心中os：玛德不早说，又得再来一遍。然后用微信小程序重写了一遍。中间稍微走了点弯路，但二者基本一致。可能先入为主了，我更喜欢支付宝小程序的文档，简单明了。微信小程序的文档，看一眼一箩筐话… 可能我脑子有问题吧，有时候某些api都翻不到，也不知道给放哪了

下面是我踩得坑，原生input textarea就不说了，谁让人家是原生的…

微信小程序的方法以【wx.】开头，支付宝小程序用【my.】开头

wx.alert不存在，my.alert 存在，微信可用wx.showToast替换
wx.showToast 的参数【icon】仅支持succes/loading，默认是success，可设置none
微信 POST请求需要改header 详见
涉及到复杂计算须放在 wxs 里面详见
微信小程序 text 组件内只支持 text 嵌套
在支付宝里我用text套image，微信里图片没出来

微信里有e.target.dataset 和e.currentTarget.dataset

e.currentTarget 指向注册了监听点击事件的容器。也就是bindtap写在哪个容器上面，就指向谁

e.target 指向实际触发了点击事件的容器。

实际触发的组件 可能并没有绑定对应的数据，会造成取不到值。

微信 data-** 的数据绑定问题

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType
data-user-name   ---------->    event.currentTarget.dataset.userName


data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 
data-userName   --------->     event.currentTarget.dataset.username

打开小程序图片被放大

// 给图片固定的宽高就可以解决

<block wx:for="{{categoryList}}" wx:key="{{item.id}}">
  <view class="categoryItem">
    <view class="categoryFlex" data-id="{{item.id}}" data-text="{{item.title}}" bindtap="jumpToSearch">
      <image class="image" mode="widthFix" src="/resources/images/{{item.type}}.png" style="height: auto; width: 81rpx;" />
      <text class="text">{{item.title}}</text>
    </view>
  </view>
</block>

调试模式接口畅通，关闭调试，调不到接口

检查是否配置了服务器啊！！！
开发-开发设置-服务器域名

在这里插入图片描述

富文本图片问题

//富文本的图片里面可能
<div class="media-wrap image-wrap"><img src="data:image/png"  width="360px" style="width:360px ..."/></div>

可能存在不平铺或者图片太大被截断等情况。一般要求就是全屏展示

// 将内敛样式等全部清空 然后设置100%
 content = content.replace(/style="[^"]+"/gi, '');
 content = content.replace(/width="[^"]+"/gi, '');
 content = content.replace(/<img/g, '<img style="width:100%;height:auto;display:block" ');

缓存问题
页面跳转过程中为了方便携带数据，会用到缓存。这些数据不需要的时候要记得清空，举个栗子 **onHide onUnload 时removeStorage ** 。

我遇到过 明明已经删除了小程序，但是缓存依然存在。打开真机调试，秃噜噜出现一堆缓存。

那是因为，同一个小程序的开发版、体验版、线上版的缓存是共用的，需要同时删除这三个版本的小程序，缓存才会被删除。

看不请出 缓存多可怕！

小程序更新
这里以支付宝为例

// app.js
onShow(options) {
    // 小程序显示
    this.checkUpdateVersion()
},
checkUpdateVersion() {
    const updateManager = my.getUpdateManager()
    updateManager.onCheckForUpdate(function(res) {
      // 请求完新版本信息的回调
      console.log(res.hasUpdate)
    })
    updateManager.onUpdateReady(function() {
      removeAllStorage();
      updateManager.applyUpdate();
    });
    updateManager.onUpdateFailed(function() {
      my.alert({
        title: '更新版本失败，请检查网络连接'
      });
    })
}