微信小程序（第二十七章）- 数据交互页面优化

最新推荐文章于 2023-02-22 20:25:24 发布
最新推荐文章于 2023-02-22 20:25:24 发布
阅读量711 收藏 3
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42178241/article/details/122811315
版权

@[TOC](微信小程序（微信小程序（第二十七章）- 数据交互搜索框及全局)共

前言

我们在实际开发中，图片、视频、音频等资源都是放在外部服务器上的，tabBar对应的图片必需是本地图片；因为微信小程序代码包必需控制在2MB以内；

既然我们json-sever服务器已经搭建完成，不用说数据交互安排！我们页面中需要的图片和数据都从json-server中获取；

首页（进行数据交互优化）

搜索框图片

对于页面中无需改变的图片，我们直接在wxml里面写路径即可，比如：搜索框里面的放大镜；但是对于需要改变的图片，我们最后不要在wxml中直接写路径，而是通过数据的方式引入图片的地址（图片的路径是定义在json-server的data中），比如导航菜单、轮播图；

  1. 搜索框图片不怎么改变，某地说，直接写图片路径。
<image src="http://localhost:3004/images/xsdkq_search.png"></image>

下面写法的问题：如果整个项目有10000张图片都是这么写的路径，如果将来把存储图片的服务器换了一个，那么ip地址肯定发生了改变，我们需要把10000张图片的路径都改了；
代码可维护性太低；
解决方案：把ip地址和端口号都定义为变量，然后在页面中引入变量即可；将来只需要改变变量即可；
但是这个最好定义成全局的，因为所有页面都要使用；
  1. 在app.js的globalData里面定义:baseUrl:"http://localhost:3004/";
  2. 哪个页面需要用到baseUrl，就在对应的js通过app对象获取即可；
    1. 怎么获取全局唯一app示例？const app = getApp()
    2. 通过app实例获取得到baseUrl;
    3. 把baseUrl赋值给当前页面的某个变量；
      app.js代码
globalData: {
    userInfo: null,
    baseUrl:"http://localhost:3004/"
  }

index.js代码

// 获取应用实例
const app = getApp()
data: {
    baseUrl:""
}
onLoad() {
    //获取baseUrl，赋值给当前页面的data里面的baseUrl变量
    var baseUrl = app.globalData.baseUrl;

    //把获取得到的baseUrl赋值给当前页面的baseUrl
    //this表示当前页面的page对象
    this.setData({
      baseUrl:baseUrl
    })
  }

index.wxml代码

<image src="{{baseUrl}}images/xsdkq_search.png"></image>

轮播图

定义轮播图所需的数据；
注：此微信小程序轮播图不带有点击详情功能，后期小程序完成后根据实情进行优化。

index.js代码

imgUrls: ['/images/xsdkq_index_lbt1.png', '/images/xsdkq_index_lbt2.png', '/images/xsdkq_index_lbt3.png','/images/xsdkq_index_lbt4.png']

index.wxml代码

<!--轮播图的实现-->
<!--swiper组件是用来定义滑块视图容器，swiper-item是每一个滑块-->
<swiper indicator-dots="{{indicatorDots}}" indicator-active-color="{{activeColor}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
    <!--
        block是一个辅助线组件，他不会有任何展示效果；
        wx:for 用来定义for循环，wx:for="数组"；
        {{表达式}}wxml的插值表达式，从js的data里面引用值
            {{background}},从js的data中获取background对应的值
        在wxml页面中需要使用的数据，我们最好都定义在data中
    -->
    <block wx:for="{{imgUrls}}" wx:key="*this">
        <swiper-item>
            <!--swiper-item里面承载的是一张图片，不同的swiper-item承载着不同的图片-->
            <image src="{{baseUrl}}{{item}}"></image>
        </swiper-item>
    </block>
</swiper>

导航菜单

导航菜单图片可以定义成动态的，因为很多app和pc端，在某个节日，比如：春节、双11都会改变图片的图标，那么我们也通过数据来定义；

  1. 定义导航菜单所需的数据；
    代码如下：
