微信小程序制作-----日历记事本
因为某些原因吧,我接触到了微信小程序在这里将自己的一些理解和感悟写出来。
小程序介绍
小程序其实就是前端,后端你可以使用Java去完成,小程序的目录结构,页面可以当在一个pages的文件夹里面
然后注意文件名,一个文件的文件名和下面的文件的文件名需要保持一致,一个文件就是一个页面,小程序与我们之间的接触的前端其实差不多,分为了四个文件。
js,是类似我们学习的前端,但是有所不同。这个文件是用来进行逻辑运算的,存放一些静态变量,初始变量,事件,点击函数,提交到后端的信息的。
wxml,就是前端类似html,就是存放一些组件,放置一些前端显示的东西的,之前我们在jsp中使用的EL表达式,在这里也有但是调用时候是用的是{{变量}}。
wxss,这个类似我们之前学习的css,各种选择器是一样的调用方法,也都是一样的,小的范围的选择器优先级要高于大范围的选择器。
json这个暂时没有用得到,这个文件时用来存放一些配置文件的
全局
全局的变量是存在app为前缀的文件中的,如果你新建一个没有任何框架的项目的时候,只会有一个
只会有一个这个文件。
这个文件的作用是,这个项目当你换了电脑以后,你的一些配置还是不变的。
我在app.json中存放了
{"pages": ["pages/index/index","pages/second/second"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "小程序日历组件","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json"
}
pages是指的是路径,我需要变化的路径,window是美化这个界面的时候使用的。
具体实现
我的项目的是日历记事本,我在显示的主页需要去有两个部分,一个部分是日历,另一个部分是一个能够提交的记事本,因为我也是刚学我也是去down了一个前端
https://github.com/youshichongmingle/wx-calendar
这是我的前端来的博主的github,做得挺好的,我是在它的基础上加上可一个后端,我在它的上面加上两个表单,一个是用来添加和更改今日事务的表单,另一个是用来查询今日事物的。
在这里我用增加今日事务和更改事务为例
<form bindsubmit="formSubmit" bindreset="formReset"> <textarea id="textarea" name="textarea"></textarea><input id="input" name="input" hidden="true" value="{{selectVal}}"></input><button formType="submit">Submit</button>
<button formType="reset">Reset</button></form>
一个很类似标签的表单,里面存放了两个属性,<textarea>
和一个隐藏的<input>
用来提交,在这里也是后端接收的时候看的是他的name属性,提交按钮的属性formType="submit"
,然后再表单中的属性bindsubmit="formSubmit"
,这个formSubmit就是在js中的函数名,
formSubmit: function (e) {console.log('form发生了submit事件,携带数据为:', e.detail.value.textarea, e.detail);var aa=this;wx.request({url: 'http://localhost:8080/WeiXin/Test',header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8'},method: "POST",data: { textarea:e.detail.value.textarea,
input: e.detail.value.input },success: function (res) {console.log(res.data);},})},
这段代码中,之前的formSubmit是函数名,function (e)中的e就是表单数据,我们可以通过console.log()
方法去打印这个e去看他的属性和值,然后wx.request
是我们的表单提交,不过不一样的是,这个即使提交也是返回,url放的时候你的路径,也就是Java中的servlet,在data:中存放你要传的变量,success就是成功的返回,也就是servlet返回的变量,不过注意,前后端返回只能够传回的是json,其他的去看官方文档就可以他写的挺全的。
然后我设计的是,如果查询结果接返回,然后页面的转到使用的下面这段代码
wx.redirectTo({url: '../second/second?ii=' + res.data.recordthings})
页面跳转的方式有很多,这里我只用这一种,你们用的话可以去百度或者官方文档,然后就是参数,我把我查到的信息,放进ii中传到了下一个页面,这种传参,在页面second.js中接受,使用默认的Page函数有这样的效果
都是他默认的函数,在这里我们把我们的参数,打印一下找到我们需要的变量,然后通过this.setData()设出一个变量来存放这个出传过来的参数,在前端显示。
这就是当我们接触到一个新的前端所关心的问题,对于这个前端我们如何进行前端的跳转,何如进行表单提交,如何进行参数的传递,如何实现前后端数据的传递。
微信小程序制作-----日历记事本相关推荐
- 微信小程序项目实例——心情记事本
微信小程序项目实例--心情记事本 文章目录 微信小程序项目实例--心情记事本 一.项目展示 二.首页 三.效果图 文末 项目代码见文字底部,点赞关注有惊喜 一.项目展示 心情记事本是一款可以记录当前心 ...
- 微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息 方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
- 微信小程序开发难?资深大V教您微信小程序制作步骤和方法
微信小程序开发难?资深大V教您微信小程序制作步骤和方法 一.登录微信公众平台 就能在菜单"开发"---"基本配置"中看到小程序的AppID了,小程序的 Ap ...
- 个人怎么制作微信小程序,微信小程序可以免费制作吗?微信小程序制作教程
微信小程序 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
- 小程序 微信统计表格_微信小程序制作表格的方法
本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码 参数 内容 ...
- 微信小程序制作简单的商品列表页,实现价格求和
微信小程序制作简单的商品列表页,实现价格求和 准备工作 1.node.js 2.微信开发者工具 目录结构 客户端代码实现 index.wxml <view class="contain ...
- html制作炸金花,微信小程序怎么制作炸金花?微信小程序制作炸金花的方法
很多朋友喜欢玩炸金花游戏,那么怎么在微信小程序上制作炸金花呢?下面就是小编带来的完整详细的教程,想要学习的小伙伴就赶紧看过来吧. 微信小程序怎么制作炸金花?微信小程序制作炸金花的方法 app.json ...
- 零基础也能学会的微信小程序制作动态搜索页
零基础也能学会的微信小程序制作动态搜索页 准备工作: 微信开发者工具 APPID或测试号 创建一个JavaScript基本框架(如下图) 最终效果: 动手做起来吧~ index.wxml <vi ...
- 零基础也能学会的微信小程序制作横向滚动布局
零基础也能学会的微信小程序制作横向滚动布局 准备工作: 微信开发者工具 APPID或测试号 创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 最终效果: <! ...
最新文章
- 12-09关于几种排序方式
- 速度×6,模型缩小20倍:用华为华科的TinyBERT做搜索,性能达BERT 90%
- mysql group by 分组查询
- java gui 结构_java gui教学图形界面的层次结构.ppt
- echarts formatter_手把手教你玩转echarts(二)折线图
- sentinel的@SentinelResource注解使用
- Maven : mvn dependency:copy-dependencies
- 学习笔记 - Nginx在多层代理下获取真实客户端IP地址
- Effective C++: lambda表达式与闭包.
- mysqlbackup 还原特定的表
- python 删除大表数据
- linux wireshark 使用教程,M22 wireshark使用方法简介
- origin | 绘制倒置柱状图 | y轴向下柱状图 | y轴正负对比柱状图 | 添加图层 | 垂线图
- python学习之面对对象程序设计作业
- yy号,你以为你是QQ号么?
- Redhat 8修改系统语言为英文
- 多任务环境中如何喂看门狗?
- 全球及中国大豆蛋白行业未来发展趋势及投资建议分析报告2022-2028年版
- Mysql错误: Incorrect string value: '\xEF\xBF\xBD\xEF\xBF\xBD...' for column 'sql_info' at row 72
- MIKE水动力笔记13_数字化海图2之克里金插值