小程序学习基础（20201113）框架

最新推荐文章于 2025-12-15 12:03:03 发布

原创最新推荐文章于 2025-12-15 12:03:03 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍了微信小程序的全局配置、页面设置、WXML数据绑定、wx:for指令的使用，以及如何通过bindTap事件和this.setData()修改数据。示例中展示了简单的分页功能，包括获取设备系统信息的方法。通过点击按钮实现新闻列表的上下翻页，数据来源于网络请求。

1、小程序配置（全局配置）

快捷键的使用

Alt + ↑/↓ 把当前行上线移动

全局配置学习
window

tabBar

2、单页面设置

3、WXML数据绑定

4、wx:for

*this，为微信小程序的保留字，表示当前对象

5、事件以及修改data里面的值

bindTap

this.setData({})

6、获得设备的系统信息

7、简单的分页的例子

<!--pages/test/test.wxml-->
<view class="out">
  <view class="in" wx:for="{{list}}" wx:key="index">
    <image class="img" src="{{item.picurl}}"></image>
    <view class="text">
      <view class="title">{{item.title}}</view>
      <view class="time">{{item.posttime}}</view>
    </view>
  </view>
  <button type="primary" bindtap="nextPage">上一页</button>
  <button type="primary" bindtap="nextPage">下一页</button>
</view>

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[]
  },
  nextPage: function () {
    this.getList()
  },
  getList () {
    wx.request({
      url: 'https://edu.newsight.cn/wxList.php',
      data:{
        num: 5,
        page: 1
      },
      success: res => {
        console.info(res.data)
        this.setData({
          list: res.data
        })
      }
    })
  }
})