• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序踩坑之前端问题处理篇

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

近期完成了一个小程序,自己做的前后端开发、真是惨哭我了o(╥﹏╥)o,下面几点希望大家可以避雷。

首先,想先介绍一下我遇到问题的解决思路:

  1、先在postman调试接口,看数据获取是否正常,
  2、在微信开发者工具,考虑是不是语法不对,
  3、看看是不是组件的问题,有些组件是禁用一些点击事件的。

1.数据更新

  想改变data数据,并不是简单的data:{ }就可以的,因为视图层和逻辑层的数据更新不一致,所以需要使用API:this.setData({ }) 进行改变。

 1.1 补充,如何用setData修改数组或对象中的一个属性值

  需求:改变lists[0]中的Sname

Page({
   data:{
        lists:[
         {
          Sno:"001",
          Sname:"梨花"
        },
        {
          Sno:"002",
          Sname:"黛玉"
       }  
     ]
    } 
})

法一:直接修改

onLoad:function () {
       var that = this;
       that.setData({
           'lists[0].Sname' : '小花'
      })
   }

法二:①定义一个变量 把(lists[0].Sname)用字符串拼接起来 ②修改变量

onLoad:function () {
       var that = this;
       var s = "lists[" + 0 + "].Sname"; 
       that.setData({
         [s] : '小花'
      })
   }

 

2.this指向

  当函数定义的时候,会使用API,此时this指向会改变。但想在函数中使用全局上下文的this,我们选择利用that进行this指向的改变。

  在一个新函数中,定义一个that变量等于this,即选择用that进行备份。

onLoad:function () {
       var that = this;  
}

 

3.存储全局变量

  ①首先在app.js中,定义全局变量globalData,可以原来存储登录状态的信息

globalData: {
    user:{},
    Status:{}
}

  ② 在其他js文件调用的时候,注意要先定义一个变量,然后再使用

onLoad: function (options) {
    var app = getApp();
    wx.request({
      data: {
        Sno: app.globalData.user.username,
      }
  )}  
}

 

4.调用后端接口

  首先,注意后端返回的数据,格式可能不够统一。所以不能惯性思维,比如我当时 res.data.code ==> 应该是 res.data.error_code 。

 

5.图片处理问题

  当使用的图片资源过大,会导致包过大,而无法打包。
解决方案:
  ①将图片上传至QQ相册等,然后微信小程序在图片链接使用线上地址。
  ②使用BASE64进行图片转换。
  但是!当真机调试时,IOS系统无法展现图片,查找原因是因为图片没有配置服务器域名之类的问题,但后期配置了也没有效果。

  所以简单粗暴的,我选择把图片截图,不使用高清原图了,是的打包成功了。。。但后期还是要改善的,还是要保证用户体验感的!

 

后续还有填坑分享的,喜欢帮忙顶个文吧!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序异步请求解决方法发布时间:2022-07-18
下一篇:
【小程序】----使用Echarts的方式发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap