小程序（1702H）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

gif:

1.运行请求本地连接

2.wx:for

<view
  wx:for="{{navTitle}}"
  wx:key="{{index}}"
  wx:for-index="i"
  wx:for-item="myItem"
  data-temp-index="{{i}}"
  bind:tap="handleNavClick">
  <button class="m-btn {{currentIndex === i ? 'active':''}}">{{myItem.title}}</button>
</view>

3.wx.request

    wx.request({
      url: 'http://192.168.2.196:8888/wx/list',
      method: 'get',
      success:(res) => {
        console.log(res)
        if (res.data.code === 200) {
          let data = res.data.data
          this.setData({
            navTitle: data.navtitle,
            navData: data.navdata,
            currentList: data.navdata[0].content
          })
        }
      }
    })

4.usingComponents

{
  "usingComponents": {
    "navItem": "../../components/nav/nav",
    "listItem": "../../components/listItem/item"
  }
}

5.子组件触发父组件的方法

this.triggerEvent('HandleNavClickFromComponent', {tempindex})

6.使用子组件

  <navItem navTitle="{{navTitle}}" currentId="{{currentId}}" bindHandleNavClickFromComponent="handleNavClickFromComponent"></navItem>
  <listItem currentList="{{currentList}}"></listItem>

7.子组件里定义方法

  methods: {
    handleNavClick2(e) {
      let {tempindex} =  e.currentTarget.dataset
      console.log(tempindex)
      this.triggerEvent('HandleNavClickFromComponent', {tempindex})
    }
  }

8.子组件接收父组件传递来的属性

  properties: {
    currentId: Number,
    navTitle: Array
  },

9.github地址：https://github.com/1702h/m-wx-demo

10.目录结构

11.主要文档指引

指南-》小程序框架-》视图层-》事件系统：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

指南-》自定义组件-》组件间通信与事件：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

指南-》自定义组件-》组件生命周期：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

指南-》小程序框架-》页面生命周期：

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

API-》WXML-》wx.createSelectorQuery：

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

组件-》视图容器-》scroll-view：

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

API-》网络-》发起请求-》wx.request:

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

框架-》小程序-》全局配置-》往下滑-》tabBar:

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

API-》路由-》wx.navigateTo:

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

组件-》导航-》navigator:

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

API-》WXML-》NodesRef-》NoddesRef.bundingClientRect:

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.boundingClientRect.html

12.tabBar，下面这段代码添加到app.json文件里，和pages平级:

  "tabBar": {
    "color": "#333333",
    "selectedColor": "#f66f0c",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "text": "首页",
        "selectedIconPath": "./static/index-active.png",
        "iconPath": "./static/index.png",
        "pagePath": "pages/index/index"
      },
      {
        "text": "通讯录",
        "selectedIconPath": "./static/find-active.png",
        "iconPath": "./static/find.png",
        "pagePath": "pages/list/list"
      },
      {
        "text": "购物车",
        "selectedIconPath": "./static/cart-active.png",
        "iconPath": "./static/cart.png",
        "pagePath": "pages/cart/cart"
      },
      {
        "text": "我的",
        "selectedIconPath": "./static/me-active.png",
        "iconPath": "./static/me.png",
        "pagePath": "pages/me/me"
      }
    ]
  }

13.scrollview相关

<scroll-view 
  class="m-scroll-view" 
  scroll-y 
  scroll-into-view="{{currentKey}}" 
  scroll-with-animation 
  bindscroll="handleScroll">
    <view wx:for="{{list}}" wx:key="{{index}}" >
      <text>{{item.key}}</text>
      <view wx:for="{{item.row}}" wx:key="{{index}}">
        <text>{{item.name}}</text>
      </view>
    </view>
  </scroll-view>

  handleScroll(e) {
    let scrollTop = e.detail.scrollTop
    let {listItemTops} = this.data
    for (let i = 0; i < listItemTops.length; i++) {
      if (scrollTop >= listItemTops[i]) {
        this.setData({
          currentIndex: i
        })
      }
    }
  },

page{
  height: 100%;
}

14.查询页面里元素已经元素的位置

    wx.request({
      url: "http://localhost:8888/wx/mail_list",
      success: (res) => {
        console.log(res)
        if (res.data.code === 200) {
          let data = res.data.data
          this.setData({
            list: data.items
          }, () => {
            const query = wx.createSelectorQuery();
            query.selectAll('.js-list-item').boundingClientRect((res) => {
              console.log(res)
              this.setData({
                listItemTops: res.map(item => item.top)
              })
            }).exec()
          })
        }
      }
    })

15.通讯录

16.跳转页面的两种写法：

第一种是绑定事件：

<button data->详情</button>

  todetail({currentTarget}){
    let {id} = currentTarget.dataset;
    wx.navigateTo({
      url:'/pages/detail/detail?id='+id
    })
  },

第二种是直接使用组件：

<navigator url="/pages/details/details?id={{index}}">详情2</navigator>

17.列表跳转详情：

18.列表页可以反复加载新数据的，并且点击按钮可以跳转到详情页项目，重点代码：

请求后端接口，传递页码和每页数据的条数。后端返回新数据。把新数据拼接到旧数据后面。

  getData() {
    let {page,limit} = this.data
    wx.request({
      url: 'http://localhost:8888/wx/day4/list',
      data: {
        page,
        limit
      },
      success: (res) => {
        console.log(res)
        let {list} = this.data
        list = list.concat(res.data.data)
        this.setData({
          list
        })
      }
    })
  },

scroll-view组件滚动到底部时触发bindscrolltolower上绑定的handleScrollToEnd方法。页码数加一后，再次请求新数据。

  handleScrollToEnd(e) {
    console.log(e)
    let {page} = this.data
    page = page + 1
    this.setData({
      page
    }, () => {
      this.getData()
    })
    
  },

详情页通过options参数获取用户在列表页点击了哪条数据，这里的是通过id表示的。详情页拿到id后再次请求详情接口。详情接口比较简单。返回数据后直接通过{{}}插值的页码显示一下就可以了。

  onLoad: function (options) {
    console.log(options)
    let {id} = options
    wx.request({
      url: `http://localhost:8888/wx/day4/detail?id=${id}`,
      success: (res) => {
        console.log(res)
        this.setData({
          detail: res.data.data
        })
      }
    })
  },

mock数据：

const Mock = require('mockjs')

const day4ListData = Mock.mock({
  'detail|500':[
      {
          name:'@cname',
          'rate|1-5':1,
          image:'@image(300X300)',
          'price|300-1500':1,
          title:'@ctitle',
          address: Mock.Random.city(true),
          email: '@email'
      }
  ]
})