小程序 - 掘金

小程序开发体验

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

demoGIT地址

配置

小程序分为全局配置和页面配置 ,全局配置在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数组中就可以了。
关于小程序配置的详细API

页面常用布局

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

坑点

1 onReachBottom上拉触底方法页面元素必须超出页面高度才会触发
2 onReachBottom上拉触底方法是有时间限制的350秒之后可以触发下一次，如果你快速一直上拉只会触发一次
关于小程序组件的详细API

请求数据与后台交互

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

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 页面)
关于小程序数据请求的详细API
关于小程序路由跳转详细API