小程序的坑你遇到过哪些？

template模版的使用

使用import 标签引入需要的template，wx:for属性循环遍历list,template标签中的is属性要于template.wxml中的name属性一一对应，data属性写入需要插入的详细数据

<!--pages/index_page/footPrint/footPrint.wxml-->
<import src="template/template.wxml"/>
    <block wx:for="{{listul}}">
        <template is="user_list" data="{{lookDate:item.lookDate,img:item.img,name:item.name,numb:item.numb,peo:item.peo,price:item.price}}"/>
    </block>

ajax的调用，get请求和post请求的区别

如果你是get请求，直接使用wx提供的模版样式是没有问题的

wx.request({
      url: API_URL + '/pinduoduo/getMyFootPrint.json',
      method: 'get',
      data: {
        unionid: that.data.unionid
      },
      success: function (res) {
       
      }
    })

但是我们大多数的时候会用到post请求来与后台进行交互，这个时候你就需要对请求头重新定义，才会将post数据传过去

wx.request({
        url: API_URL + '/pinduoduo/updateDefaultAddresStatus.json',
        method: 'post',
        header: {
          "content-type": "application/x-www-form-urlencoded"
        },
        data: {
          id: e.currentTarget.dataset.id,
          isdefault:1
        },
        success: function (res) {
       
          
        }

class类名切换实现动态显隐等效果

遇到类似于jquery方法addclass()和removeClass()的条件判断时，可以使用下面的 方法：

<view class="nav_initialize {{ispop==1?'hide':''}} ">

在对应需要更改class的方法中使用下面的方法完成修改：

clickse:function(){
    var that = this;
    that.setData({
      ispop: 1

    });
  }

.全局变量的定义和使用

需要使用单个js内全局变量page里面的值的时候

Page({
  data: {
    unionid:'123',
  }
  })

利用下面的方法调用即可

   minePage: function (e) {
   var that=this;
    that.data.unionid
  }

关于小程序开发工具的使用

因为小程序是最近几年才逐渐火热的一门技术，所以在开发工具的使用上，目前只有借用官网提供的工具进行开发，调试。小程序的更新迭代速度大约15日左右，这也意味着技术迭代速度非常快，也就是说开发工具我们最好使用低于最新版一个版本的稳定性才更高一些。

延时操作

小程序的值传递方式是异步方式，往往我们的后续操作需要依赖上一步设置的变量值，加上网络请求响应速度，方法的执行时间等，导致后续操作无参数可用，我们可以使用定时器来延时请求或方法的执行。

setTimeout(function () {
      //要延时执行的代码  
      that.formul();
    }, 300)

标签自定义属性的使用

例:我们要使用标签的data-type属性值

modfinylist:function(e){ 
    var type=e.currentTarget.dataset.type;//获取ID属性的值
    wx.navigateTo({
      url: '../modifyaddress/modifyaddress?type='+type,//URL带参数跳转
    })
  }

标签固有属性获取

例:我们要使用标签的id属性值

modfinylist:function(e){ 
    var id=e.currentTarget.id;//获取ID属性的值
    wx.navigateTo({
      url: '../modifyaddress/modifyaddress?id='+id,//URL带参数跳转
    })
  }

加载中的使用

有时候为了缓冲网络请求时间，友好完善交互体验我们需要在请求前显示正在加载方法，请求后取消正在加载

wx.showLoading({//显示loading
  title: '加载中',
})

setTimeout(function(){//两秒后取消显示loading
  wx.hideLoading()
},2000)

获取input等标签的value

checkname:function(e){
    var that = this;
    that.setData({
      inname: e.detail.value//input的value值
    })
  }

this的使用

和常规的前端开发一样，微信小程序的this也是指代触发事件的元素，当操作过多时候，this的指代会模糊，错误。所以使用前请先保存this。

checkname:function(e){
    var that = this;
  }

背景图的使用

在大部分的页面布局上，我们通常会使用背景图的css变现来渲染页面，但小程序的背景图与平常h5开发有很大差别

<view class='nav_main' ../../../img/inte_red.png');"></view>

.nav_main{//如果你的背景图路径是相对路径，那么背景图属性一定要写在标签里。如果是绝对路径，则可以忽略这一点
  margin: 0 auto;
  margin-top:15%;
  width: 80%;
  height: 300rpx;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

弹出框的提示

 wx.showToast({
            title: '意见反馈成功',
            icon:'success',
            success:function(){//提示弹框成功的回调函数，注意这里面的成功是成功调用弹框，不是弹框调用完成
              setTimeout(function () {
                wx.redirectTo({
                  url: '/pages/index_page/mine/mine',
                })
              }, 1000)
            }
          });

json文件的配置

json文件中是对小程序的配置项，需要注意的是属性值的引号之间不能存在空格

{
  "navigationBarBackgroundColor": "#FF4A4A",//错误写法：" #FF4A4A"
}

页面跳转问题

在开发小程序时，用到下面三种页面跳转方法，路径写对后跳转没有反应，也没报错。

wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

跳转不成功分析原因：

1.你的页面在app.json文件中注册了吗？

2.你的url地址写对了吗，目录层级没错吗?

3.你要跳转到的页面是非tabBar的页面吗？如果是tabBar页面，恭喜你，找到问题了。

wx.navigateTo/wx.redirectTo只能用在非tabBar页面的跳转，要跳转到tabBar页面，需要使用wx.switchTab

4.navigateTo中规定只能保留5成栈，超出五层也会导致链接失效，你可以选择redirectTo跳转。