微信小程序编辑与显示列表信息

在上一篇中在后台利用SpringBoot实现了对区域列表信息的增删改查操作，这篇将利用微信小程序完成前端与用户的交互操作。
新建一个小程序后默认含有index页面和logs页面，index页面会获取用户名和头像并显示，

通过点击头像会触发bindViewTap方法，在index.js中定义该方法，通过wx.navigateTo()使页面跳转到area/area

  bindViewTap: function() {wx.navigateTo({url: '../area/area'})},

最终效果如下所示，通过访问后台http://localhost:8080/SpringBootDemo/area/list，可以获取到区域列表信息，然后显示到小程序中

创建一个微信小程序项目后，新建一个area文件夹，然后在文件夹右键选择新建Page，就会自动创建area相关的页面文件wxml、样式表wxss、配置文件json、脚本文件js

新建Page后会自动在app.json中注册页面的路由信息，app.json中保存有整个小程序的配置信息

{"pages": ["pages/index/index","pages/logs/logs","pages/area/area","pages/edit/edit"],...
}

在area.json中可以对area页面进行配置，例如修改页面的标题为“区域列表”

{"navigationBarTitleText": "区域列表","usingComponents": {}
}

页面

接下来实现area.wxml页面，如下所示，

<view>类似于

标签用于包裹其他组件，
<text>用于普通文本，
<scroll-view>组件用于页面滚动加载，在其中将显示area列表，通过wx:for循环遍历后台的areaList数据并渲染到页面，用index代表某个索引，item指代具体某个元素
<navigator>组件用于导航跳转到指定url
<button>按钮组件，通过bindtap属性可以为按钮或其他组件绑定点击事件
对于每个标签，都可以使用属性data-来传递参数到dataset域，例如data-area="{{item}}"，之后在函数中e.target.dataset.area获取到该对象

<view class="container"><view class="widget"><text class="column">ID</text><text class="column">区域名</text><text class="column">优先级</text><text class="link-column">操作</text></view><scroll-view scroll-y="true" wx:for="{{areaList}}"><view class="widget"><text class="column">{{item.areaId}}</text><text class="column">{{item.areaName}}</text><text class="column">{{item.priority}}</text><view class="link-column"><navigator class="link" url="../edit/edit?areaId={{item.areaId}}"> 编辑 </navigator>|<text class="link" bindtap="deleteArea" data-area="{{item}}" data-index="{{index}}"> 删除 </text></view></view></scroll-view><button type="primary" bindtap="addArea">添加区域信息</button>
</view>

每个组件都指定了class属性，在area.wxss中通过类名来对页面样式进行设置

脚本

在area.js中编辑页面涉及到的脚本

文件中自动创建了许多代码钩子，其中在data中用于存放页面中要用到的数据对象，例如之前在页面中用到的areaList就是在这里定义的

js还默认提供了许多生命周期函数，当页面执行到特殊阶段时会触发。例如onLoad在页面加载时会触发，onShow在页面显示时会触发，onUnLoad页面卸载时触发。这里需要在页面每次显示时均获取areaList数据，因此在onShow中，完成数据初始化。

首先将this保存到that变量，因为之后的代码中，this会发生改变。之后通过wx.request()向后台请求area列表信息，其中method属性指定请求方式，success定义请求成功后的回调函数，在其中判断返回结果是否为空，若为空则通过wx.showToast()弹出提示信息，若成功通过setData()将得到的数据保存到areaList中，然后页面就可以渲染area数据。

除了钩子函数之外，还可以在后面自定义函数，例如实现之前在页面中绑定的删除函数deleteArea，首先通过showModal弹出对话框询问是否删除，这里通过e.target.dataset.area.areaName就可以获取之前页面绑定在dataset中的area信息。如果用户确认删除则向后台发送删除请求执行删除操作

// pages/area/area.js
Page({/*** 页面的初始数据*/data: {areaList: []},/*** 生命周期函数--监听页面显示*/onShow: function () {var that = this;    //将当前页面对象暂存到thatwx.request({url: 'http://localhost:8080/SpringBootDemo/area/list',method: 'GET',success: (res) => {var resList = res.data.areaList;if (resList == null) {wx.showToast({      //弹出提示信息title: "获取数据失败：" + res.data.errMsg,})} else {that.setData({       //数据获取成功，保存到areaList变量areaList: resList})}}})},// 删除区域信息deleteArea: function (e) {var that = this;wx.showModal({title: "提示",content: "是否删除" + e.target.dataset.area.areaName + "?",success: (modal) => {if (modal.confirm) {    //用户点击确定wx.request({url: 'http://localhost:8080/SpringBootDemo/area/remove',data: { 'areaId': e.target.dataset.area.areaId },method: "GET",success: (res) => {var toastText;if (res.data.success) {toastText = "删除成功";that.setData({       //删除当前页面areaList中对应的序号的areaareaList: that.data.areaList.splice(e.target.dataset.index)})} else {toastText = "删除失败，" + res.data.errMsg;}wx.showToast({title: toastText,duration: 2000})}})}}})}
})

需要注意的是由于直接使用http访问localhost后台，在微信进行页面请求时需要在设置->项目设置中勾选“不检验合法域名和HTTPS证书”。

同理实现area的编辑/添加页面edit，其效果如下，如果访问该页面带有areaId参数，则代表是编辑操作，页面会显示area已有值，否则为添加操作。

详细代码在：https://github.com/SuperTory/SpringBootDemo/tree/master/WxApp

微信小程序编辑与显示列表信息相关推荐

微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序开发之获取用户信息
环境微信开发者工具 Stable 1.06.2303220 云开发控制台 v1.5.47 用户的openid和头像名称信息 openid 是小程序用户的唯一标识.注意, openid 并不是微信用户 ...
微信小程序 scroll-view组件实现列表页实例代码
这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端 ...
微信小程序点播插件_微信小程序 wxParse插件显示视频问题
修改wxParse/html2json.js 文件 ,在 html2json(html, bindName)方法里 var node = { node: 'element', tag: tag, }; ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...
分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...
第21课微信小程序视频标签显示弹幕
第21课微信小程序视频标签显示弹幕效果图如下: wxml代码如下: <videosrc="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideo ...
微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期数据绑定(核心知识) 数据绑定的运算与逻 ...
php小程序 100行左右,微信小程序左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. 左侧分类右侧顶部分类右侧列表 .flex_row{display: flex;flex-dire ...
微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...

微信小程序编辑与显示列表信息

页面

脚本

微信小程序编辑与显示列表信息相关推荐

最新文章

热门文章