小程序开发 从简单的 crud 开始
Posted chenhui7373
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序开发 从简单的 crud 开始相关的知识,希望对你有一定的参考价值。
关键字:“小程序 API”
【WXML 完成布局】
<view> == <div>
{{}} == <%= %> ejs | jsp2
<block wx:for=‘{{list}}‘ > 相关内容:视图层 列表渲染
<navigator url="../pageName/pageName?transData={{item.transData}}" 相关内容:页面链接 导航跳转
CRUD 删除功能按钮,bindtap 绑定事件函数
<!-- data-xxx 传入 e.target.dataset.xxx -->
<text class=‘link‘ bindtap=‘deleteArea‘ data-areaid=‘{{item.areaId}}‘ data-areaname=‘{{item.areaName}}‘ data-index=‘{{index}}‘>删除</text>
………………………………………………………………………………6
【WXSS 完成样式】类似 css 盒子
…………………………………………………………………………
【json 定义一个页面标题】参照模板
………………………………………………………………
【js 提交表单 等一些交互】
页面初始数据 data <=> pageContext.setData (pageContext 是我自己定义的对象上下文,类似浏览器的window)
生命周期函数 onLoad 页面加载时触发,重点是【返回< 该页面不会再触发 原因是缓存】
生命周期函数 onShow 页面显示时触发,重点是【每次跳转到该页面都触发】
API
url 注意【详情】中我们可以关掉 ssl 验证来支持纯 http 而不是仅限 https 。
wx.navigateTo 实现页面跳转
wx.showModal 提示窗口
………………………………………………………………………………
【具体表单】
<!--pages/operation/operation.wxml-->
<view class=‘container‘>
<form bindsubmit=‘formSubmit‘ bindreset=‘formReset‘>
<!-- 区域名输入框 -->
<view class=‘row‘>
<text>区域名:</text>
<input type="text" name="areaName" placeholder=‘请输入区域名‘ value=‘{{areaName}}‘ />
</view>
<!-- 优先级输入框 -->
<view class=‘row‘>
<text>优先级:</text>
<input type="text" name="priority" placeholder=‘数值越大排名越前‘ value=‘{{priority}}‘ />
</view>
<view class=‘row‘>
<button type=‘primary‘ form-type=‘submit‘>提交</button>
<button type=‘primary‘ form-type=‘reset‘>清空</button>
</view>
</form>
</view>
【关键函数】
formSubmit: function (e) {
// console.log(‘form发生了submit事件,携带数据为:‘, e.detail.value)
var pageContext = this;
var formData = e.detail.value;
var url = pageContext.data.addUrl;
// modify 和 add 区别是 areaId 有无,实际
if(pageContext.data.areaId != null){
formData.areaId = pageContext.data.areaId;
url = pageContext.data.modifyUrl;
}
wx.request({
url: url,
data: JSON.stringify(formData),
method:‘POST‘,
header:{
‘Content-Type‘:‘application/json‘
},
success:function(res){
var result = res.data.success;
var toastText = ‘操作成功!‘;
if(result != true){
toastText = ‘操作失败‘ + res.data.errMsg;
}
wx.showToast({
title:toastText,
icon:‘‘,
duration:2000
});
// 一旦添加成功 就重定向 只是一个标志
if(pageContext.data.areaId == null){
wx.redirectTo({
url: ‘../arealist/arealist‘,
})
}
}
})
},
以上是关于小程序开发 从简单的 crud 开始的主要内容,如果未能解决你的问题,请参考以下文章