小程序开发注意点（持续更新）

1、小程序开发界面时候需要，界面上接下来需要对接接口数据的地方，尽可能在js那定义好data数据，然后在页面进行绑定，好处自然就是后期对接后台接口数据时候不用大改页面，只用把原先在js页面定义的data数据直接替换即可，不需要更改wxml文件

2、如有页面上有元素是触发跳转的，这时候就要考虑在js页面定义的data数据时候要加上id，作为跳转页面的参数，因为当对接上接口后，通常我们页面跳转都是传参id,然后再通过接口查询详细信息

以上两点主要是说我们在开发页面的尽可能模拟对接上后台的情景，小程序的data数据定义是非常方便我们模拟的，尽可能避免对接口后需要大改页面，这样是十分浪费时间的。

  /**
   * 页面的初始数据
   */
  data: {
    modules:
    [{
      title: "塞尔维斯·多功能房",
      hobbyTitle: "life+兴趣定制 | 时光画廊",
      id: 1,

    {
      id:2,
      title: "塞尔维斯·多功能房",
      hobbyTitle: "life+兴趣定制 | 时光画廊",
    }],

  },

3、会在多个页面使用到js方法，我们尽量在app.js上封装好，然后在别的页面直接引用即可，这样能减少代码冗余，方便修改，而且多人开发的时候也有效减少重复工作

4、开发过小程序的人都知道小程序官方提供的icon库少得可怜，所以我们是有必要引用第三方icon库的，小程序中icon引用第巴里巴巴图标库的图标，我们在app.wxss粘贴下面代码即可

@font-face {
  font-family: 'iconfont';  /* project id 518032 */
  src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot');
  src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.woff') format('woff'),
  url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.svg#iconfont') format('svg');
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:60rpx;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*本项目使用的18个图标  */
.icon-zhiding:before{content: '\e739';}
.icon-zuojiantou:before{content: '\e736';}
.icon-youjiantou:before{content: '\e735';}
.icon-shangjiantou:before{content: '\e734';}
.icon-xiajiantou1:before{content: '\e733';}
.icon-xiajiantou:before{content: '\e6cc';}
.icon-gengduotianchong:before{content: '\e67f';}
.icon-erweima:before{content: '\e65f';}
.icon-fenleiorguangchangorqita:before{content: '\e64f';}
.icon-dibiao:before{content: '\e64d';}
.icon-bangzhu:before{content: '\e64a';}
.icon-xinfeng:before{content: '\e640';}
.icon-duihuaxinxi:before{content: '\e639';}
.icon-sousuo:before{content: '\e62f';}
.icon-shouye:before{content: '\e62d';}
.icon-shezhi:before{content: '\e62a';}
.icon-shanchu:before{content: '\e629';}
.icon-dianhua:before{content: '\e61b';}

页面上使用我们直接使用小程序的icon组件然后在class 上写iconfont 和你想使用的图标的类即可

 <icon class="iconfont icon-youjiantou"></icon>  //右箭头

5、Now you can provide attr "wx:key" for a "wx:for" to improve performance.这个警告我相信有不少人应该都会碰到过，这个主要是我们在使用wx:for的时候缺少了wx:key这个属性，这个属性我们一般使用一个数组的唯一标识

key的作用：数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

6、关于ajax的post请求后台接受不到数据的问题，主要把请求表头修改为application/x-www-form-urlencoded就行了，这时候请求的数据被编码为名称/值对，当然如果后台支持application/json的参数接受的就不用看这点了

7、小程序要求请求接口必须是https的

8、小程序不能直接进行dom节点操作,ajax请求返回数据之后,赋值data中,之后从data中取数据,进行页面渲染

9、小程序设置分享时候副标题的方法，https://blog.csdn.net/sqlquan/article/details/81701598

10、小程序使用switchTab跳转后页面不刷新，解决https://blog.csdn.net/sqlquan/article/details/82466923

但个人建议不要使用刷新，刷新会导致用户体验不好，建议使用页面的onShow事件，每次进入页面都会触发onShow事件可以实现你所需

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

11、小程序的data数据是单向数据绑定，修改data中的数据不会自动更新View；更新view，需要使用setData()方法。setData()更新View时

以上均为个人见解，如果说错的，请留意指出，欢迎各位大神补充，谢谢

小程序开发注意点（持续更新）

猜你喜欢