微信小程序开发每日一写--1

注册和工具方面我会单独出一期

 微信开发这次用到也是javascript 

 微信开发工具中关于app.json他是一个全局的变量

在这里边他能控制所有的变量，和C语言基本一样

{
  "pages": [
    "pages/list/list",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

其中这个pages中谁在最上边就代表用谁当主页

所有的页面开发是在pages这个文件夹中进行的。

里边初始的是包括index和logs，list是后来添加的

所以现在我们吧list拿到最上边我们用到就是list。

 

list原本是空的，我们可以通过编写代码来实现一些功能

下边是一些关于滚动，添加元素的一些代码：

 

 这个是list.wxml的：

其中外边的这一圈是起包裹作用的，控制着格式，所以scroll是滚动的意思，而scroll-y就是沿着y轴进行滚动。

<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

 

 这个是list.wxss的（没学过前端，不知道是不是和css差不多）：

这下边的每一个nth-child是对每一个元素的控制，比如里边有对颜色的控制

而最后的。container1{}中是关于对整个窗口的一个控制。

/* pages/list/list.wxss */
.container1 view{
  widows: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;

}
.container1 view:nth-child(2){
  background-color: lightsalmon;
  
}
.container1 view:nth-child(3){
  background-color: lightskyblue;
  
}

.container1{
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

 总结3步：

1.包裹容器

2.纵轴横轴又scroll-x或者-y表示

3.如何加限制条件，我们可以通过wxml中添加.container1进行限制

上述代码解释：这个是关于宽度和高度的限制条件还有一个应该是边框的颜色

前提是【他超出了区域才会进行纵向的滚动（特别注意）】

纵向给height

横向给width

 

成品：