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

r囧r小猫 2022-05-14 04:40 285阅读 0赞

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][https_blog.csdn.net_sqlquan_article_details_81701598]

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

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

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

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

12、小程序隐藏滚动条：[https://blog.csdn.net/sqlquan/article/details/84139363][https_blog.csdn.net_sqlquan_article_details_84139363]

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

[https_blog.csdn.net_sqlquan_article_details_81701598]: https://blog.csdn.net/sqlquan/article/details/81701598
[https_blog.csdn.net_sqlquan_article_details_82466923]: https://blog.csdn.net/sqlquan/article/details/82466923
[https_blog.csdn.net_sqlquan_article_details_84139363]: https://blog.csdn.net/sqlquan/article/details/84139363