关键字:“小程序 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

wx.request

  url 注意【详情】中我们可以关掉 ssl 验证来支持纯 http 而不是仅限 https 。

wx.showToast

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 开始的更多相关文章

  1. Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作

    Visual Studio 2017中使用正则修改部分内容   最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...

  2. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  3. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  4. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  5. 微信小程序开发日记——高仿知乎日报(中)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

  6. 微信小程序开发日记——高仿知乎日报(上)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  7. 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58212d0fa7a7574c4f4cc3c5 作者:peggy 小程序概述 1 ...

  8. TODO:小程序开发环境搭建

    TODO:小程序开发环境搭建 1.第一步当然是要先注册小程序了 2.登录到小程序 a)完善小程序信息,如名称,图标,描述 3.绑定开发者 4.获取AppID,并设置服务器信息 5.下载并安装开发者工具 ...

  9. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

随机推荐

  1. JS原生 未来元素监听写法

    绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数. addEventListener()函数语法:elementObject.addE ...

  2. Vue学习(4)

    昨天内容回顾 1.{{}}模板语法.插值.简单运算2.指令系统 v-if 真正销毁重建 v-show 更改css的display,用于重复切换出现 v-bind 绑定属性 : v-on 绑定事件 @ ...

  3. mybatis 直接执行sql 【我】

    Connection conn = getConnection();//            Connection conn = this.ss.getConnection(); 返回Connect ...

  4. Day23--Python--常用模块02--序列化,configparser

    1. 序列化 把对象打散成bytes或者字符串. 方便存储和传输 序列化 把bytes或者字符串转换回对象. 反序列化 2. pickle(比较重要) 把python中所有的对象都可以转化成bytes ...

  5. ElasticSearch6.3.2------入门

    先去官网下载,方便测试用的Windows版本的 都解压了 --- 启动ElasticSearch和Kibana [E:\elasticsearch-]$ .\bin\elasticsearch.bat ...

  6. 做错的题目——给Array附加属性

  7. jsp+servlet+poi导出数据库中的数据

    index.jsp: <a href="POIout">简单导出数据</a> <a href="POIoutTemplate"&g ...

  8. bzoj1027 状压dp

    https://www.lydsy.com/JudgeOnline/problem.php?id=1072 题意 给一个数字串s和正整数d, 统计s有多少种不同的排列能被d整除 试了一下发现暴力可过 ...

  9. yum工具的使用

    yum工具的使用 ---------- yum list|head -n 10会有一个报错:由于管道被破坏而退出-----------搜索名字为vim的rpm包yum search vim使用grep ...

  10. golang rpc介绍

    rpc包提供了通过网络或其他I/O连接对一个对象的导出方法的访问.服务端注册一个对象,使它作为一个服务被暴露,服务的名字是该对象的类型名.注册之后,对象的导出方法就可以被远程访问.服务端可以注册多个不 ...