微信小程序制作—–日历记事本

因为某些原因吧，我接触到了微信小程序在这里将自己的一些理解和感悟写出来。

小程序介绍

小程序其实就是前端，后端你可以使用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了一个前端

这是我的前端来的博主的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()设出一个变量来存放这个出传过来的参数，在前端显示。

这就是当我们接触到一个新的前端所关心的问题，对于这个前端我们如何进行前端的跳转，何如进行表单提交，如何进行参数的传递，如何实现前后端数据的传递。