微信小程序实战1-简单的静态页面_官网小程序静态示例源代码

效果：


代码：

/*app.json*/
{
   
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/user/user"
  ],
  "window": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#2e5e86",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
   
    "list": [
      {
   
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/h1.png",
        "selectedIconPath": "images/h1.png"
      },
      {
   
        "pagePath": "pages/user/user",
        "text": "用户中心",
        "iconPath": "images/h3.png",
        "selectedIconPath": "images/h3.png"
      }
    ]
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

 /*app.js*/
App({
   

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
   
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
   
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
   
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
   
    
  },

/* 全局里面有一个用户信息*/
appData : {
   
  userinfo : null,
}

})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!--index.wxml-->
<view class="container">

<view class="selection">
  <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000">
    <block wx:for="{
   {imgUrls}}">
      <swiper-item>
        <image src="{
   {item}}" class="slide-image" width="355" height="150"/>
      </swiper-item>
    </block> 
  </swiper>
</view>

<view class="selection">
  <view class="header">
    <text>精品推荐</text>
    <text class="text-all">全部精品</text>
  </view>

  <view class="content">
    <view class="content-item" wx:for="{
   {contentItems}}">
      <image src="/images/h2.png"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24