1.发送request请求：
image.png
解决办法：在设置中找到项目设置
image.png
2.创建新页面的时候必须在js文件中注册到Page（{}）中：
// pages/component/index.js.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 跳转查看全部课程
jumpAllClass(){
wx.navigateTo({
url: '../../pages/class/index?id=1',
})
},
clickRequest(){
}
})
3.微信登录：
image.png
https://blog.csdn.net/michael_ouyang/article/details/72635263
获取用户信息是由于微信api调整：
image.png
4.下拉刷新：
wxml:
<!-- 下拉刷新 -->
<view class="page-body">
<view class="page-body-wrapper">
<view class="page-body-info">
<text class="page-body-text">下滑页面即可刷新</text>
</view>
<view class="page-body-buttons">
<button bindtap="stopPullDownRefresh">停止刷新</button>
</view>
</view>
</view>
json:
"enablePullDownRefresh": true
js:
onPullDownRefresh: function() {
console.log('onPullDownRefresh', new Date())
},
stopPullDownRefresh: function() {
wx.stopPullDownRefresh({
complete: function(res) {
console.log(res, new Date())
}
})
},
5.顶部标题显示加载
header.wxml:
<template>
<view>
{{title}}
</view>
</template>
需要加载的文件中引入：
<import src="../common/header.wxml"/>
<!--pages/class/index.wxml-->
<template is="header" data="{{title: 'navigationBarLoading'}}"/>
<button class="page-body-button" type="primary" bindtap="showNavigationBarLoading">显示加载动画</button>
<button class="page-body-button" bindtap="hideNavigationBarLoading">隐藏加载动画</button>
js:
showNavigationBarLoading: function() {
wx.showNavigationBarLoading()
},
hideNavigationBarLoading: function() {
wx.hideNavigationBarLoading()
}
6.menulist:
<view class="menu-list">
<block wx:for="{{menuList}}" wx:for-item="menuItem">
<view class="menu-item">
<view class="menu-item-main" id="{{index}}" bindtap="tapMenuItem">
<text class="menu-item-name">{{menuItem.name}}</text>
<image
class="menu-item-arrow {{menuItem.opened ? 'open' : 'close'}} {{menuItem.url ? 'url' : ''}}"
src="../../image/arrowright.png">
</image>
</view>
<!-- <view class="menu-item-api-list {{menuItem.opened ? 'open' : 'close'}}">
<block wx:for="{{menuItem.APIList}}" wx:for-item="APIItem">
<navigator url="{{APIItem.url}}">
<view class="menu-item-api-item" style="{{index === 0 ? 'border-top:none;' : ''}}">
<view class="menu-item-api-item-text">
<text class="menu-item-api-item-text-zhname">{{APIItem.zhName}}</text>
<text class="menu-item-api-item-text-enname">{{APIItem.enName}}</text>
</view>
<image class="menu-item-api-item-arrow" src="/image/arrowright.png"></image>
</view>
</navigator>
</block>
</view> -->
<text class="menu-item-api-list {{menuItem.opened ? 'open' : 'close'}}">
我在测试数据我在测试数据我在测试数据我在测试数据我在测试数据我在测试数据我在测试数据我在测试数据我在测
我在测试数据我在测试数据我在测试数据我在测试数据我在测试数据试数据我在测试数据
</text>
</view>
</block>
</view>
wxss:
.menu-list {
display: flex;
flex-direction: column;
background-color: #fbf9fe;
}
.menu-item {
color: #000000;
display: flex;
background-color: #fff;
margin: 10rpx 40rpx;
flex-direction: column;
}
.menu-item-main {
display: flex;
height: 100rpx;
padding: 20rpx;
border-radius: 10rpx;
align-items: center;
font-size: 32rpx;
justify-content: space-between;
}
.menu-item-arrow {
width: 32rpx;
height: 32rpx;
transition: 400ms;
}
.menu-item-arrow.open {
transform: rotate(90deg);
}
.menu-item-arrow.close {
transform: rotate(0deg);
}
.menu-item-arrow.url {
transform: rotate(0deg);
}
.menu-item-api-list {
transition: 200ms;
height: auto;
border-top: 1px solid #d8d8d8;
}
.menu-item-api-list.close {
display: none;
height: 0;
}
.menu-item-api-item {
display: flex;
justify-content: space-between;
height: 80rpx;
padding: 20rpx 20rpx 20rpx 0;
margin-left: 20rpx;
align-items: center;
border-top: 1px solid #f0f0f0;
}
.menu-item-api-item-text {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.menu-item-api-item-text-zhname {
font-size: 30rpx;
}
.menu-item-api-item-text-enname {
font-size: 26rpx;
color: #6b6b6b;
}
.menu-item-api-item-arrow {
width: 32rpx;
height: 32rpx;
}
js:
tapMenuItem: function (e) {
var menuItem = this.data.menuList[parseInt(e.currentTarget.id)]
if (menuItem.url) {
wx.navigateTo({ url: menuItem.url })
} else {
var changeData = {}
var opened = menuItem.opened
changeData['menuList[' + e.currentTarget.id + '].opened'] = !opened
this.setData(changeData)
}
}
image.png
7.toast弹框：
wx.showToast({
title: '成功',
icon: 'succes',
duration: 1000,
mask: true
})
8.方法传值：
bindtap="navigateJump" data-index="{{menuItem.url}}"
navigateJump(event) {
wx.navigateTo({
url: event.currentTarget.dataset.index,
})
},
9.获取input的value：
<input class="inp" bindinput="inputVal"></input>
inputVal(e:object){
this.setData({
inputValue: e.detail.value
})
},
网友评论