小程序开发体验

公司最近准备要做一个和自如相类似的租房业务系统，前期放在小程序端跑，最近年纪大了，写过的东西总忘，写篇博客打个demo记录一下。复制代码

配置

小程序分为全局配置和页面配置 ,全局配置在app.json中配置

{  "pages": [    "pages/detail/detail",    "pages/index/index",    "pages/logs/logs",    ],  "window": {    "backgroundTextStyle": "light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle": "black"  },  "tabBar": {    "list": [      {        "pagePath": "pages/index/index",        "text": "首页",        "iconPath": "images/icon.jpg",        "selectedIconPath": "images/icon.jpg"      },      {        "pagePath": "pages/logs/logs",        "text": "消息",        "selectedIconPath": "images/icon.jpg",         "iconPath": "images/icon.jpg"      },      {        "pagePath": "pages/detail/detail",        "text": "我的",        "selectedIconPath": "images/icon.jpg",        "iconPath": "images/icon.jpg"      }    ]  }}复制代码

路由配置在app.json文件中pages选项中配置，如代码所示，我创建了三个模块分别是首页/登陆/详情,微信开发者工具会自动帮我们创建这三个模块的文件。

小程序提供了原生的底部Tab栏，我们只需要将我们的页面路径配置在tabBar的list数组中就可以了。

页面常用布局

小程序中自定义view为页面元素，我们可以把它理解为div使用。小程序提供了一些常用的原生组件比如swipe,naver,表单，媒体等组件。

其中上拉下拉小程序提供了onReachBottom和onPullDownRefresh方法

坑点

1 onReachBottom上拉触底方法页面元素必须超出页面高度才会触发

2 onReachBottom上拉触底方法是有时间限制的350秒之后可以触发下一次，如果你快速一直上拉只会触发一次

请求数据与后台交互

小程序中自定义了数据请求方法，我们只需要调用就可以了

wx.request({      url: "http://47.100.30.67:7001/phone?phone=" + this.data.userInfo.admin.value + "&pwd=" + this.data.userInfo.pwd.value,      method: "GET",      header: {        'Content-Type': 'json'      },      success: (res)=> {        this.setData({ showTopToast: true});                wx.switchTab({          url: '../detail/detail'        })      }    })复制代码

注释

请求参数还是和常规使用一样一种是放在url中带过去还有一种是小程序自定义了data对象来放置参数。

小程序自定义路由跳转方法switchTab(跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面)