正文

微信小程序的那些坑(代码片段)

sroot  sroot  2022-12-16  274

关键词：

早闻微信小程序是个坑，结果名不虚传，细数一下我开发小程序遇过到坑。

1.UI组件过度封装。

微信小程序的组件是模仿react.js或vue.js的web组件设计的，并且封装了weui.css样式。

PS：实现自定义多选或多选。（看微信小程序开发社区的问题，没有很完整的解决方案，于是自己摸索了一个方法）

wxml

<checkbox-group class="checkbox-group">
      <label class="checkbox-label">
          <checkbox value="A"></checkbox>
          <view class=‘checkbox-text‘>A</view>
      </label>
      <label class="checkbox-label">
          <checkbox value="B"></checkbox>
          <view class=‘checkbox-text‘>B</view>
      </label>
      <label class="checkbox-label">
         <checkbox value="C"></checkbox>
         <view class=‘checkbox-text‘>C</view>
      </label>
</checkbox-group>

wxss

.checkbox-group 
  display: flex;
  flex-wrap: wrap;


.checkbox-label 
  width: 33.2%;


.checkbox-text 
  background: #fff;
  position: relative;
  text-align: center;
  border: 1px solid #000;
  margin-right: -1px;
  margin-bottom: -1px;


checkbox 
  display: none;

checkbox[checked] + .checkbox-text 
  color: #fff;
  background: red;
  border: 1px solid #000;

效果

技术图片

2.语法糖是各种前端框架的大杂烩。

魔改html标签

<text class="user-name">Sroot</text>

类vuejs数据绑定

wxml

<view>  message  </view>

wxs

this.setData( message : "Hello World" )

类vuejs生命周期

小程序有app、page、组件生命周期

wxs

//app
App(
  onLaunch(options) 
    // 生命周期回调——监听小程序初始化。
  ,
  onShow(options) 
    // 生命周期回调——监听小程序启动或切前台。
  ,
  onHide() 
    // 生命周期回调——监听小程序切后台。
  
)

//page
Page(
  onLoad: function(options) 
    // 生命周期回调—监听页面加载。
  ,
  onShow: function() 
    // 生命周期回调—监听页面显示。
  ,
  onReady: function() 
    // 生命周期回调—监听页面初次渲染完成。
  ,
  onHide: function() 
    // 生命周期回调—监听页面隐藏。
  ,
  onUnload: function() 
    // 生命周期回调—监听页面卸载。
  
)

//Component 新版写法
Component(
  lifetimes: 
    created: function() 
      //在组件实例刚刚被创建时执行。
    ,
    attached: function() 
      //在组件实例进入页面节点树时执行。
    ,
    ready: function() 
      //在组件在视图层布局完成后执行。
    ,
    moved: function() 
      //在组件实例被移动到节点树另一个位置时执行。
    ,
    detached: function() 
      //在组件实例被从页面节点树移除时执行。
    
  
)

类reactjs与vuejs组件

wxml组件

<template name="XXX">
  <view>
    <text> name: name </text>
  </view>
</template>

wxml

<template is="XXX" data="name"/>

wxs

Page(
  data: 
    name: "Sroot"
  
)

3.不支持Cookie本地缓存。

只能用Storage，不能用Cookie存储数据。（cookie最大优势就是可以设置是否可修改与设置过期时间）

PS：如果是独立账号登陆的微信小程序，只能采用微信小程序API提供的localstorage存储登陆数据。

4.调试页面比较麻烦。

不同于微信公众号页面，不能直接从地址栏访问某个页面，只能编译第一个页面。

解决方法：（1）在微信开发者工具设置“添加编译模式”。

技术图片

（2）填写相应参数。

技术图片

（3）选择对应编译模式，就可以直接运行某个页面调试。

技术图片

PS：也可以通过project.config.json文件设置页面。


  ...
    "condition": 
        ...
        "miniprogram": 
            "current": -1,
            "list": [
                
                    "id": -1,
                    "name": "hello",
                    "pathName": "pages/index/index",
                    "query": "",
                    "scene": null
                ,
                
                    "id": -1,
                    "name": "detail",
                    "pathName": "pages/detail/index",
                    "query": "",
                    "scene": null
                
            ]

5.微信小程序发布需要审核。

小程序应用发布与移动应用商店发布流程相似，需要审核才能发布。

PS：如果是以独立账号登陆（不是微信授权登陆）使用的微信小程序，需要提交审核两次，第二次提交审核才会出现填写提供测试账号。（什么鬼逻辑，第一次不能直接提供吗）

微信小程序开发坑归坑，但在某些方面要比微信公众号开发更方便，用户体验更好。

1.微信开发者工具自带代码编辑器。

PS：代码编辑器提供代码格式化，API语法提示，资源路径提示，命令面板等功能，没必要使用其他编辑器编写。（仅限微信小程序）

吐槽一下，简直就是微信小程序版vscode。

2.不必要做过多的兼容处理。

PS：微信本身就强制升级版本，基本上无需做低版本兼容处理。

3.不必要使用第三方的类库。

PS：微信小程序本身就封装了一些常用的方法与UI组件（ajax请求，单向数据绑定，swiper组件，tabbar组件）。

4.可定制顶部导航栏。

页面配置文件。


  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "xx商城",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"

PS：微信公众号页面禁止下拉的问题比较麻烦，不容易控制，但微信小程序可以控制页面是否可下拉。

5.能够调用更多的设备功能。

增加震动，剪贴板，NFC等设备功能。

PS：微信小程序调用设备接口比微信公众号更快一些。

