小程序开发（请求）

偷光

已于 2023-06-09 10:05:41 修改

阅读量148

点赞数

文章标签： html5 前端框架 css javascript

于 2023-06-08 10:36:51 首次发布

本文链接：https://blog.csdn.net/wbskb/article/details/131100150

版权

在小程序开发时，发请求拿数据，渲染到页面

基本渲染

<!--pages/render/index.wxml-->
<!-- 芝麻开门案例: 注意不要加多余的空格 -->
<switch checked="{{text === 'abc'}}" />
<input type="text" model:value="{{text}}" />
<view>{{ text }}</view>

---------------------------------
<text>基本渲染</text>
<view> {{ mag }} </view>
<view> {{ bol }} </view>
<!-- 开关属性 -->
<switch checked="{{bol}}" ></switch>
<!-- 计算 -->
<view>{{ 100/2 }}</view>
<view>{{ 100/2 ? 'true':'false' }}</view>
<view>{{ 100/2 || 'OK' }}</view>
<!-- 不能写函数调用（） -->
<view> {{ [1,2,3,4,5] }} </view>
<!-- 写了函数调用会不生效 -->
<view> {{ [1,2,3,4,5].sort() }} </view>

<!-- 打折 -->
<view> {{ fruit }} 的价格为 ： {{obj.num}} 元/斤 </view>


<button bind:tap="content">点击打折半价</button>
<view>---------------------------------</view>
<view wx:if="{{score>90}}">甲</view>
<view wx:elif="{{score>70}}">乙</view>
<view wx:else>丙</view>

<!-- true 隐藏，否则相反，单纯的在页面看不到，在控制台会显示 -->
<view hidden="{{score>80}}">丁</view>

Page({
  data:{
    mag:'hello!',
    bol:true,
    text:'',
    fruit:'苹果',
    obj:{
      num:10
    },
    score:30
  },

  content(){

    const compute = this.data.obj.num / 2

  // 1. 正常写法
  // this.setData({
  //   obj:{num:5}
  // })

  // 2.简写
  this.setData({'obj.num': compute})
  }
})

wx:for 列表循环渲染

data:{

students: [

    {id: 1, name: '甲', age: 20, gender: '男', level: '菜鸟'},

    {id: 2, name: '乙', age: 18, gender: '女', level: '笨鸟'},

    {id: 3, name: '丙', age: 20, gender: '女', level: '老鸟'}

  ]

}

===================================================

// 列表渲染

// 普通数组 wx:key="*this"

// 建议 id

  <view class="item" wx:for="{{students}}" wx:key="id">

    <text>{{item.id}}-</text>

    <text>{{item.name}}</text>

    <text>{{item.age}}</text>

    <text>{{item.gender}}</text>

    <text>{{item.levem}}</text>

  </view>

简单请求，必须是 https 格式的

<button bind:tap="gitBooks">获取图书列表</button>

======================================

gitBooks(){

    wx.request({

      url: 'https://mp.csdn.net/',

      method:'GET',

      success:(res) =>{

        console.log('图书列表',res)

      },

      fail:(err) => {

        console.log('错误',err)

      },

      complete:()=> {

        console.log('完成……')

      }

    })

  }

发请求时的提示

 gitBooks(){
 
    // 显示加载框
    wx.showLoading({title: '加载中'})
    
    setTimeout(function () {
      wx.hideLoading()
    }, 2000)

    wx.request({
      url: 'http://ajax-api.itheima.net/api/books',
      method:'GET',
      success:(res) =>{
        console.log('图书列表',res)
        wx.showToast({
          title: '成功的',
        })
      },
      fail:(err) => {
        console.log('错误',err)
      },
      complete:()=> {
        console.log('完成……')
        // 关闭加载框
        wx.hideLoading()
      }
    })
  },

本地存储的操作

<view class="storage">

  <button size="mini" bind:tap="storeData" type="primary">存数据</button>

  <button size="mini" bind:tap="readData" type="primary">读数据</button>

  <button size="mini" bind:tap="delData" type="primary">删数据</button>

  <button size="mini" bind:tap="clearData" type="primary">清数据</button>

</view>

// index.js

// 存储到本地

  storeData(){

    wx.setStorageSync('key', '1231xa2')

  },

  // 读取本地数据

  readData(){

    console.log(wx.getStorageSync('key'))

  },

  // 删除本地数据

  delData(){

    wx.removeStorageSync('key')

  },

  // 清空全部数据

  clearData(){

    wx.clearStorageSync()

  }

小程序中的 api 分为同步和异步的，异步中又分为是否支持 paramse的。

优先使用同步的 api ,同步 api 的特点 Sync 结尾

async getSyc() {

    // 同步 api 直接使用
    // const res = wx.getSystemInfoSync()
    // console.log('同步',res)

    // 异步,当前函数只能有一个执行函数，否则 undefined
      const re = await wx.getSystemInfo()
      console.log('异步',re)
    
  }

传参的两种方式

<!-- 传参方式一：data-num="24" -->
<button bind:tap="introduction" data-num="24">传参</button>

<!-- 传参方式二：data-num="24" -->
<button bind:tap="introduction2" mark:introduction2="37">传参2</button>

Page({
  introduction(e){
   console.log(e.target.dataset)
  },
  introduction2(e){
    console.log(e)
   }
})

点击当前按钮高亮小案例

<!-- 页面主体 active -->
<view class="page-body">
  <scroll-view scroll-y class="aside">
  <!-- index 是自带的当前索引，当索引等于 numData 时为true -->
    <view wx:for="{{6}}" 
    wx:key="*this" 
    class="{{ index===numData? 'item active' : 'item' }}" 
    mark:num="{{index}}" 
    bind:tap="cliLight"></view>
  </scroll-view>
  <scroll-view scroll-y refresher-enabled class="content">
    <view wx:for="{{6}}" wx:key="*this" class="item"></view>
  </scroll-view>
</view>

Page({
  data:{
    numData:-1
  },
  cliLight(e){

    console.log(e.mark.num)

    // 修改 numData 的值，让其等于当前索引
    this.setData({'numData':+e.mark.num})
  }
})

分析案例：

form 表单的应用

bindchange 选中项发生改变时触发 change 事件

语法：

detail = {value:[选中的checkbox的value的数组]}

常用事件

  <!--  
    bindrefresherrefresh 下拉刷新事件
    bindscrolltolower 滚动到底部/右边时触发
     -->
  <scroll-view 
  bindrefresherrefresh="pullData"
  bindscrolltolower="bottonData"
  scroll-y 
  refresher-enabled 
  class="content">

    <view 
    wx:for="{{6}}" 
    wx:key="*this" 
    class="item"></view>

  </scroll-view>

小程序的生命周期

应用生命周期
页面生命周期
组件生命周期

生命周期是一些名称固定，会自动执行的函数。

  // 页面生命周期  

  onLoad(){
    console.log('生命周期页面， 加载完成')  
  },

  onReady(){
    console.log('生命周期页面， 页面初次渲染完成')  
  },

  onShow(){
    console.log('生命周期页面， 处于可见状态')  
  },

  onHide(){
    console.log('生命周期页面， 处于不可见状态')  
  },