开发者文档永远滴神
本文会随实际使用不断丰富,毕竟逐一介绍是文档的事情,作为开发人员,用到再看才是常态女
wx.getSystemInfoSync()
获取用户信息,返回一个携带用户各种信息的对象
onReady: function () {
console.log("监听页面初次渲染完成")
console.log(wx.getSystemInfoSync())
},
具体是这些
有些很常见的信息,比如机型
wx.showLoading()
显示loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
wx.showLoading({
title: '程序加载中'
})
wx.showToast()
显示消息框,框内图标默认为“√”,可以自行编辑文字或图片
wx.showToast({
title:'提交成功'
})
wx.request(Object object)
发起HTTPS网络请求,需要的参数主要如下
比如
wx.request({
url: 'https://edu.newsight.cn/wxList.php',
data:{
num:5
},
success:res=>{
console.log(res)
}
})
其会返回如下的一组数据(具体返回什么看目标网页的安排)
而我需要的数据就藏在data里面
此处修改为
即可返回一个数据数组,里面每个元素是一个对象
把这个数组放到data里面(我这里用resData存储)
在wxml中调用即可
<view class="row" wx:for="{{resData}}" wx:key="index">
<view class="pic">
<image src="{{item.picurl}}" ></image>
</view>
<view class="text" >
<view class="title">{{item.title}}</view>
<view class="time">{{item.author}}</view>
</view>
</view>
其实这个网址返回的数据不止于此,可以进行分页显示
添加一个按钮,设置翻页函数进行调用
如果再次写一遍网络请求代码,那就太冗余了,这里把它封装成一个函数,专门用于访问页面及设置数据
getList:function(p=1){
wx.request({
url: 'https://edu.newsight.cn/wxList.php',
data:{
num:5,
page:p
},
success:res=>{
this.setData({
resData:res.data
})
}
})
},
形参p是存储页面信息,在请求时一并发给服务器,缺省值为1,方便第一次调用时不传递参数
p:1,
nextPage:function(){
this.p++,
this.getList(this.p)
},
设置个全局变量p存储当前页面,每次要翻页时自增再传递给页面请求函数
即可实现翻页操作
我在之前的文章写过navigator标签可以进行页面间的跳转,但这种会增加html页面的负担,减少其可读性,还有其他的方式可以进行页面跳转
wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
navfun:function(){
wx.switchTab({
url: "/pages/logs/logs"
})
},
在html中调用此函数
即可实现跳转到logs页面
什么是tabBar页面?
tabBar页面就是app.json配置的tabBar
wx.reLaunch
关闭所有页面,打开到应用内的某个页面(不能跳转到tabBar页面)
wx.redirectTo
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
比如在此处,定义了一个navfun函数
navfun:function(){
wx.navigateTo({
url: "/pages/demo2/demo2"
})
},
在html中调用此函数
即可实现跳转
跳转完右上角还有小箭头可供返回
wx.navigateBack
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。