<!--导航菜单的实现-->
<view id="navView">
    <view class="navItemView" bindtap="goPurpose">
        <image src="{{baseUrl}}images/xsdkq_index_dhym_img1.png"></image>
        <text>开发目的</text>
    </view>
    <view class="navItemView">
        <image src="{{baseUrl}}images/xsdkq_index_dhym_img2.png"></image>
        <text>工作原理</text>
    </view>
    <view class="navItemView">
        <image src="{{baseUrl}}images/xsdkq_index_dhym_img4.png"></image>
        <text>注意事项</text>
    </view>
    <view class="navItemView" bindtap="goReview">
        <image src="{{baseUrl}}images/xsdkq_index_dhym_img3.png"></image>
        <text>用户评价</text>
    </view>
    <view class="navItemView">
        <image src="{{baseUrl}}images/xsdkq_index_dhym_img5.png"></image>
        <text>使用评价</text>
    </view>
    <view class="navItemView">
        <image src="{{baseUrl}}images/xsdkq_index_dhym_img6.png"></image>
        <text>提供建议</text>
    </view>
</view>

精选文章

首页的精选文章获取的是访问量前三的数据；

  1. 定义精选文章所需的数据；
  2. 在index.js的onload函数中，获取得到访问量前三的文章，赋值给data里面的hotArticles变量，然后遍历在wxml精选文章列表中；
  3. 模板图片展示问题：我们引入模板，不会走模板的js文件，并且引入过来之后，当前页面的baseUrl识别不出来；那么我们可以对获取的数据进行操作，把数据的Url拼接上baseUrl;
    articleTemplate.wxml代码
<!--文章列表结构模板-->
<template name="articleTemplate">
    <!--一个文章的列表结构，肯定对应的是一个对象数据，所以插值表达式在引用对象的时候，使用的是-->
    <view class="articleView">
        <view>
            <image src="{{IMAGE}}"></image>
        </view>
        <view class="articleContent">
            <view class="articleTitle">
                {{ARTICLES_TITLE}}
            </view>
            <view class="articleDesc">
                {{INFO}}
            </view>
        </view>
    </view>
</template>

index.wxml代码

<!--精选文章-->
<view id="hotArticleView">
    <!--文章总标题-->
    <view id="hotArticleTitleView">
        精选文章
    </view>
    <!--文章列表-->
    <!--使用模板-->
    <block wx:for="{{hotArticles}}" wx:for-item="article" wx:key="*this">
        <template is="articleTemplate" data="{{...article}}"></template>
    </block>
    <!--查看更多-->
    <view id="moreView" bindtap="goHotArticlePage">
        <text>查看更多</text>
        <view class="arrow"></view>
    </view>
</view>

index.js代码

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    baseUrl:"",
    lbt:"",
    navs:"",
    hotArticles:[],
    //轮播图
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 3500,
    duration: 500,
    activeColor:"#fff",
    circular:true
  },
  goHotArticlePage(){
    wx.navigateTo({
      url: '/pages/hotArticle/hotArticle',
    })
  },
  goReview(){
    wx.navigateTo({
      url: '/pages/review/review',
    })
  },
  goPurpose(){
    wx.navigateTo({
      url: '/pages/purpose/purpose',
    })
  },
  onLoad() {
    var _this = this;
    //获取baseUrl，赋值给当前页面的data里面的baseUrl变量
    var baseUrl = app.globalData.baseUrl;

    /*
      把获取得到的baseUrl赋值给当前页面的baseUrl
      this表示当前页面的page对象
    */
    this.setData({
      baseUrl:baseUrl
    })

    //获取得到lbt的数据
    wx.request({
      url: baseUrl + "lbt",
      method:"GET",
      header:{
        'content-type':'application/json'
      },
      success(res){//res是服务器响应数据
        _this.setData({
          lbt:res.data
        })
      }
    })

    //获取得到navs的数据
    wx.request({
      url: baseUrl + "navs",
      method:"GET",
      header:{
        'content-type':'application/json'
      },
      success(res){//res是服务器响应数据
        _this.setData({
          navs:res.data
        })
      }
    })

    //获取得到hotArticles的数据
    wx.request({
      url: baseUrl + "hotArticles?_sort=pv&_order=desc&_limit=3",
      method:"GET",
      header:{
        'content-type':'application/json'
      },
      success(res){//res是服务器响应数据
        //把响应过来的数据的IMAGE的路径之前拼接上baseUrl
        for(var i=0;i<res.data.length;i++){
          res.data[i].IMAGE = baseUrl + res.data[i].IMAGE;
        }
        _this.setData({
          hotArticles:res.data
        })
      }
    })
  }
})

