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}}" id="{{item.key}}" class="js-list-item">
<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-id="{{index}}" bindtap="handleDetail">详情</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'
}
]
})