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

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

小程序介绍

小程序其实就是前端，后端你可以使用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()设出一个变量来存放这个出传过来的参数，在前端显示。
这就是当我们接触到一个新的前端所关心的问题，对于这个前端我们如何进行前端的跳转，何如进行表单提交，如何进行参数的传递，如何实现前后端数据的传递。