小程序实战注意事项

一、`backgroundImage`不支持本地图片引入

使用网络路径；
使用base64；

.bg{
    background-image:url(data:image/jpeg;base64,xxxxxx);
}

使用image组件替代；

二、阻止事件冒泡

正常事件绑定使用的是bindtap，但是该方法无法阻止事件冒泡，这样就会触发父元素绑定的事件，小程序提供另一种方法来解决该问题，使用catchtap事件替换bindtap即可；其他事件同理，将bind换成catch。

常见结构：

<navigator url='/pages/detail?id=10'>/*点击跳转商品详情*/
     <image src="xxx"></image>
     <view>豪华双人床</view>
     <view>这床又大又软</view>
     <button catchtap='add'>加入购物车</button>/*点击添加*/
</navigator>

三、事件传参 `target` or `currentTarget`

target指触发事件的目标节点，currentTarget指绑定事件的节点，当事件绑定节点包含子节点时，使用currentTarget更加方便；

wxml:
/*删除按钮结构*/
<view bindtap="delete" data-id="1">
     <image src="del_icon.png"></image>
     <text>删除</text>
</view>

js:
Page({
  delete(e){
        e.currentTarget//必定是view节点 可以获取当前节点上携带的id
        e.target//如果点击了内部image则e.target是image
  }
})

四、小程序入口页面获取参数

启动小程序时参数通过wx.getLaunchOptionsSync().query访问，启动之后进入通过options访问；

/pages/index/index
Page({
  onLoad(options){
      console.log(options.id)//启动之后再次进入时获取所传id参数（常见为点击分享链接进入）
      let options = wx.getLaunchOptionsSync();
      console.log(options.query.id)//获取启动时所传id参数
  }
})

五、获取用户信息

调用 wx.getUserInfo 接口，无法弹出授权询问框，默认调用失败，如果用户曾经授权过，则可成功调用此方法，否则需要使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。

wx.getSetting({
     success: res => {
           if (res.authSetting['scope.userInfo']) {//曾经授权过
                this.getUserInfo();//调用相关接口获取用户信息
                this.setData({
                   canIUseUserInfo: true
                })
            }else{
                this.setData({
                   canIUseUserInfo: false//否则显示button让用户点击授权
                })
            }
      }
})

六、textarea遮挡问题

textarea属于原生组件，cover-view可以覆盖在原生组件之上，注意cover-view只能嵌套cover-view、cover-image、button。

七、去除button边框

button组件边框是伪元素：

button::after{ display: none;}

八、开发版真机调试

后台服务器搭建后，从开发者工具上设置不校验域名，就可以直接访问服务器ip或域名，但是用手机预览的时候无法进行数据的交互，用手机扫描预览后，需要点击小程序右上角---打开调试，然后重启即可！

九、扫码调试（扫描二维码进入开发调试）

在开发的过程中可能会有这样的场景，要求后台生成小程序码，用微信扫描小程序码带参数进入一个页面，但是生成的小程序码是线上的正式版本，小程度还没有上线没有办法调试；在开发工具中点击对应按钮选择小程序码，即可模拟整个过程。

image.png

十、`getCurrentPages`访问页面实例，进行页面传值

对于页面之间传值，最简陋的方式是借助本地存储，一个页面存，其他页面取，也可以使用状态管理工具，但是会有种矫枉过正的感觉。大部分场景都是父子页面传值，根据实际情况可以使用小程序提供的方式，一级=>二级（路径后携带参数），二级=>一级（getCurrentPages访问上级页面实例）

//列表页
Page({
  data:{
    list:[]
  }
})
//点击按钮进入添加页面
Page({
  add(){
      let pages=getCurrentPages();//获取页面栈中所有页面实例；
      let page_list=pages[pages.length-2]//获取上个页面实例 length-1指最后一个页面也就是当前页面；
      page_list.setData({
          list:pages_list.data.list.concat("新内容")
      })
  }
})

十一、长列表渲染setData数据量大时，导致卡顿（数据词典）

小程序数据通信需要Native 的 JSBrigde 做中转，桥接渲染层和逻辑层，每当小程序视图数据需要更新时，逻辑层会调用小程序提供的 setData 方法将数据从逻辑层传递到视图层，经过一系列渲染步骤之后完成UI视图更新，当setData传递数据量比较大的时候，就会引发渲染性能问题。减少setData数据量和调用频率是目前开发者可以主动干预的步骤。

数据词典

Page({
  data:{
    person:{
      name:"veb",
      age:20
    }，
    list:[{
       title:"西瓜"
    }]
  },
  changeName(){
    //常规写法 取出person修改name字段，然后setData更新页面
    let person=this.data.person;
    person.name="Veblen";
    this.setData({//传入整个修改后的对象
      person
    })
    //数据词典
    this.setData({//通过数据关系 更新指定字段
      'person.name':'Veblen'
    })
    //同理
    this.setData({//通过数据关系 更新指定字段
      'list[0].title':'Veblen'
    })
  }
})

长列表优化
将数据划分为二维数组结构

Page({
  data:{
    list:[]
  },
  getNextPage(){
    let newList=[];
    //常规写法  list:[{},{},{}]
    this.setData({
      list:this.data.list.concat(newList)
    })
    // 优化 list:[[{},{}],[{},{}]]
    let index=this.data.list.length-1;
    this.setData({//指定索引位置赋值新数组，索引为length指定最后一个元素之后的位置
      ['list['+index+']']:newList//注意：对象属性为表达式时需要用[]包裹
    })
  }
})

加油！