微信小程序-------前端小结

1、页面注册----------------------app.json/pages
要在app.json（控制全局配置）里page里注册过才能使用。

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

2、顶部首页标题栏-------------app.json/window

  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#097df1",
    "navigationBarTitleText": "咣当买菜",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  }

3、底部我的属性栏--------------app.json/page/tabBar/list
page里注册过后、再在tabBar里的list里进行设置

  "tabBar": {
    "color": "##3399ff",
    "selectedColor": "#3399ff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "商品列表"
      },
      {
        "pagePath": "pages/self/xsd",
        "text": "我的"
      }
    ]
  }

4、展示数据：部分标签-----------------------index.wxml

<view></view> 等价于h5中的<div></div>
<text></text>等价于h5中的<p></p>

For example:
<view wx:for="{{bminfos}}">
    <view id="single">
      <view id="d1">
        <image class="bm_img" src="{{item.bmimgs}}"></image>
      </view>
      <view id="d2">
        <view id="il1"> 
          <text class="salary_style">{{item.bmname}}</text>
          <text class="bmname_style">{{item.age}}岁</text>
        </view>
      </view>
    </view>
</view>

5、提供数据-----------------------index.js
for循环：差值表达式
作用：循环获取数据

<view wx:for="{{bminfos}}"> </view>

Page({
 data:{
   "bminfos":[
      {
       "bmimgs": "../../img/1.jpg",
        "bmname":"李老师",
        "age":26,
        "salary":500,
        "job_time":26,
        "edu":"博士后",
        "home":"杭州",
        "job":"数学，英语"
      },
      {
        "bmimgs": "../../img/2.jpg",
        "bmname":"张老师",
        "age":28,
        "salary":400,
        "job_time":26,
        "edu":"硕士",
        "home":"杭州",
        "job":"美术，历史"
      }
   ]
 }
})

6、设置样式-----------------------index.wxss

For example.

#d1{
  width: 150rpx;
  height:150rpx;
  float: left
}
.bm_img{
  width: 146rpx;
  height: 146rpx;
  border: 1rpx solid #132639;
  box-sizing: border-box;	
  这个属性防止内容往外冒出，加了会在内部缩小。
  border-radius: 10rpx
}
#il2 text{
  font-size: 30rpx;
  border: 1rpx solid #132639;
  margin-left: 25rpx;
  padding: 3rpx 8rpx
}
#il3{
  font-size: 35rpx;
  color:#d492b3;
  padding-left: 25rpx;
  padding-top: 5rpx
}
#d3{
  width: 150rpx;
  height:150rpx;
  float: left;
padding-top: 50rpx

恭喜！不积跬步无以至千里。