6.提供接入客服功能。

方便客户与客服之间沟通。

PS：不用额外建群或加好友进行技术支持。

总之，学会了微信小程程序开发，其他平台的小程序都会开发。（微信小程序居然是小程序行业的领头者，其他平台的小程序开发语法基本大同小异，没什么区别。）

微信小程序wx.uploadfile上传文件的两个坑(代码片段)

fileUpload:function(tempFilePath)varthat=this;//坑1：this需要这么处理wx.uploadFile(url:url地址，//app.ai_api.File.filefilePath:tempFilePath,//文件路径这里是mp3文件name:‘file‘,//随意header:‘Content-Type‘:‘multipart/form- 查看详情

微信小程序swiper组件坑(代码片段)

swiper组件高度被限制为150px了，所以内容无法撑开。解决办法给这组件重新设置个高度，然后在把里面的图片设置为自动适应容器大小。图片模式设置为宽度不变自动适应高度<swiperclass="test".....><swiper-item><imagemode=... 查看详情

微信小程序-云支付那些事儿(代码片段)

...码目录结构四、为什么这样写五、结语一、前言稍微玩过微信小程序云开发的同学都基本知道微信小程序云开发目前已经支持云支付这一能力。那么在云查看详情

微信小程序控制硬件17分享腾讯物联平台腾讯连连小程序蓝牙设备h5自定义面板开发的那些坑，支持控制安信可tb/pb蓝牙模组esp32/c3/s3模组，让你少走弯路。（附带源码）(代码片段)

...步骤3.1准备工作3.2启动3.3启动Demo项目的实时编译3.4配置微信开发者工具3.5：微信开发者工具打开H5面板四、蓝牙设备H5开发页面介绍1.设备搜索页2.设备面板页开发流程1.搜索页2.面板页五、FAQ常见问题六、开源微信物联网控制... 查看详情

微信小程序控制硬件17分享腾讯物联平台腾讯连连小程序蓝牙设备h5自定义面板开发的那些坑，支持控制安信可tb/pb蓝牙模组esp32/c3/s3模组，让你少走弯路。（附带源码）(代码片段)

微信小程序的坑(持续更新中)(代码片段)

参与微信小程序开发有一段时间了，先后完成信息查询类和交易类的两个不同性质的小程序产品的开发；期间遇到各种各样的小程序开发的坑，有的是小程序基础功能不断改进完善而需要业务持续的适配，有的是小程序使用上的... 查看详情

微信小程序内部那些事(代码片段)

微信小程序没有window、document，它更像是一个类似Node.js的宿主环境。因此在小程序内部不能使用document.querySelector这样的选择器，也不支持XMLHttpRequest、location、localStorage等浏览器API，只能使用小程序自己提供的API；小程序不是直... 查看详情

微信小程序内部那些事(代码片段)

微信小程序没有window、document，它更像是一个类似Node.js的宿主环境。因此在小程序内部不能使用document.querySelector这样的选择器，也不支持XMLHttpRequest、location、localStorage等浏览器API，只能使用小程序自己提供的API；... 查看详情

微信小程序支付开发之申请退款(代码片段)

微信小程序支付跟微信公众号支付类似，这里不另做记录，如果没有开发过支付，可以查看我关于微信支付的文章重点记录微信小程序申请退款开发过程中遇到一些坑。退款接口比支付接口接口多了一个双向证书证书介绍：... 查看详情

记录一次微信小程序getuserprofile的踩坑经历(代码片段)

一、新注册的微信用户怎么昵称都变成了微信用户了？最近我们公司的运营小姐姐反馈说小程序新注册的用户的昵称都是微信用户，而且头像也都是一张灰色的头像。以前能拿到的省市区也都没了。并且质问我们是不是... 查看详情

你踩的坑这里都有微信小程序分包指南(代码片段)

...刚开始，恭喜你选择了一条最简单的路，如下为微信官方示例，将项目目录安排如下，并在app.jsonsubpackages字段中做对应声明即可。其中pages数组中的页面为主包中的页面，subpackages中的每一项对应一个分包。├... 查看详情

仿得物微信小程序实战全教程(代码片段)

前言最近正在学习微信小程序开发，也是与两个同学一起合作着手仿做得物APP微信小程序。这里主要分享一下我的学习过程及踩过的一些坑，希望对您有所帮助。006.gif开发准备微信开发者工具VScode代码编辑器得物APP微信... 查看详情

微信小程序实时定位的要做的那些事，你学废了吗？(代码片段)

...言📝支持一下博主哦🤞🔥系列文章：1、微信小程序实时定位的要做的那些事，你学废了吗？2、微信小程序也可以实现定位打卡/签到打卡了开发框架：uniapp本片文章主要实现了微信小程序的实时定位... 查看详情

微信小程序web-view外部引用h5页面调用摄像头录制视频配有提示音(代码片段)

微信小程序web-view外部引用h5页面调用摄像头录制视频配有提示音1、目前的需求是什么2、都踩了那些坑1、小程序2、h5语音提示3、语音合成声音录制不进去，ios有时候是麦克风，有时候是听筒发音！4、语音合成声音录... 查看详情

微信小程序web-view外部引用h5页面调用摄像头录制视频配有提示音(代码片段)

微信小程序使用ucharts时遇到的一些坑及其解决方案（持续更新）(代码片段)

前言新项目是一个微信小程序，由于未来有跨端的可能，且为了降低开发成本，于是选择了uni-app框架进行小程序的开发。项目需求在小程序上显示各种图表，web端使用的是功能的强大的echarts，但由于官方并没... 查看详情