微信小程序开发入门(API)

互联网 2021/10/13 17:16:52

一些基础用法 (这里只记录几个重要的) wx.getSystemInfoSync() 获取设备信息 wx.showLoading 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 wx.showToast 显示消息提示框 wx.showToast({title: 成功,icon: success,duration: 2000 //延迟时间 })具…

一些基础用法

(这里只记录几个重要的)

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();
    },
)}
随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[微信小程序开发入门(API)]http://www.zyiz.net/tech/detail-240900.html

上一篇:文案+壁纸+头像+套图小程序源码,双版本,独立后台和无服务器版本支持流量主内附详细安装教程

下一篇:小程序商城开发正赶火热,各位商家需把握机会!

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程