【第一个微信小程序】制作日志1

一.本人情况

web开发0经验——css和javascript了解皮毛，只在两年前跟着老师一步步做了个简单网页，然后就再也没碰过；小程序开发0经验。

该系列是本人正在做的第一个微信小程序，制作的同时同步更新，供自己参考。

二.开发环境

qq小程序开发者工具，微信开发者工具。去百度能搜到qq和微信官方发布的，下载对应自己电脑系统和芯片的版本就可以。

三.开发学习日志

1. 了解如何获得一个页面

打开app.json，会发现这行代码

"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]

index和logs分别对应index和logs两个文件夹，pages下一个文件夹代表一个可显示的页面。初始模版显示的是index页面。如果这样添加代码

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/creator/creator"
  ]

pages大文件夹下就会出现一个creator文件夹，里面包含和index下格式一样的四个文件。 此时我们有三个可显示的页面，index，logs和creator。

观察一下index文件中四个小文件的内容我们可以得知：

js文件中主要是变量和函数，wxml文件主要是页面中组件（文本，按钮之类的）布局，wxss文件主要是各组件的格式（宽，高，颜色之类的信息），json文件还没用上，还不清楚。

2. 使用button

点击添加你的问卷 

type="primary"就是变成微信中最常见的绿色框框

但我们也可以设计button样式，button样式的函数是class="xxx"，样式定义xxx需要写在wxss文件中

排谷

.fortext{
  margin: 50rpx;
  padding:15px;
  background-color: violet;
  color: white;
  border-radius: 10%;
}

这里background-color是按钮背景色，color是按钮上字的颜色，broder-radius是弧度，设成100%就是个椭圆。margin代表和上一行组件的间距。

bindtap里的函数需要写进js文件

jump_to_eat(){
    wx.navigateTo({
      url: '../吃谷/吃谷',
    })
  }

wx.navigateTo就是跳转到吃谷这个页面。

后面因为要写悬浮图标，找到了这个超棒的博客写法。

悬浮图标

多方实验，其中精髓是position:fixed，使图标位置随着其上方组件位置的变化而变化，这就是悬浮图标。

3. 用户输入框input

不是那种大文本框，是只有一行的输入框。

type里有好几种类型，这次用到的是text和digit，前者是文本，后者是可以带小数点的数字

placeholder是框框里未输入时显示的提示文本。

输入框是没有框的，框需要自己在class中去做。

.text_box {
  margin:10rpx;
  color: rgb(104, 28, 114);
  border: 1rpx solid rgb(81, 27, 126);
  border-radius: 10rpx;
}

实线框就是这个border，框线的粗细为1rpx，solid为实线，后面的是框线的颜色

老规矩，color是框中输入的字的颜色。

努力学习！