微信小程序开发入门(API)
2021/10/13 17:16:52
本文主要是介绍微信小程序开发入门(API),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一些基础用法
(这里只记录几个重要的)
wx.getSystemInfoSync()
获取设备信息
wx.showLoading
显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
wx.showToast
显示消息提示框
wx.showToast({ title: '成功', icon: 'success', duration: 2000 //延迟时间 })
具体自己看文档
https://developers.weixin.qq.com/miniprogram/dev/api/
路由用法
wx.navigateTo
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
wx.redirectTo
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.reLaunch (比较好用)
关闭所有页面,打开到应用内的某个页面。可以跳转到tabbar页面,且可以携带参数
wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,不可以携带参数
wx.navigateBack
关闭当前页面,返回上一页面或多级页面。
布局页面模拟数据请求
wx.request
- url 开发者服务器接口地址
- data 请求的参数
wxml
<view class="row" wx:key="index" wx:for="{{resData}}"> <view class="pic"> <image src="{{item.picurl}}"></image> </view> <view class="text"> <view class="title">{{item.title}}</view> <view class="time">{{item.posttime}} - {{item.author}}</view> </view> </view> <!-- 定义一个按下一页的按钮 --> <button bindtap="nextPage" type="primary">下一页</button>
wxss
.row{display:flex;border: 1px solid #aaa;box-sizing: border-box;} .pic{flex:2;height: 170rpx;width: 155rpx;} .pic image{height: 100%;width: 100%;margin-top: 15rpx;} .text{flex:8;padding: 30rpx;display: flex;flex-direction: column;justify-content: space-between;} .text .title{font-size: 40rpx;} .text .time{font-size: 30rpx; color: #999;} button{margin-top: 45rpx;}
js
var num="" Page({ data: { resData:[] }, //按钮 nextPage(){ num++ this.getData(num) }, //封装 p=1表示默认第一页 getData(p=1){ wx.request({ url: 'https://edu.newsight.cn/wxList.php', data:{ num:5, //显示5条数据 page:p }, success:res=>{ //console.log(res.data) this.setData({ resData:res.data }) } }) }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { this.getData(); }, )}
这篇关于微信小程序开发入门(API)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享
- 2024-11-20微信小程序全栈教程:从零开始的全攻略
- 2024-11-19微信小程序全栈学习:从零开始的完整指南