登录

数据定义

登录和注册使用的是同一套数据，无非登录是进行用户数据的查询，注册是用户数据的添加

登录验证

所谓的登录验证，就是在已有的数据库中查找是否存在输入登录信息。
对输入信息进行提取判断。

本地缓存

我们在使用APP时登录信息会存储

  1. 把输入的用户名和密码放在本地缓存；
    wx.setStorage(Object object)将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
    wx.setStorageSync(string key, any data, Boolean encrypt)wx.setStorage 的同步版本

同步：按照顺序执行
异步：同时执行
我们使用wx.setStorage(Object object)；

login.js代码

// pages/login/login.js
// 获取应用实例
const app = getApp()

Page({

    /**
     * 页面的初始数据
     */
    data: {
        baseUrl:""
    },
    //登录函数
    toLogin(e){
        var _this = this;
        //获取提交的用户名和密码用变量存储
        var userName=e.detail.value.userName;
        var userPwd=e.detail.value.userPwd;
        console.log(userName,userPwd);

        //只要输入了用户名和密码，都缓存在本地缓存
        //不存在key，创建；存在，更新
        wx.setStorage({
            //本地缓存的key
            key:"loginUserInfo",
            data:{
                userName:userName,
                userPwd:userPwd
            }            
        })

        //根据用户名和密码从json-server服务器查询数据
        wx.request({
            url: _this.data.baseUrl+"users?"+"(userName="+userName+"|phone="+userName+")"+"&userPwd="+userPwd,
            method:"GET",
            header:{
                'content-type':'application/json'
            },
            success(res){//res是服务器响应的数据
                //判断数组的长度，如果>0，表示登录成功！否则登录失败，登录失败给其弹框提示
                if(res.data.length > 0){
                    wx.switchTab({
                      url: '/pages/my/my',
                    })
                }else {
                    wx.showToast({
                      title: '用户名密码错误',
                      icon:'error',
                      duration:1500
                    })
                }
            }
        })
    },
    toRegPage(){
        wx.navigateTo({
          url: '/pages/register/register',
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var _this = this;
        var baseUrl = app.globalData.baseUrl;
        this.setData({
          baseUrl:baseUrl
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

获取用户名和密码

在onload函数中获取本地缓存数据，然后把缓存的用户名和密码显示到输入框中；
wx.getStorage(Object object) 从本地缓存中异步获取指定 key 的内容。缓存相关策略请查看 存储。
wx.getStorageSync(string key, Boolean encrypt) wx.getStorage 的同步版本。

我们获取缓存数据，wx.getStorageSync(string key, Boolean encrypt)

login.js代码


onLoad: function (options) {
        var _this = this;
        var baseUrl = app.globalData.baseUrl;
        this.setData({
          baseUrl:baseUrl
        })

        //获取缓存数据
        wx.getStorage({
            key: 'loginUserInfo',
            success (res) {
              console.log(res.data)
              _this.setData({
                  loginUserInfo:res.data
              })
            }
        })
    },

login.wxml代码

<!--定义form组件-->
<form bindsubmit="toLogin">
    <!--输入框区块-->
    <view id="inputView">
        <!--文本框-->
        <input type="text" placeholder="手机号/用户名" name="userName" value="{{loginUserInfo.userName}}"></input>
        <!--密码框-->
        <input type="text" placeholder="密码" password name="userPwd" value="{{loginUserInfo.userPwd}}"></input>
    </view>
    <!--按钮区域-->
    <view id="buttonView">
        <button form-type="submit">登录</button>
        <button bindtap="toRegPage">注册</button>
        <view>忘记密码</view>
    </view>
</form>

登录状态保存

在项目中，很多页面是在登录后才能访问；
login.js代码

// pages/login/login.js
// 获取应用实例
const app = getApp()

Page({

    /**
     * 页面的初始数据
     */
    data: {
        baseUrl:"",
        loginUserInfo:""
    },
    //登录函数
    toLogin(e){
        var _this = this;
        //获取提交的用户名和密码用变量存储
        var userName=e.detail.value.userName;
        var userPwd=e.detail.value.userPwd;
        console.log(userName,userPwd);

        //只要输入了用户名和密码，都缓存在本地缓存
        //不存在key，创建；存在，更新
        wx.setStorage({
            //本地缓存的key
            key:"loginUserInfo",
            data:{
                userName:userName,
                userPwd:userPwd
            }            
        })

        //根据用户名和密码从json-server服务器查询数据
        wx.request({
            url: _this.data.baseUrl+"users?"+"(userName="+userName+"|phone="+userName+")"+"&userPwd="+userPwd,
            method:"GET",
            header:{
                'content-type':'application/json'
            },
            success(res){//res是服务器响应的数据
                //判断数组的长度，如果>0，表示登录成功！否则登录失败，登录失败给其弹框提示
                if(res.data.length > 0){
                    //把登录成功的用户数据放到globalData的userInfo中
                    app.globalData.userInfo = res.data[0];
                    wx.switchTab({
                      url: '/pages/my/my',
                    })
                }else {
                    wx.showToast({
                      title: '用户名密码错误',
                      icon:'error',
                      duration:1500
                    })
                }
            }
        })
    },
    toRegPage(){
        wx.navigateTo({
          url: '/pages/register/register',
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var _this = this;
        var baseUrl = app.globalData.baseUrl;
        this.setData({
          baseUrl:baseUrl
        })

        //获取缓存数据
        wx.getStorage({
            key: 'loginUserInfo',
            success (res) {
              console.log(res.data)
              _this.setData({
                  loginUserInfo:res.data
              })
            }
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

我的

  1. 如果用户没有登录跳转到登录页面；如果已经登录，则进入我的页面；
  2. 在我的页面展示用户的动态信息；
    my.js代码
// pages/my/my.js
const app = getApp()

Page({

    /**
     * 页面的初始数据
     */
    data: {
      userInfo:""
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      var _this = this;
      //判断用户是否登录
      var userInfo = app.globalData.userInfo;
      if(userInfo == null){
        //没有登录
        wx.redirectTo({
          url: '/pages/login/login',
        })
      }else{
        _this.setData({
          userInfo:userInfo
        })
      }
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },
    goAboutUs(){
        wx.navigateTo({
          url: '/pages/aboutUs/aboutUs',
        })
      },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },
})

my.wxml代码

<!--用户信息展示区域-->
<view id="userInfoView">
    <view>昵称:{{userInfo.nickName}}</view>
    <view>来自:{{userInfo.address}}</view>
</view>

注册

关于注册，要避免手机号、验证码和用户名的重复；
在之前的静态页面阶段，我们以实现了表单组件提交的数据；
注意：提交给json-server的数据要和数据库存储格式一样

materialistOier
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
小程序优化方案
liya_nan的博客
07-05 1万+
    最近一直在做小程序，开始的时候因为项目太急，功能模块很少，权衡之下选择了原生的小程序开发模式。然后随着功能迭代，小程序的大小又有限制，所以决定开始尽可能的优化项目。下面是用到的一些优化方案： 1. wx:if vs hidden     小程序官方文档中描述，wx:if如果在初始渲染条件为false时，框架什么耶不会做，只有当值变为真时，才开始局部渲染。hidden只是简单的控制显示与...
大数据/小程序
lizening555的博客
04-17 1261
何年何时何月---山东帝腾网络科技有限公司微信小程序用户数量庞大，何奈两马相争谁与争锋树下落叶缤纷五彩---小程序为您带来您意想不到的惊喜 ​​​​左手抓右手--亲密无间、爱心满满大明湖畔的夏雨荷---济南核心的情感动力---微信（小程序）带你飞。飞跃千山万岁、带你星空游览。飞跃朋友圈提供广告精准推广-SEM竞价。全国招商小程序代理、网站建设、网络服务。...
微信小程序day04：数据请求，轮播图
kkkghjk的博客
08-24 346
wx.request 请求数据 GET/post GET请求是从数据库里请求东西 post请求是从数据库 提交东西 var that=this; wx.request({ url: ***, data:{}, // 从服务器里取信息 method:'GET', header:{ "Content-Type":"json" }, success:function(res){ ...
小程序左右列表联动优化版(简单易懂)
cream66的博客
05-28 2258
最近通过做一个商城的项目实战学习小程序，目前市场上大部分的商城列表都使用了菜单的左右联动功能，因为自己想做好这个项目，所以在实现了以后还进行了一下优化，想记录下来。 话不多说，直接上代码。 wxml <view class="contain"> <view id="header"> <!-- 这是我写的头部组件，可以忽略 --> <header title="Bingo" /> </view> <view id="searchB
微信小程序分类-左侧导航与右侧内容联动优化
zhouhangzooo的博客
03-26 3648
由上一篇介绍了分类联动：https://blog.csdn.net/zhouhangzooo/article/details/88775790 之后，还有一些问题，比如当点击最后一个分类时，并且其商品较少时，会出现如下情况，如图 这样显示并不好，因此我们需要优化一下，比如判断是最后一个分类时，在右边添加一个大概高度的view，逻辑很简单，直接上代码： <block wx:i...
微信小程序实现默认第一个选中变色效果
10-18
在微信小程序开发中，有时我们需要...通过这种方式，你可以轻松地实现在微信小程序中让默认第一个选项变色，并在用户交互时改变选中状态的效果。这种方法对于构建各种列表选择场景非常实用，例如导航菜单、选项卡等。
微信小程序开发教程cms
10-28
### 微信小程序开发教程CMS知识点详解 #### 第一章：开始入门 ##### 第一节：课程介绍，定个小目标 - **知识点1：微信小程序简介**：介绍微信小程序的基本概念、发展历程及其在移动互联网生态中的地位。 - **知识点...
最新的6.3.27 及以上 微信小程序官方示例源码，包括组件、接口示例，版本20170111
10-26
此压缩包包含的是微信小程序官方示例的源代码，适用于6.3.27及以上版本，时间戳为20170111，可以帮助开发者深入理解和学习微信小程序的开发。 在这些源文件中，每个都有其特定的作用： 1. `app.js`：这是小程序的...
基于微信小程序的食堂校园预约就餐ssm毕业论文.doc
最新发布
08-07
系统设计包括前端界面和后端逻辑，前端使用微信小程序进行交互设计，提供友好的用户体验；后端则主要负责处理业务逻辑和数据操作。数据库设计考虑了数据完整性，确保信息的安全性和准确性。在系统实现过程中，分别对...
【Vue小程序】商城开发 第四节 上
12-24
在本节"【Vue小程序】商城开发 第四节 上"中，我们将深入探讨使用Vue.js技术构建微信小程序商城的关键技术和实践。Vue.js是一款轻量级的前端JavaScript框架，以其易用性和灵活性深受开发者喜爱，而将其应用于微信小...
Vue 绑定图片Src路径的几种方式
热门推荐
林中明月间丶
09-24 1万+
//直接写路径 <img src="@/assets/logo.png" alt=""> //绑定： <img src="@/assets/logo.png" alt=""> background: url('~@/assets/images/quanbg.png') no-repeat center; <li v-for ="item in images" :key="i"> <img :src="item" alt=""> &l..
微信小程序之数据交互
weixin_44538225的博客
12-26 5527
学习视频： https://www.bilibili.com/video/BV1Gv411g7j6?p=88&spm_id_from=pageDriver 数据交互（首页） 把图片、视频资源放到public目录下 实际开发中，图片、视频、音频等资源都是放在外部服务器上的，tabBar对应的图片必须是本地资源，也就是要放在微信小程序项目中。因为微信小程序的代码包必须控制在2M以内。 然后微信小程序项目中的images的大部分图片都可以删除，留下这些tabBar中的图片 对于页面中无序改变的图
微信小程序登录注册页面代码
m0_57790713的博客
02-22 1万+
上面代码中，index.wxml 文件定义了注册页面的视图，包括用户名、密码、确认密码的输入框以及提交按钮和一个跳转到登录页面的链接。index.js 文件定义了注册页面的逻辑，当用户点击提交按钮时会发送注册请求，并根据请求的返回结果进行提示和页面跳转。login.js 文件类似地定义了登录页面的逻辑
小程序性能优化实践总结
Dandelion_drq的专栏
10-28 565
项目简述 & 问题 先简单介绍一下项目，就是一个比较常规的点餐小程序。 界面如图： 左边是分类菜单，右边是长列表，有多个分类的商品，单个分类滚动完后可以继续滚动切换到下一个分类，同时左边的分类菜单选中态会跟着切换到当前商品列表显示的分类。 考虑到更好的用户体验，以及参考了美团等点餐小程序，这个商品列表的数据是一次性返回的。目前遇到的问题就是，当商品数量比较多时，首次渲染时间很长，而且页面会卡顿。 优化方向 逻辑优化 小声bb：其实就是原来代码（由于历史原因）写得太烂了……OTL 先放个图????
解决小程序‘Dom limit exceeded’问题
lmq1919的博客
05-27 4157
解决小程序‘Dom limit exceeded’问题，让十万条数据的小程序列表如丝般顺滑一.小程序页面限制多少个```wxml```节点？1.dome12.dome2，删除了不必要的dom嵌套二.列表页面优化1.减少不必要的标签嵌套（1）删除冗余字段（2）```setData```的进阶用法三.使用虚拟列表1.```listData```数组的结构2.必要的参数3.```wxml```的dom结构4.获取列表第一层dom高度的px高度5.页面滚动时间节流6.页面滚动事件处理7.待优化事项 某天闲着无聊想练
小程序优化实践
一群专业码农的笔记本
08-07 4084
最近新接手了一个小程序，用这个小程序做了一些性能和交互优化的实践，记录下来一些操作和坑跟大家分享。
【微信小程序---pages/index.wxml与index.js的绑定】
m0_56349322的博客
02-24 1233
1.通过在pages/index.js中Page({data:{引入}) 如下 定义一个thisWeekMovie：{}里面填写 属性 2. 通过pages/index.wxml进行{{thisWeekMovie.属性 调用对应的值}}
微信小程序 在index.js中改变全局变量 使得index.wxml中的数据显示和隐藏
幸运的小菜鸟的博客
05-25 3099
如何有效的改变全局变量？？ 请各位大佬帮我看看 十分感谢 index.wxml代码如下： 在这里插入代码片 <view class='message' bindtap='goToDetail' wx:for='{{messageList}}' wx:for-item='list' wx:key='{{list.id}}' data-id='{{list.id}}'> &l...
微信小程序交互性能优化利器WXS的使用（一）
tangfan7的博客
01-12 1347
微信小程序交互性能优化利器WXS的使用WXS简介WXS原理注意事项（划重点）合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 WXS简介 WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。 WX
"微信小程序开发中页面间跳转与前后端数据交互解决方案
在开发微信小程序项目时，我们遇到了一些问题，但幸运的是我们也找到了相应的解决方案。其中一个问题是页面间跳转如何监听事件。小程序提供了打开新页面、页面重定向、页面返回、tabBar 切换四种改变视图的机制，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

materialistOier

我只是一名ssfoier

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值