小程序开发常见问题解决方法

1 阻止事件冒泡

//catchtap替换bindtap
<view bindtap='goDetails'>
    <!-- catchtap:可阻止冒泡事件,这样就不会同时执行两个事件 -->
    <text class="btn" catchtap='btnClick'>点击操作</text>
  
</view>

2 wx.previewImage点击显示大图(放大黑屏解决)

//wxml
 <view class="imgBox" >

      <image wx:for="{{imagesList}}"  wx:key="index"  src='{{imgPprefix}}{{item}}' data-index="{{index}}" bindtap="previewImg" ></image>

    </view>

 async previewImg(e) {
  let index = e.currentTarget.dataset.index; //获取点击图片的index
  const{imgPprefix,urls:imagesList}=this.data

    await wx.previewImage({
      urls:imagesList.map(url=>{return `${imgPprefix}${url}`}), //需要预览的图片http(https)链接列表，注意是数组,imgPprefix是后端返回图片要拼的前缀
      current: `${imgPprefix}${urls:imagesList[index]}`, // 当前显示图片的http链接，默认是第一个,有index就从index开始
    })

//点击显示大图时图片没出来,一直转圈,但打印路径可以正常访问可能原因: 
//1: 后端返回的数据开头可能有空格,但是用打印出来的链接浏览器忽略了造成的
//2: 给urls 加前缀时,忽略了是个数组,直接拼接的

  },

3 自动填充input或textarea值

       <textarea value="{{inputText}}"></textarea>
//只需要绑定一个value属性,inputText是js文件中data内需要填充的数据

4 发送给后端code 报错code无效
可能是前端的appId和后端的appId不一致造成，粗心忘了换的！在project.config.json 文件夹内修改appid 和后端统一,如果是测试号开发的话,不要通过右上角详情里去修改,因为我就出现了显示修改成功,实则没有修改

5 触底加载没反应
(1) 、配置问题
(2)、加载列表外层盒子设置了高度,导致高度不够触底

6 绑定点击事件没有触发
原因是绑定的函数后面多加了空格

  <view >
    <view class="button" bindtap="onCancelBtn">取消授权</view>
  </view>

点击事件使用bindtap 会事件冒泡,出现多个点击事件,不需要的话可以改成catchtap

7 引入Vant 日历组件点击关闭按钮不能隐藏
当引入Vant日历组件时,出现了不选择日期就不能隐藏日历的问题,点击关闭按钮和背景模态框会回缩一点又弹出,原因是把组件代码包裹在其它标签内,把代码单独拿出即可,给之前包裹的标签绑定事件即可实现选取隐藏.

8 小程序内插入html代码片段

//wxml文件
<rich-text nodes="这里放你要的html代码"></rich-text>

9 使用getUserProfile接口报错原因

//报错:wx.getUserProfile is not a function

使用要求:
1.开发者工具版本不低于 1.05.2103022
2.基础库版本不低于 2.10.4

原因: 开发者工具上基础库版本太低,修改一下即可

10 分享小程序给好友,朋友圈
在需要分享的页面js的onLOad 或 onShow 生命周期内调用 wx.showShareMenu() 开启分享按钮

   wx.showShareMenu({
      withShareTicket:true,
      menus:['shareAppMessage','shareTimeline']
      })

11 检查手机号、邮箱格式是否正确

function examinePhone(phone){
          if(!phone){
          console.log("手机不能为空")

             }else  if(!/^1[3456789]\d{9}$/.test(phone)){

            console.log("手机格式不正确")
              }
},
function examineEmail(email){
        let reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/ //验证邮箱正则
       if(!reg.test(email)){
                console.log('邮箱格式不正确！')
          }
}