微信小程序41~50

1.列表渲染-进阶用法
  1. 如果要对默认的变量名和下标进行修改,可以使用wx:for-item和wx:for-index
    wx:for-item可以指定数组当前元素的变量名
    wx:for-index可以指定数组当前下标的变量名

  2. 将wx:for用在标签上,以渲染一个包含多个节点的结构快
    并不是一个组件,仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性
    标签在wxml中可以用于组织代码结构,支持列表渲染、条件渲染等

    fruitItem新的数组名,i是下标
    <view wx:for="{{ fruitList }}" wx:key="id" wx:for-item="fruitItem" wx:for-index="i">
    <view>{{ fruitItem.name }}</view>
    <view>{{ fruitItem.price }}</view>
    </view>

    <block wx:for="{{ fruitList }}" wx:key="id" wx:for-item="fruitItem" wx:for-index="i"> <view>{{ fruitItem.name }}</view> <view>{{ fruitItem.price }}</view> </block>
2.条件渲染

用来控制页面结构的展示和隐藏

有两种方式:

  1. 使用wx:if、wx:elif、wx:else属性组
  2. 使用hidden属性

wx:if和hidden两者的区别

wx:if 当条件为true时结构展现出来,否则不展示,通过移除/新增节点的方式来实现

hidden 当条件为true时会将结构隐藏,否则展示,通过idsplay样式属性来实现

复制代码
<view wx:if="{{ num === 1 }}">num等于{{ num }}</view>
<view wx:elif="{{ num === 2 }}">num等于{{ num }}</view>
<view wx:else>num大于2,目前等于{{ num }}</view>

<button type="warn" bindtap="updateNum">更改num</button>

<view hidden="{{ !isFlag }}">如果isFlag是true,展示结构,否则隐藏结构</view>
3.小程序运行机制
4.小程序更新机制

在访问小程序时,微信会将小程序代码包缓存到本地。

开发者在发布了新的小程序版本以后,微信客户端会检查本地缓存的小程序有没有新版本,并进行小程序代码包的更新。

小程序的更新机制有两种:启动时同步更新 和 启动时异步更新

  1. 启动时同步更新:微信运行时,会定期检查最近使用的小程序是否有更新。如果有更新,下次小程序启动时会同步进行更新,更新到最新版本后再打开小程序。如果 用户长时间未使用小程序时,会强制同步检查版本更新

  2. 启动时异步更新:在启动前没有发现更新,小程序每次 冷启动 时,都会异步检查是否有更新版本。如果发现有新版本,将会异步下载新版本的代码包,将新版本的小程序在下一次冷启动进行使用,当前访问使用的依然是本地的旧版本代码

在启动时异步更新的情况下,如果开发者希望立刻进行版本更新,可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本。

复制代码
App({
//onLaunch是小程序的钩子函数,在冷启动时肯定会执行到
//当小程序冷启动时,会自动在微信后台请求新版本,若有,立即下载
    onLaunch () {
        // 用wx.getUpdateManager()监听下载状态
        const UpdateManager = wx.getUpdateManager()

        //当下载完成新版本后,会触发onUpdateReady回调函数
        UpdateManager.onUpdateReady(function () {
            //在回调函数中给用户展示
            wx.showModal({
              title: '更新提示',
              content: '新版本已经准备好,是否重启应用?',
              success (res) {
                if (res.confirm) {
                    //强制使用新版本并强制重启
                  UpdateManager.applyUpdate()
                }
              }
            })
        })
    }
})
5.小程序生命周期介绍

应用生命周期是指应用程序进程从创建到消亡的整个过程。

小程序的生命周期指的是 小程序从启动到销毁的整个过程。

一个小程序完整的生命周期由 三部分来组成

  1. 应用生命周期
  2. 页面生命周期
  3. 组件生命周期

小程序生命周期伴随着一些函数,这些函数由小程序框架本身提供,被称为生命周期函数,生命周期函数会按照顺序依次自动触发调用。

帮助程序员在特定的时机执行特定的操作,辅助程序员完成一些比较复杂的逻辑。

6.应用生命周期

就是小程序从被打开到被关掉的一个过程

启动-->运行-->销毁

应用生命周期伴随着一些函数,我们称为应用生命周期函数,它需要在app.js文件的App()方法中进行定义,用来注册小程序
如果用户是在被挂起三十分钟再次访问小程序,只会执行onShow函数,不会执行onLaunch函数

从小程序生命周期的角度来看,我们一般讲的启动专指冷启动,热启动一般被称为后台切前台

6.页面生命周期

指小程序页面从加载-->运行-->销毁的整个过程

页面生命周期函数要在Page()方法进行定义

onLoad和onReady只会触发一次

8.生命周期两个细节
  1. tabbar页面之间相互切换,页面不会被销毁
  2. 点击左上角,返回上一个页面,会销毁当前页面
9.小程序API介绍

微信小程序提供原生API,可以方便的调起微信提供的能力如:获取用户信息,微信登录,微信支付。

小程序提供的API几乎都挂载在wx对象下,如:wx.request()、wx.setStorage(),wx对象实际上就是小程序的宿主环境微信所提供的全局对象。

异步API支持callback&Promise两种调用方式

  1. 当接口参数Object对象中不包含success/fail/compete是将默认返回Promise.
  2. 部分接口如 request, uploadFile 本身就有返回值,因此不支持 Promise 风格的调用方式,它们的 promisify 需要开发者自行封装。
10.发起网络请求

发起网络请求获取服务器的数据,需要使用wx.request()接口API

wx.request请求的域名必须在微信公众平台进行配置,如果使用wx.request()请求未配置的域名,会报错

相关推荐
小小王app小程序开发8 小时前
淘宝扭蛋机小程序核心玩法拆解与技术运营分析
大数据·小程序
说私域10 小时前
AI智能名片商城小程序数据清洗的持续运营策略与实践研究
大数据·人工智能·小程序·流量运营·私域运营
东东51610 小时前
xxx食堂移动预约点餐系统 (springboot+微信小程序)
spring boot·微信小程序·小程序·毕业设计·个人开发·毕设
CHU72903511 小时前
一番赏盲盒抽卡机小程序:解锁惊喜体验与社交乐趣的多元功能设计
前端·小程序·php
2501_9159184113 小时前
HTTPS 代理失效,启用双向认证(mTLS)的 iOS 应用网络怎么抓包调试
android·网络·ios·小程序·https·uni-app·iphone
数字游民952714 小时前
半年时间大概上了70个web站和小程序,累计提示词超过20w
人工智能·ai·小程序·vibecoding·数字游民9527
说私域14 小时前
微商企业未来迭代的核心方向与多元探索——以链动2+1模式AI智能名片商城小程序为核心支撑
大数据·人工智能·小程序·流量运营·私域运营
276695829215 小时前
美团 小程序 mtgsig
python·小程序·node·js·mtgsig1.2·美团小程序·大众点评小程序
2501_9151063215 小时前
混合应用(Hybrid)安全加固,不依赖源码对成品 IPA 混淆
android·安全·小程序·https·uni-app·iphone·webview
00后程序员张16 小时前
无需越狱,来对 iOS 设备进行调试、管理与分析
android·ios·小程序·https·uni-app·iphone·webview